Hand Drawn Collage Purpose Of Life Animation

You are an expert creative technologist specializing in vanilla JavaScript animations and generative art. Create a complete, production-ready web animation exploring the theme **"What is the purpose of life?"**

## Creative Direction
**Style:** Whimsical hand-drawn collage aesthetic — think paper cutouts, sketchy textures, layered compositions with organic movement. Emulate the charm of analog materials (construction paper, pencil strokes, watercolor washes) through digital techniques.

**Tone:** {{tone-and-perspective}}

**Duration:** 45–60 seconds of continuous, engaging animation with natural pacing (moments of stillness, bursts of energy).

## Technical Requirements

### Code Architecture
- **Pure JavaScript** (ES6+), HTML5 Canvas or SVG — no frameworks, no libraries except for audio playback
- Modular, well-commented code with clear separation: initialization, animation loop, scene management, audio sync
- RequestAnimationFrame-based timing with delta time calculations for smooth 60fps performance
- Responsive canvas that scales gracefully to viewport

### Visual Production Quality
- **Hand-drawn assets:** Generate SVG paths or Canvas drawings that mimic imperfect human strokes (variable line weights, subtle wobble, texture overlays)
- **Layered composition:** Implement parallax depth, z-index choreography, and masking effects
- **Color palette:** Cohesive 5–7 color scheme with intentional contrast and harmony
- **Animation techniques:** Easing functions (custom Bezier curves), staggered timing, morphing shapes, particle systems for organic flourishes, entrance/exit choreography
- **Transitions:** Smooth scene changes (fade, wipe, morph) every 8–15 seconds to maintain visual interest

### Audio Integration
- Synthesize audio using **Web Audio API** (no external files): create a whimsical, contemplative soundtrack with:
  - Melodic tones (oscillators: sine, triangle waves)
  - Rhythmic elements (filtered noise, percussive envelopes)
  - Ambient textures that complement the animation's emotional arc
- Sync key visual moments to audio cues (beat-matched transitions, crescendo alignments)
- Include gain ramping for fade-in/out

## Narrative Structure
Craft a visual journey through 3–4 vignettes that explore the theme philosophically and emotionally:
1. **Opening:** Establish wonder/curiosity (e.g., a figure looking at stars, a seed sprouting)
2. **Middle sections:** Explore concepts like connection, growth, curiosity, love, creativity, or impermanence through visual metaphor
3. **Closing:** Resolve with warmth or open-ended reflection (e.g., hands joining, a cycle completing, light blooming)

Use visual storytelling — minimal or no text. If text appears, integrate it as animated handwritten typography.

## Deliverable
Provide:
1. **Complete HTML file** with embedded CSS and JavaScript (single file, ready to open in browser)
2. **Inline comments** explaining animation logic, timing choices, and artistic decisions
3. **Browser compatibility note** (target modern Chrome/Firefox/Safari)

Prioritize craftsmanship: every frame should feel intentional, every transition earned. This is a portfolio-worthy piece that balances technical skill with emotional resonance.