Battle-Tested Techniques for Animation and Data Viz with React
summary
Combines z3 as a math toolbox with React for rendering, showing concrete code: use springs hook to animate radius and running dots, scale square root so circle area matches value, and clamping increments to avoid rendering thousands of particles. Demonstrates a failing build (600 DOM circles causing major slowdown) and the fix (clear onRest), moves layout measurement to page level to avoid repeated getBoundingClientRect calls, and respects reduced motion with a use reduced motion toggle so animations can be disabled.
AI-written summary · about
chapters (7)
- 0:00Intro
- 0:47Motion
- 4:19Data Restrictions
- 7:20SVG Refresher
- 22:46HTML
- 25:56Performance
- 30:40Accessibility
