Animated Dock

An interactive, Apple-style dock with smooth motion physics and dynamic icon scaling. Responsive, intuitive, and built for precision.

Magnetic hover interactionSmooth scaling physicsPrecise cursor-based magnification
Basic
Features

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.

Installation
Works with npm, pnpm, yarn, and bun

$npx libravelui@latest add animated-dock

Anatomy
import {Dock,DockItem,DockIcon,DockLabel,} from "@/components/ui/motion/animated-dock";<Dock><DockItem>  <DockLabel>Item 1</DockLabel>  <DockIcon>1</DockIcon></DockItem></Dock>
Props

Loading types…

Edit on GitHub

Typewriting Text

An animated typing effect component for displaying text with a smooth, typewriter-like motion.

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.