Page Search

What is Page Search?

Page Search adds a Find-on-Page search overlay to your site. It works like your browser's built-in Ctrl+F — but with a beautiful, branded UI that matches your site. Visitors can search, highlight, and navigate to any text on the page in real time. Ideal for blogs, documentation sites, knowledge bases, and content-heavy portfolios.

Core Features

• Live text highlighting across all visible page content as the user types

• Match counter with previous/next navigation using arrow keys or chevron buttons

• Scrollable match list panel showing context snippets for every result

• Glassmorphism search bar with dark and light theme options

• Smooth scroll to each match with active highlight glow

• Case-sensitive search toggle built into the search bar

• Enter to confirm and close at your selected result, Esc to dismiss

• 5 highlight colour presets: Yellow, Blue, Green, Pink, Orange

• 3 entry animations: Slide, Fade, Scale

• 4 button style presets: Indigo, Dark, Minimal, Emerald — with custom colour overrides

• Configurable hover animation with adjustable scale

• Overlay renders above all content

• Performance-optimised with debounced search and configurable max match limit

Controls inside Framer

Trigger

• Trigger mode (Button Only, Keyboard Shortcut, or Both)

• Button label text

Match List

• Show or hide the scrollable match context panel

Search Options

• Case Sensitive default

• Pattern Match mode

• Max Matches limit (10-200)

Appearance

• Highlight colour (Yellow, Blue, Green, Pink, Orange)

• Entry animation (Slide, Fade, Scale)

• Bar position (Top, Center)

• Theme (Dark, Light)

Button Style

• Style preset (Indigo, Dark, Minimal, Emerald)

• Custom background colour override

• Custom text colour override

• Border radius

• Show/hide search icon

• Hover effect toggle (On/Off)

• Hover scale amount

Font

• Custom font family and weight

Best use cases

• Documentation and knowledge base sites where visitors need to find specific topics quickly

• Long-form blog posts and editorial content with keyword-dense pages

• Portfolio and agency sites with extensive project case studies

• SaaS marketing pages where prospects search for specific features or pricing details

Drop it onto any page, configure the trigger and appearance, and give your visitors a polished, branded search experience.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.