Motion System
Animation Library
Speeds, easings, hover effects, scroll reveals, loaders, data animations and more — all interactive.
40+ Demos
8 Categories
All Interactive
CSS + React
Speed Options
5Five duration presets from snappy micro-interactions to deliberate transitions.
Duration Scale — Click to preview
Extra Fast100ms
ease-outFast200ms
ease-outNormal300ms
ease-in-outSlow400ms
ease-in-outExtra Slow500ms
spring bounceClick any row to trigger the animation at that speed.
Easing Functions
4Four core easing curves that cover the full range of motion feel.
Easing Curves — Click to animate
Ease Out
Fast start, gentle stop. Best for elements entering the screen.
cubic-bezier(0,0,0.2,1)Ease In-Out
Smooth acceleration and deceleration. Great for repositioning.
cubic-bezier(0.4,0,0.2,1)Ease In
Slow start, fast finish. Use for elements leaving the screen.
cubic-bezier(0.4,0,1,1)Linear
Constant speed. Ideal for loops, spinners, and progress bars.
linearHover Effects
6Six interactive hover patterns — scale, lift, zoom, underline, rotate, fade.
Scale + Glow
transform: scale(1.06)Card Lift + Shadow
Hover this card
translateY(-6px) + deeper shadow
transform: translateY(-6px)Image Zoom
transform: scale(1.1)Link Underline Reveal
DocumentationChangelogComponents
width: 0 → 100% underlineIcon Rotate
transform: rotate(20deg)Opacity Fade
40%
60%
80%
100%
opacity: 0.4 → 1Scroll Reveal
4Elements that animate into view as they enter the viewport.
Intersection-triggered Reveal
Fade In from Bottom
translateY(32px)Fade In from Left
translateX(-32px)Fade In from Right
translateX(32px)Scale Up
scale(0.85)Loading States
5Five loading patterns: spinner, skeleton, progress, shimmer, and dot pulse.
Circular Spinner
Skeleton Loader
Progress Bar
Uploading...0%
Processing78%
Shimmer Text
Loading content...
Please wait a moment
Fetching your data
Dot Pulse Loader
Data Animations
4Animated counters, bars, donuts, and sparklines for dashboards.
Count-Up Number
$0
Total Revenue
Chart Bar Draw-in
Jan
Feb
Mar
Apr
May
Jun
Donut Chart Fill
Completion
Target: 75%
Sparkline Draw
Component Animations
5Five interactive component patterns with realistic motion.
Accordion Open / Close
Modal Fade-in
Drawer Slide-in
Toast Slide + Dismiss
Dropdown Expand
Special Effects
4Four continuously running ambient effects for premium UI feel.
CTA Pulse Glow
box-shadow pulse, 2s loopLogo Marquee Scroll
translateX loop, 12sKen Burns Zoom
scale + translate, 8sGradient Shift
Animated Gradient
background-position, 4s