Seek: Morphing Product Search Bar

Seek turns a routine search into a moment. A compact pill with a rotating gradient glow expands into a full input; when the user submits, a loader spins and the matching product cards burst out of the bar centre, pop upwards and fly into place in a tidy results grid.

Results that fly from the bar

Each card's final grid position is measured off-screen first, then the card is launched from the search bar centre along its own path, scaling up as it lands.

Polished input states

Expand on click, auto-focus, a rotating premium glow and a loading spinner keep the user informed at every step.

Features

• ✓Expanding search pill with rotating gradient glow
• ✓Auto-focused input with loading state
• ✓Result cards that burst from the search bar and fly into a grid
• ✓Measured target positions for pixel-accurate landing
• ✓Product cards with image, name, category and price
• ✓Spring-animated expand and collapse on blur
• ✓Framer Motion and Lucide icons
• ✓Single-file component

What's included
Full JavaScript source code, package.json with locked dependencies, Vite config, RVT.ai README with setup and customisation guide, LICENSE and THIRD-PARTY-NOTICES.md. No node_modules: run npm install once.

Requirements
Node.js 20.19+ and npm 10+ to develop and build. The production build is static HTML, CSS and JavaScript that runs on any static host. No backend, API keys or paid services required.

Perfect for

• E-commerce and fashion stores
• Marketplaces and catalogues
• Command palettes and app search
• Product launch demos

From download to production

1. Download Seek: Morphing Product Search Bar from your account and unzip it.
2. Run npm install, then npm run dev to open it locally.
3. Swap in your brand colours, copy and data (see the README customisation guide).
4. Run npm run build and deploy the dist/ folder to any static host.

Support and updates
Includes free updates and six months of RVT.ai support. Ask pre-purchase questions in the product Q&A, or open a ticket at https://rvt.ai/support with your order number.

Choose the license for your project

A Regular license covers a single end product that is not sold to end users. Choose Extended for a single end product that is sold to end users, including SaaS products and paid applications. Review the full license terms before checkout.