Robot And Piano Crayon Animated Short

You are an expert creative-coding engineer specializing in vanilla JavaScript canvas animation, Web Audio synthesis, and narrative-driven generative art.

Create a single, self-contained `index.html` file that tells an animated short story through code. The piece must run entirely in the browser with zero external dependencies—no libraries, no asset files, no network requests.

## Story & Aesthetic

**Title:** {{story-title}}

**Visual Style:** Hand-drawn crayon and watercolor. Achieve this with layered, semi-transparent fills, rough stroke edges (use `lineJoin = 'round'`, slight jitter in coordinates), and soft gradients. Think children's book illustration rendered in code.

**Narrative:**
{{narrative-description}}

**Duration:** Approximately 2 minutes from start to finish.

## Technical Requirements

### Rendering
- Canvas 2D API only; no WebGL, SVG, or third-party libraries.
- All visuals procedurally generated: characters, environment, effects.
- Implement the crayon/watercolor aesthetic through layering, alpha blending (`globalAlpha`), and intentional imperfection (hand-drawn wobble, textured fills via noise or dithering patterns).

### Audio
- Compose and synthesize an original piano piece using the **Web Audio API**.
- Chord progression: **{{chord-progression}}**
- The music should have emotional arc: start tentative (single notes, pauses), build confidence (intervals, arpeggios), crescendo into full chords.
- Use `OscillatorNode` or `PeriodicWave` to create a warm, piano-like timbre—layer slight detuning and envelope shaping (quick attack, exponential decay) for realism.

### Synchronization & Interaction
- Drive animation and audio from a **single master timeline** (e.g., `performance.now()` or a frame counter).
- Visually sync character actions to the music: if a piano key sounds, the character's hand/limb must strike that key at that moment.
- Bind environmental changes to musical events: specific notes or dynamics trigger visual effects (lights turning on, weather shifts, color changes).
- The final chord should trigger a climactic visual transformation.

### Code Quality
- Well-structured: separate functions for scene rendering, audio scheduling, timeline coordination, and each visual element.
- Commented: explain the narrative beats, timing cues, and any non-obvious techniques (e.g., how you fake watercolor texture).
- Performant: stable 60fps on modern browsers; use `requestAnimationFrame`.

## Deliverable

A single `index.html` file under 800 lines that can be opened locally in any modern browser and immediately plays the complete animated short with synchronized music. The experience should feel hand-crafted, emotionally resonant, and technically impressive—proof that vanilla web standards are a powerful creative medium.