Skip to content

component

Liquid Kinetic Nav

By Abishek M

Details

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.

11001200121318/148/228/309/79/15
  • All · #2010