Animated Dock
An interactive, Apple-style dock with smooth motion physics and dynamic icon scaling. Responsive, intuitive, and built for precision.
Cursor-aware magnification
Each icon scales relative to your cursor position for a natural dock effect.
Spring-based motion
Smooth scaling powered by motion physics for premium UI feel.
Dynamic labels
Optional hover labels that gracefully appear above each icon.
Compositional structure
Dock, DockItem, DockIcon, and DockLabel can be used flexibly.
Auto-spacing & alignment
Built-in geometry for consistent spacing and fluid motion alignment.
$npx libravelui@latest add animated-dockimport {Dock,DockItem,DockIcon,DockLabel,} from "@/components/ui/motion/animated-dock";<Dock><DockItem> <DockLabel>Item 1</DockLabel> <DockIcon>1</DockIcon></DockItem></Dock>Loading types…
Animated Circle Indicator
A customizable animated circle to indicate statuses, notifications, or activity with smooth motion animations.
Animated Switch
A precise switch, engineered with motion physics. Beauty in every pixel. Seamless by default. Use the live controls below to explore controlled/uncontrolled modes, stress tests, and why extra className that alters sizing will break the switch's internal geometry.