Examples
Short, focused scenes you can open in the playground.
Motion Primitives
Foundations: timing, keyframes, and essential motion building blocks.
Keyframe Ribbon Title
A polished title reveal using keyframes, staggered letters, and layered motion.
Open in Playground →Transit Dots
Linear motion with easing, delay, and clean looping.
Open in Playground →Staggered Letters
Letter-by-letter reveal with color and opacity timing.
Open in Playground →Staggered Words + Lines
Word and line staggering for editorial layout motion.
Open in Playground →Rotate + Scale + Opacity
A composed transform stack used in modern UI motion.
Open in Playground →Timing & Choreography
Sequences, parallels, offsets, and event-based timing.
Sequence Build
Shapes enter one after another with crisp timing.
Open in Playground →Parallel Ensemble
Multiple elements animated together in sync.
Open in Playground →Scheduled Bursts
Timed accents layered on top of a base motion.
Open in Playground →Offset Loops
Looped elements with staggered start offsets.
Open in Playground →Repeat Delay Pulse
A clean pulse using repeat delays for breathing rhythm.
Open in Playground →Paths & Orbits
Motion along curves, orbits, and path-aligned movement.
UI Motion
Interface patterns: loading, toggles, cards, and feedback.
Loading Arc
Clean spinner using a rotating arc.
Open in Playground →Button Press
Press and release feedback with scale and shadow.
Open in Playground →Toggle Switch
A looped toggle motion with a soft bounce.
Open in Playground →Card Enter/Exit
A card slides in, settles, and fades out.
Open in Playground →Distort Panels
Perspective-like panels built with the distort modifier.
Open in Playground →Notification Pop
Compact notification popping with scale and fade.
Open in Playground →Skeleton Shimmer
A loading placeholder with a moving shimmer band.
Open in Playground →