Explorable Explanations with React
summary
Builds an interactive waveform explorable using SVG path via straight lines, a timekeeper that redraws frames, and a path-calculator that mixes two point-sets with a spring-driven ratio so shapes interpolate smoothly. Uses react spring for animation, keeps waveform logic isolated, and ties playback speed to frequency. Project launches with 30,000 hits first day and dozens of appreciative emails and classroom adoption, so the demo is practical and demonstrably effective.
AI-written summary · about
chapters (7)
- 0:00Intro
- 0:20How Sound Works
- 4:43Explorable Explanations
- 6:37Waveform Component
- 10:05React Waveform
- 11:26React Spring
- 16:42Changing Shapes
related talks
23mOff Balance: Interactive Storytelling with React
27mExploring audio with React and SVGs: Create amazing audio projects
36mCreative Coding with React & SVG
31mAnimating the Virtual DOM
43mAnimating in React
25mAn SVG’s Tale
33mBattle-Tested Techniques for Animation and Data Viz with React
21mSVG illustrations as React Components