Blog
Guides and articles
How to ship motion that works. From Figma handoffs to spring physics to
accessible animation, every article uses
Animated HTML Charts: Bar, Line, Pie and Sparkline With Springs
motion-chart, motion-pie and motion-sparkline draw charts from an HTML attribute or a table. Bars grow, lines draw in, pies sweep in, and every change in the data springs into place.
Read article →State Icons: Menu to Close, Play to Pause, on a Spring
motion-icon-state morphs an icon between two states with spring physics. Eight icons, two ways to switch them, and complete recipes for menu, copy, save, password and accordion buttons.
Read article →motion-components 1.1: Animate Any SVG Icon With One HTML Tag
motion-icon draws in, pops, bounces, rotates, wiggles or pulses any SVG icon from Lucide, Tabler, Heroicons, Material Symbols, Font Awesome and more. motion-icon-state morphs between two states on a spring.
Read article →motion-components 0.7: A Theme Toggle With a Circular Wipe
Version 0.7 adds motion-theme-toggle, a light, dark and system theme control with a spring icon morph and an optional circular page wipe. It also upgrades Motion to version 13.
Read article →Fixing the Flash: Why Animated Components Need preload.css
Custom elements upgrade after your JavaScript loads, and entrance animations flash their finished state in the gap. How :defined and one small stylesheet fix it.
Read article →Recipe: An Animated Hero Section in 20 Lines of HTML
A landing-page hero with a word-by-word headline reveal, fading subcopy, and staggered call-to-action buttons. No JavaScript beyond one import.
Read article →Why Springs Beat Easing Curves (and What Bounce Actually Means)
Cubic-beziers are drawings; springs are simulations. What that difference means for interruptible UI motion, and how to read the duration and bounce parameters.
Read article →