Drift: 15 Animated Tab Bars

The bottom tab bar is the most-touched control in any mobile app, so it deserves more than a colour change. Drift gives you fifteen hand-crafted, animated navigation bars for React, grouped into five themed sets. Dots fly in parabolic arcs, droplets stretch and wobble, notches slide under bubbles, docks magnify under the cursor and an island morphs into a full workspace panel. Pick one, or mix them across your products.

Physics-inspired motion

Framer Motion springs, SVG path morphing and a gooey filter drive the transitions: the active indicator travels, squashes, stretches and settles instead of simply jumping to the next tab.

Five sets, fifteen personalities

From minimal light bars to glowing dark pills, glass capsules and a magnifying dock, every set contains three distinct bars you can copy as self-contained components with their own CSS file.

Variants included

• Set 1: Glass Slide: A sliding frosted highlight with notification dot, a dark bar with a rising wave bump and a clean light bar.
• Set 2: Spotlight: A dark pill with a red spotlight, a curved notch with a gradient bubble and a gooey liquid dock, plus a background colour picker.
• Set 3: Liquid Lens: A white curved bar with a flying pearl dot, a glass capsule with a glowing bubble and a dark pill with a refractive glass lens.
• Set 4: Dock & Island: A sliding pill with sparkle bursts, a magnifying icon dock and a compact island that morphs into a workspace panel.
• Set 5: Droplet: A parabolic flying dot with landing ripple, a teal water droplet riding a spring hill and a responsive dark wave bar.

Features

• ✓15 animated navigation bars in 5 demo sets with a built-in set switcher
• ✓Sliding frosted-glass active highlight with notification dot
• ✓Curved SVG notch that follows the active tab with a floating gradient bubble
• ✓Gooey liquid dock using an SVG blur/contrast filter
• ✓Flying dot with parabolic trajectory, squash-and-stretch and landing ripple
• ✓Teal water-droplet indicator riding a spring-animated hill
• ✓Dark pill with a 3D refractive glass lens
• ✓Magnifying icon dock with configurable size, magnification and lift
• ✓Compact island that expands into a workspace panel with tabs, theme and fullscreen toggles
• ✓Background colour picker to preview bars on different surfaces (Set 2)
• ✓Framer Motion and Lucide icons; each bar ships with its own CSS

What's included
Full JavaScript source code for 5 variants, 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

• Mobile apps and PWAs
• Social, shopping and media apps
• Dashboards and SaaS workspaces
• Design-system and prototype libraries

From download to production

1. Download Drift: 15 Animated Tab Bars 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.