Nav animation variations
Six smooth, modern nav interactions inspired by Vercel, Linear, Apple, Aceternity, and friends. The “Product” item is the active route in every variant so the active state reads clearly. Hover each strip to feel the motion — same items, very different vibes.
Magnetic Pill
inspired by Vercel · Cron · RaycastA single rose-tint pill morphs between items with spring physics. When you stop hovering, it gracefully returns to the active route. Most popular pattern in modern SaaS.
Sliding Underline
inspired by Linear · Notion · Stripe DocsA thin bar glides under whatever the cursor is over. The active item carries a thicker brand-red bar that the slider hands off to and from. Quiet, editorial, very clean.
Spotlight Cursor
inspired by Aceternity UI · Cult UIA soft radial glow tracks the cursor across the nav strip while items get a subtle hairline underline on hover. Premium, atmospheric — pairs well with darker page chrome too.
Floating Dot Slider
inspired by FEMS-native (extends the current red-dot motif)A bolder red dot lives under the items and springs to wherever you point. Doubles as the active-page indicator. Feels playful but stays on-brand.
Lift & Shadow
inspired by Apple · StripeItems rise 1–2px on hover with a soft shadow under a white pill. The active item is permanently lifted with a brand-tinted shadow. Tactile, premium, generous.
Magnetic Pill + Persistent Bar
inspired by Hybrid — Framer × FEMSCombines V1's magnetic pill (only on hover) with a tiny persistent red bar under the active item. You always know where you are even when the cursor is parked elsewhere.
How to pick
- V1 / V6 — safest bets, most familiar to your users, easy to ship
- V2 — if you want the nav to feel quiet and editorial
- V3 — if you want a “wow” moment without screaming
- V4 — if you want to lean into the FEMS red as a motif
- V5 — if you want the nav to feel physical and premium
Tell me which one (or which combo) and I'll wire it into the realNavbarand replace the current animation.