Beacon: Glass Pill Navbar with Search

Beacon is a floating, dark-glass header that feels alive. Links swell like a dock as the cursor passes, a sharp highlight runs along the border following the pointer, the search icon expands into a full inline search field, and the log-in button ripples its letters on hover. Drop it into any React site for an instantly premium first impression.

Dock-style magnification for text links

Each link measures its distance to the cursor and scales and lifts with spring physics, so neighbours grow a little and the hovered link grows most.

Search without leaving the bar

The search icon morphs into an inline field with clear and close buttons and an Esc badge; on small screens the links move into an animated mobile drawer.

Features

• ✓Floating dark glassmorphism pill (14 px radius)
• ✓Spring-based link magnification and lift
• ✓Shiny border highlight that follows the mouse
• ✓Expanding inline search with clear, close and Escape support
• ✓Wavy letter animation on the log-in button
• ✓Logo mark with candlestick bars
• ✓Animated mobile drawer with hamburger toggle
• ✓Framer Motion, plain CSS, no UI framework

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

• SaaS and fintech marketing sites
• Agency and portfolio headers
• Product launch pages
• Docs and knowledge hubs

From download to production

1. Download Beacon: Glass Pill Navbar with Search 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.