Toggle To Graph Motion Template

# Task
Generate a single-file HTML motion design film (1920×1080, 60fps, ~15s) that follows a vivid orange dot through six connected scenes. Every visual is computed from `time` inside a `seek(t)` function—no CSS transitions, timers, or frame-to-frame state. Sync major shape changes to the beat grid of the supplied audio track.

# Audio & Timing
Track: {{audio-track}}  
(Paste a YouTube link, Spotify URI, or describe the BPM and where the strongest beats land. The film will align the cursor click, dot landing, graph peak, shape morphs, and final title reveal to these beats.)

# Scenes & Motion Language
All motion lives on a warm off-white canvas (#F5F2ED) or near-black background (#1A1A1A). The orange dot ({{accent-color}}) is the protagonist; it never teleports—every entrance grows from an element already on screen.

## 1. Toggle (beat 0)
A rounded toggle UI sits beside the label "{{toggle-label}}". A cursor moves in, clicks the orange toggle knob. The label's letters individually bend, spring into new positions, and some fade out until only the hero word "{{hero-word}}" remains. The orange dot repositions above the "i" (or first suitable glyph).

## 2. Spring Graph (beat 2)
The dot leaps from the letter, arcs through the air, and lands on a graph baseline. Its trajectory draws a spring-response curve: overshoot, settle. A callout reads "{{graph-metric}}" at the peak. Use the same closed-form spring function `x(t) = 1 - e^(-ζωt)·cos(ω√(1-ζ²)·t)` to both move the dot and render the curve.

## 3. Shape Morph (beat 4–6)
The dot shoots horizontally across a dividing line, expands into a large orange circle filling the frame. A black rounded square rotates inside it, then stretches into a horizontal pill. The scene contracts back to a single orange dot on black.

## 4. Orbital Type (beat 7–8)
Words like **SPRINGS**, **EASING**, **KINETIC TYPE**, **3D**, **SOUND** orbit the dot in a circular path. Their letters then scatter outward, dissolving into a grid of tiny dots (halftone field).

## 5. End Card (beat 9)
The halftone expands past the frame edges and inverts to black. It reveals:  
**{{end-card-text}}**  
(Supply the title, tagline, and closing line exactly as you want them stacked.)

## 6. Return (beat 10+)
The orange dot retraces its path: through the halftone, back over the graph, into the toggle. The final frame matches frame one so the video loops cleanly.

# Technical Constraints
- **One HTML file.** Canvas 2D or SVG; ship inline `<audio>` if the track is embeddable, otherwise sync to a hardcoded BPM grid.
- **Pure function rendering:** `function seek(t) { /* compute every shape's position, rotation, scale at time t */ }`
- **Closed-form springs** for toggle, bouncing dot, graph. No iterative physics.
- **No banned effects:** stock footage, gradients, glows, particle bursts, unanchored transitions.
- **Typography:** bold sans-serif (Inter, Departure Mono, or system fallback). Keep contrast high.
- **Timing:** small spring overshoots (ζ ≈ 0.6–0.7), no dead air between scenes.

# Deliverable
A single `motion.html` file that runs in any modern browser, plays the audio, and renders the film in real-time by scrubbing `currentTime`.