component
Liquid Kinetic Nav
By Abishek M
Details
- Abishek MAuthor
- componentType
- 2026-05-29Published
- 2026-05-30Updated
- 2026-05-15Added
- NavigationCategories
Summary
The Liquid Kinetic Nav: Key Features Apple-Inspired Liquid Aesthetic: Features deep, multi-layered glassmorphism powered by GPU-accelerated backdrop filters for a premium "wet"…
Description
The Liquid Kinetic Nav: Key Features Apple-Inspired Liquid Aesthetic : Features deep, multi-layered glassmorphism powered by GPU-accelerated backdrop filters for a premium "wet" look. Advanced Kinetic Magnetics : Nav items exert a subtle magnetic pull on the cursor using custom spring physics, creating a tactile and responsive interface. Haptic Interaction Feedback : Provides physical confirmation on click with a haptic scale-down effect (0.98x), making digital interactions feel grounded. Thumb-Zone Optimized Mobile Layout : Overhauls traditional mobile menus with a floating expansion system designed for one-handed ergonomics. WCAG 2.1 AA Accessibility : Includes built-in contrast logic that automatically adjusts text and icon colors to ensure legibility in any theme. Performance-Aware Rendering : Features a "Low-Power Mode" toggle that scales backdrop blur on mobile devices to save battery while maintaining high frame rates. Full Component Control : Complete customization via the Framer sidebar, including magnetic strength, spring stiffness, haptic intensity, and corner radius. Dynamic Lucide Icon Integration : Supports the entire Lucide icon library—simply type the icon name to update your navigation visuals. Native Framer Linking : Each item supports native link properties for seamless connection to internal project pages or external URLs. Constraint-Ready Design : Built-in logic handles long text labels gracefully with automatic ellipsis to prevent layout breaks.
Introduction
Apple-inspired liquid glass navigation
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #2010