Buoy: Scroll-Aware Floating Dock

Buoy is a compact navigation dock packed with micro-interactions. It springs in on load, shrinks out of the way when the user scrolls down and returns when they scroll up. A glossy highlight glides between Home, Search, Likes and Cart, the search icon expands the dock into a full search field, and tapping Likes releases a burst of gradient hearts.

Reacts to scrolling

Framer Motion's scroll tracking shrinks the padding and icons when scrolling down and restores them on the way up, keeping content visible without hiding navigation.

Delight in every tap

Shared-layout active highlight, an inline expanding search, a cart count badge and a heart-particle burst make a four-icon dock feel premium.

Features

• ✓Floating glassmorphism dock with spring entrance
• ✓Shrinks on scroll down, expands on scroll up
• ✓Shared-layout glossy active indicator
• ✓Search icon expands into an inline search field
• ✓Animated heart burst on Like
• ✓Cart badge with item count
• ✓Remix Icon outline/fill states
• ✓Tailwind CSS v4 + Framer Motion, a single component file

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 marketplace apps
• Social and content feeds
• Mobile-first landing pages
• PWA and app prototypes

From download to production

1. Download Buoy: Scroll-Aware Floating Dock 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.