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.
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
Trigger mode (Button Only, Keyboard Shortcut, or Both)
Button label text
Show or hide the scrollable match context panel
Case Sensitive default
Pattern Match mode
Max Matches limit (10-200)
Highlight colour (Yellow, Blue, Green, Pink, Orange)
Entry animation (Slide, Fade, Scale)
Bar position (Top, Center)
Theme (Dark, Light)
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
Custom font family and weight
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
