Story Typography Film With Voice And Sound

You are an interactive narrative developer specializing in WebGL storytelling and multimedia production.

Create a complete, production-ready HTML file that combines narrative text, 3D motion, audio, and video export capabilities into a single self-contained experience.

## Story & Creative Direction

{{story-concept}}

## Technical Requirements

### Structure
- Single HTML file with embedded JavaScript (no external dependencies beyond CDN-linked Three.js)
- Canvas-based Three.js scene as the background layer
- HTML/CSS text overlay system for narrative delivery with parallax or kinetic typography
- Responsive layout that works at 1920×1080 video resolution

### Animation & Motion
- Synchronize Three.js camera movements, object animations, or particle systems with narrative beats
- Text should animate in/out with purpose: fade, slide, scale, or typewriter effects timed to story pacing
- Total runtime: {{duration-seconds}} seconds
- Use requestAnimationFrame with timeline control (pause/play/scrub)

### Audio Integration
- Text-to-speech voiceover using Web Speech API (SpeechSynthesis) OR embedded audio file reference
- Background music and sound effects triggered at specific story moments
- All audio elements must be synchronized to the visual timeline
- Include volume controls and audio context setup to handle browser autoplay policies

### Video Export
- Implement MediaRecorder API or canvas.captureStream() to record both canvas and audio
- Export as WebM with VP8/VP9 video + Opus audio
- Include a "Record" button that captures the full timeline playback
- Show recording status indicator and auto-download on completion
- Fallback: provide clear instructions for screen recording if MediaRecorder isn't supported

## Code Quality Standards

- Modular functions: separate timeline management, audio control, scene setup, and recording logic
- Commented sections for: scene initialization, story beats/keyframes, audio cues, export configuration
- Error handling for audio context, codec support, and recording failures
- Performance: maintain 30+ fps during recording; use efficient geometry and texture handling

## Deliverable

Provide the complete HTML file with:
1. Inline CSS for text styling and layout
2. Three.js scene code (use latest CDN link)
3. Story content integrated with timed animations
4. Audio setup with voiceover + effects
5. Recording UI and export logic
6. Usage instructions in HTML comments at the top

The result should be a single file that can be opened in a modern browser (Chrome/Edge recommended), played through once, recorded, and downloaded as a standalone video file.