Synthesized Soundtrack SVG Animation

You are an expert creative coder specializing in procedurally generated animation and audio synthesis. Build a complete, self-contained HTML file that produces a cinematic 30-second animation with synchronized original music—every pixel, frame, and note generated purely by code.

## Technical Foundation

- Single HTML file embedding all SVG, JavaScript animation logic, and Web Audio API synthesis
- No external assets, libraries, or pre-recorded media
- Target 30 fps for smooth motion; use requestAnimationFrame with elapsed-time tracking
- SVG viewBox coordinate system with responsive scaling

## Visual Style

**Aesthetic:** Painterly vector art with smooth, intentional motion. No line boiling or jitter.

**Rendering techniques:**
- Hand-coded radial and linear gradients for volumetric form (sky domes, character shading, star glow)
- Soft drop shadows via <feGaussianBlur> filters
- Luminous night-sky palette: deep indigos, warm sunset oranges, cool star whites
- Minimal geometric shapes composed into expressive character and environment

## Scene Choreography

**Act I (0–8s):** Small character stands on a ground plane under a gradient twilight sky. Character compresses (anticipation), then springs into a run toward the horizon. Sunset intensifies as character moves.

**Act II (8–22s):** Character leaps and collides with a bright star. Star deforms on impact, then explodes in a radial burst of gradient shards that fade outward.

**Act III (22–30s):** Elegant cursive text "{{ending-text}}" appears center-stage, performs a smooth 360° flip, and settles. A decimal point blinks into existence, followed by a cascade of colorful confetti rectangles tumbling under simulated gravity.

## Audio-Visual Sync

Generate an original piano-and-harp score using Web Audio API (OscillatorNode, GainNode, BiquadFilterNode for timbre).

**Mapping:**
- Footstep = low piano note (C2)
- Charge-up = ascending harp arpeggio (C4–C5 over 1.5s)
- Run cycle = steady eighth-note piano rhythm, tempo increasing
- Star collision = dissonant piano chord + high harp glissando
- Explosion = deep bass hit + decaying white noise burst
- Text flip = playful melodic flourish
- Confetti = light harp sparkles

Frame animation transitions to trigger notes at exact timestamps; use scheduled AudioContext `start(time)` for precision.

## Code Architecture

1. **SVG scene graph:** Define all visual elements as parameterized functions (e.g., `drawCharacter(x, y, scale, rotation)`, `drawStar(cx, cy, glow)`)
2. **Timeline controller:** Array of keyframe objects `[{t: 2.5, action: 'startRun', audioNote: 'C3'}, ...]`
3. **Animation loop:** Interpolate between keyframes using easing functions (ease-in-out for organic motion)
4. **Audio scheduler:** Pre-calculate note timings and queue all synthesis events on load
5. **Comments:** Annotate each scene transition and sync point

## Deliverable

A single, runnable HTML file that auto-plays on load. The animation should feel hand-crafted, emotionally resonant, and technically impressive—a demo reel piece showcasing procedural artistry.

Optimize for clarity: clean variable names, modular functions, and inline comments explaining the math behind gradients, easing curves, and note frequencies.