The animation playground.
Ten scroll and interaction techniques, rebuilt from scratch — no animation library, just IntersectionObserver, requestAnimationFrame and CSS. Every one respects reduced-motion.
Follows your scroll through this whole page — 0% right now.
Scrubbed text reveal
Words ink in as the section crosses the viewport — tied to scroll, not time.
Widgets that scroll, spin and respond — built once, embedded anywhere, animated with intent.
Staggered card reveal
IntersectionObserver + per-card delays.
IntersectionObserver fires once, cards cascade in.
Each card delays 90ms after the previous one.
translateY + opacity. Never layout. Never jank.
Reduced-motion users see everything instantly.
Parallax layers
Three shapes, three scroll speeds — depth without cost.
Clip-path reveal
A wipe driven by clip-path, GPU-friendly.
Count-up stats
Numbers ease to their targets when they enter view.
widgets
demo pages
dollars
Stacking deck
Cards compress into a stack as you scroll past.
Scroll — the deck compresses and stacks.
Scroll — the deck compresses and stacks.
Scroll — the deck compresses and stacks.
Scroll — the deck compresses and stacks.
Horizontal drift
Vertical scroll translated into horizontal motion.
3D tilt
Perspective tilt that follows the pointer.
Spring accordion
grid-template-rows animation — the modern expand/collapse.
Yes — IntersectionObserver, requestAnimationFrame and CSS transitions. No GSAP, no Framer Motion.
The techniques yes; the demo code is page-level. Port any of them into a widget.
Every animation checks prefers-reduced-motion and settles instantly.
Scroll progress
A ring that tracks the whole page.
Follows your scroll through this whole page — 0% right now.
Want motion like this on your site?
Every widget in the catalog ships with purposeful animation baked in — and the customizer never breaks it.