Standard navigation menus are dead weight. Static text, flat hovers, zero personality. Your menu is the first thing visitors interact with — it should set the tone for the entire site.
Kern_FlowingMenu replaces lifeless navigation with a full interaction system. Every row is a stage: hover triggers a directional reveal overlay with an infinite marquee that scrolls your label alongside pill images. The physics are real — three calibrated spring presets (soft, standard, fast) drive every transition. No cubic-bezier, no duration guessing.
Five reveal modes give you range without code changes. Edge Slide reads the cursor entry point and reveals from top or bottom. Clip Circle expands outward from the exact cursor position. Horizontal Wipe alternates direction per row for visual rhythm. Blur In dissolves through a 20px gaussian blur with subtle scale. Split separates the row into two halves that slide apart vertically.
- Spring Physics Engine: Three tuned presets — SPRING_SOFT (60/20/1.2), SPRING_STD (90/18/1.1), SPRING_FAST (120/14/0.9). Every overlay, every pill stagger, every cursor spring uses explicit stiffness, damping, and mass. The motion has weight.
- 55+ Property Controls / 10 Groups: Colors, Border, Typography, Layout, Animation, Magnetic Text, Interaction, and Custom Cursor — each in a collapsible panel. Two optional groups (Magnetic Text, Custom Cursor) toggle entire feature sets on/off without boolean clutter.
- Magnetic Text Scatter: Letters repel from cursor with configurable radius (50–300px) and force (5–60px). The scatter uses inverse-square falloff for natural dispersion.
- Velocity-Responsive Marquee: The marquee track accelerates with cursor speed for a reactive, physical feel.
- Per-Row Color Overrides: Overlay text color can be set individually per row for full creative control.
- Character Mask Reveal: Marquee text reveals character-by-character with staggered timing.
- Custom Cursor: Circular cursor with mix-blend-mode difference. Adjustable size (32–120px) and color. Spring-damped tracking (stiffness: 200, damping: 25).
- Living Images: Ken Burns slow zoom on pill images — 10-second infinite loop. Disabled automatically when prefers-reduced-motion is active.
- 3-Breakpoint Responsive: Independent font sizes and row heights for desktop (1440px+), tablet (810–1200px), and mobile (<810px). Mobile row height enforced at 44px minimum for touch compliance.
- Accessibility: Semantic `<nav>` element, configurable `aria-label`, `aria-hidden` on decorative borders and cursor. Full reduced-motion fallback — simple color swap, no movement. WCAG AA contrast in default colors (19.5:1).
Give your navigation the weight it deserves. BuiltbyKern.
BuiltByKern
