Spring Physics
Drag the ball and watch spring dynamics in real time. Adjust stiffness, damping, and mass.
Layout Shuffle
Shared layout animations with automatic interpolation between positions.
Gesture Cards
Swipe cards to dismiss them. Velocity and offset determine the threshold.
Stagger Reveal
Orchestrated entrance animations with configurable variants and timing.
Morphing Shapes
SVG path morphing with spring-based transitions between geometric forms.
Path Drawing
SVG stroke animation using pathLength for a draw-on reveal effect.
Magnetic Hover
Buttons that follow your cursor within a magnetic radius using spring physics.
Move your cursor near the buttons
Drag to Reorder
Sortable list with automatic layout animation on reorder.
Drag items to rearrange
- Drag to reorder⠿
- Spring physics⠿
- Smooth transitions⠿
- Layout animation⠿
- Gesture-driven⠿
3D Flip Cards
Perspective-based card flip with spring transitions on click.
Click to flip
Elastic Counter
Numbers that spring between values with physics-based interpolation.
Animated Tabs
Sliding tab indicator using shared layoutId for seamless transitions.
Spring animations use physics-based motion with stiffness, damping, and mass parameters for natural movement.
Countdown Ring
Circular progress ring with spring-animated countdown timer.
Particle Burst
Click anywhere to spawn an explosion of physics-driven particles.
Click anywhere for particles
Accordion
Collapsible sections with spring-animated height transitions.
Spring physics use stiffness, damping, and mass to create natural motion. Higher stiffness means snappier movement, while lower damping allows more oscillation.
Text Scramble
Characters scramble through random glyphs before resolving into the target word.
Cursor Trail
Rainbow trail of circles following the cursor with staggered spring delay.
Move your cursor
Progress Steps
Multi-step progress bar with spring-animated transitions between stages.
Floating Dock
macOS-style dock with proximity-based scale using spring physics.
Hover along the dock
Typewriter
Text appears character by character with variable speed and a blinking cursor.
Notification Stack
Toast notifications that stack, animate in, and auto-dismiss with layout transitions.
No notifications
Spotlight Card
A radial gradient that follows your cursor across the card surface.
Hover to reveal the spotlight
Spring animations
Physics-based motion with configurable stiffness, damping, and mass.
Layout transitions
Automatic interpolation between any two CSS layouts.
Gesture system
Drag, tap, hover, and pan with velocity tracking.
Infinite Marquee
Seamlessly looping ticker with configurable speed and direction.
Gravity Balls
Balls that drop and bounce with squash and stretch on impact.
Click drop to release balls
Animated Border
Rotating conic gradient border with colour and speed controls.
Scroll Parallax
Multi-layer parallax driven by scroll position using useScroll and useTransform.
Scroll down
Each layer moves at a different speed