Crayon Style Night Piano Performance Animation

You are an expert creative coder specializing in generative art, Web Audio synthesis, and animation choreography.

# Task
Generate a single, self-contained `index.html` file that renders a **~2-minute animated piano performance** in a hand-drawn crayon aesthetic. Every visual and audio element must be procedurally created in code—no libraries, no external assets.

---

## Visual Requirements

### Style & Rendering
- **Canvas 2D only.** All drawing uses the native 2D context; no WebGL, no SVG, no libraries.
- **Crayon texture everywhere:** grainy, uneven strokes; wobbly, imperfect outlines; visible paper tooth and color variation that mimics wax on textured paper.
- Implement texture by layering semi-transparent strokes, adding noise/jitter to paths, and varying opacity to simulate crayon pressure.

### Scene Composition
{{scene-description}}

**Default if not specified:** A cozy room at night. Warm lamp glow from off-screen. An upright piano (wooden, show front panel and keyboard). A small black cat sitting on the bench, paws reaching the keys. Simple furnishings—a rug, a potted plant, a window showing stars or a crescent moon. All objects rendered with thick, childlike crayon outlines and filled with directional hatching or scribble fills.

### Animation & Sync
- The cat's **paws must strike the keys in perfect sync** with the notes actually playing. Show key depression, paw movement, and subtle body sway.
- Animate secondary elements to the music's intensity: lamp flicker, subtle camera drift, ambient particle effects (dust motes, soft light rays), or color temperature shifts as the piece builds and resolves.
- The performance must feel **choreographed**: tight sync between audio and visuals at every moment.

---

## Audio Requirements

### Composition
{{music-direction}}

**Default if not specified:** An original ~40-bar piano piece. Clear, singable melody. Calm, contemplative opening (8–12 bars); gradual build in rhythm and harmonic complexity (16–20 bars); gentle, resolving ending (8–12 bars). Think Erik Satie meets a lullaby. Aim for ~2 minutes total at a moderate tempo (~80–100 BPM).

### Synthesis (Web Audio API)
- **No audio files.** Synthesize every note using `OscillatorNode`, `GainNode`, and `BiquadFilterNode`.
- **Realistic piano timbre:**
  - Layer 3–5 harmonic overtones per note (inharmonicity increases with pitch).
  - Add subtle noise burst at note onset to simulate hammer strike.
  - Apply envelope: fast attack (<10 ms), exponential decay, moderate sustain, gentle release.
  - Use a convolution reverb (generate an impulse response in code for a small room) or a feedback delay to add space.
- Implement **dynamic velocity:** louder notes have brighter timbre (more high-frequency content) and longer decay.

---

## Timeline & Interactivity

- **Single unified timeline** drives both animation frames and note events. Time zero is the start of the piece.
- **Pause/Play button:** clicking the canvas or a UI button pauses and resumes both audio and animation from the exact same point.
- **Replay button:** restarts the performance from the beginning.
- **URL time-jump:** support `?t=90` (or any integer seconds) to seek directly to that moment in the performance. Audio and visuals must sync from that point forward.
- Display a subtle progress bar or timestamp so users know where they are in the piece.

---

## Technical Constraints

- **Fully self-contained `index.html`:** all HTML, CSS, and JavaScript in one file.
- **No external dependencies:** no libraries (Tone.js, p5.js, etc.), no image files, no font files, no audio files.
- Modern browser JavaScript (ES6+); assume a recent Chrome/Firefox/Safari.
- Optimize for smooth 60fps animation and glitch-free audio scheduling. Use `requestAnimationFrame` for visuals and schedule notes ahead of time with `AudioContext.currentTime`.

---

## Code Quality

- **Well-structured and readable:** clear separation between scene setup, animation loop, audio synthesis, and timeline/sync logic.
- **Commented:** explain the crayon rendering technique, the synthesis model, and how the timeline binds audio to visuals.
- **Robust time-seeking:** calculate which notes should be playing at any `t`, and render the correct frame of animation without drift.

---

# Deliverable
A single, ready-to-run HTML file. When opened in a browser, it immediately begins the performance. The user experiences a charming, hand-drawn animated concert where every visual detail and every piano note is generated by code.