component
Page Search
By Aidan Looker
Details
- Aidan LookerAuthor
- componentType
- $9.00Price
- 2026-03-26Published
- 2026-06-13Updated
- 2026-03-15Added
- FormsCategories
Summary
What is Page Search?
Description
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 .
Introduction
Find-on-page search button & function
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #7782