Animations
Motion design components that bring your interface to life with smooth, performance-optimized transitions.
01
Reveal Presets — AnimationRevealItem
fadeUpSlides from below (default)
fadeDownSlides from above
fadeLeftEnters from the left
fadeRightEnters from the right
fadeInPure opacity fade
scaleInScales up from 95%
heroLarge distance, slower reveal
popQuick scale from 90%
02
Stagger Container Presets — AnimationReveal
fadeIn
0.05s interval
Item One
Item Two
Item Three
Item Four
fadeUp
0.1s interval
Item One
Item Two
Item Three
Item Four
fadeLeft
0.15s interval
Item One
Item Two
Item Three
Item Four
03
Custom Parameters
direction="up" distance=40 blur=12Blur Fade In
Large upward slide combined with a gaussian blur for a dreamy entrance.
direction="left" distance=60 scale=0.9Scale + Slide
Slides in from the left while scaling up. Great for side panels or feature reveals.
preset="fadeIn" duration=1.5Slow Fade
Pure opacity transition over 1.5s. Elegant for hero text or ambient reveals.
direction="down" blur=8 delay=0.3Delayed Drop
Drops from above with blur and a delay. Works well for subtitles under headings.
04
Interactive Tilt — Tilt
max=5SubtleGood for content cards
max=15DefaultBalanced interaction
max=25IntensePlayful/hero elements
05
Text Reveal — TextReveal
type="chars" stagger=0.04DESIGNING EXCELLENCEtype="words" stagger=0.08 delay=0.2Building the future of digital experiences with precision and speed.type="chars" duration=1.2 stagger=0.02Slow cinematic reveal06
Continuous Effect Presets — effectPresets
pulseLive status, recordingpulseSlowLoading...
Skeleton, processing statesbounceScroll arrows, CTA nudgesrotateFullSpinner, background decorhoverScaleIcons, logos (1.05×)hoverScaleLargeFeatured items (1.1×)skewHover me
Playful tag/label hoverrotateIcon hover rotation