| # | Beat | Timecode | Motion | Logo | Audio | VO / on-screen |
|---|---|---|---|---|---|---|
| 1 | open | 0–7s | spatial-parallax | icon·liquid-chrome | ♪ — | Static logos sit still. Motion is how a brand actually breathes and moves through the world. on-screen: Motion is how a brand breathes |
| 2 | legacy | 7.0–14.0s | crossfade-8f | icon·wireframe | ♪ — | The old way meant hand-keyframing every frame in heavy software, days of work for ten seconds. on-screen: Old way: hand-keyframe every frame |
| 3 | teach | 14.0–21.0s | kinetic-build | icon·wireframe | ♪ — | Step one, we storyboard the beats, because motion without a plan is just things wiggling. on-screen: Step 1: storyboard the beats first |
| 4 | teach | 21.0–28.0s | kinetic-build | icon·wireframe | ♪ — | Step two, we build the geometry in code with three.js, so every element is real, lit, and adjustable. on-screen: Step 2: build the shapes in code |
| 5 | teach | 28.0–35.0s | kinetic-build | icon·wireframe | ♪ — | Step three, we animate it in Remotion, where the timeline is code and a tweak takes seconds, not hours. on-screen: Step 3: drive timing with Remotion |
| 6 | teach | 35.0–42.0s | kinetic-build | icon·wireframe | ♪ — | Step four, an image model generates the surface textures, the chrome and the glow, in the brand palette. on-screen: Step 4: generate textures with a model |
| 7 | teach | 42.0–48.8s | kinetic-build | icon·wireframe | ♪ — | Step five, we score it so the audio lands exactly on the motion, because sound is half the feeling. on-screen: Step 5 |
| 8 | teach | 48.8–54.8s | kinetic-build | icon·wireframe | ♪ — | Step six, one render command outputs vertical, square, and wide together, no re-cropping by hand. on-screen: Step 6: render every aspect at once |
| 9 | teach | 54.8–60.8s | kinetic-build | icon·wireframe | ♪ — | Step seven, captions burn in on the same timeline, so the piece reads with the sound off. on-screen: Step 7: burn captions on the timeline |
| 10 | teach | 60.8–66.8s | kinetic-build | icon·wireframe | ♪ — | Step eight, because it's all code, every version is saved and a client edit never means starting over. on-screen: Step 8: version it like software |
| 11 | teach | 66.8–72.8s | kinetic-build | icon·wireframe | ♪ — | Step nine, change one rule and the whole library re-renders itself overnight, consistent across every asset. on-screen: Step 9 |
| 12 | proof | 72.8–78.8s | receipts-count | icon·wireframe | ♪ — | We show the render itself and the time it took, no hand-waving about the craft. on-screen: Receipts: ten seconds, rendered openly |
| 13 | futurist | 78.8–85.6s | spatial-parallax | icon·wireframe | ♪ — | Soon you describe the motion in a sentence and the system drafts the first render for you to refine. on-screen: Next: type a brief, get the animation |
| 14 | resolve | 85.6–91.6s | coalescence | stacked·liquid-chrome | ♪ swell | Pick one logo, build it in three.js, and animate it in Remotion this week. Start with one shape. on-screen: Animate one shape in Remotion |