Motion on the
Modern Open Web
A twelve-chapter, hands-on curriculum that moves from the rendering pipeline to spring physics, native browser APIs, shaders, and programmatic video — every chapter a live demo you can take apart.
The curriculum
Each chapter builds strictly on the last: concept → theory → live demo → editable playground.
The Rendering Pipeline & Frame Budget
Why transform/opacity stay smooth and width/left stutter.
Easing, Timing & Spacing
Curves that map progress to motion.
The 12 Principles, Adapted
Disney's principles, mapped to UI motion.
Native CSS Animations & the WAAPI
Declarative @keyframes vs imperative element.animate().
Spring Physics
The damped harmonic oscillator behind modern motion.
JS Libraries & Orchestration
The same scene in GSAP vs Motion vs Anime.js.
FLIP, Layout & View Transitions
Choreographing elements as the DOM changes.
Scroll-Driven Motion
Animations linked to scroll position, on the compositor.
SVG & Path Motion
Line drawing, morphing, and motion along a path.
Design-Tool Formats: Lottie & Rive
Baked playback vs state machines vs data binding.
2D Canvas, Creative Coding & Particles
Immediate-mode rendering, particle systems, physics.
Shaders, WebGPU & 3D
The GPU pipeline: vertex, fragment, compute.
Programmatic Video (Capstone)
Animation as code, rendered to frames.