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