Blog
Animation, in practice.
How the components are built - Framer Motion, SVG filters, accessible motion, and the hero patterns that actually convert.
- AccessibilityAnimationReact
prefers-reduced-motion: the right way to ship animations
Animation that ignores prefers-reduced-motion is an accessibility bug. Here is how to honour it properly in React without shipping two of everything.
21 May 2026 · 6 min read
- shadcn/uiHeroPatterns
8 animated hero section patterns for shadcn/ui
A tour of hero-section animation patterns - text masks, marquees, magnetic CTAs, spotlights, 3D tilt - and when each one earns its keep.
21 May 2026 · 9 min read
- SVGReactBackground
How to build a metaballs (lava-lamp) background in React
An SVG gooey filter plus a few animated circles gives you a fluid, fusing blob background - no WebGL, no canvas, no dependency.
21 May 2026 · 7 min read
- Framer MotionCSSAnimation
A Framer Motion marquee that never stalls (use CSS keyframes)
Why JS-driven marquees stutter on real pages, and how a pure CSS keyframe loop fixes it for good. With a copy-paste component.
21 May 2026 · 6 min read