The Boy Who Lived — A Procedural Three.js Film

An original, real-time browser film inspired by the supplied story treatment of the opening of Harry Potter and the Philosopher's Stone. Every character, building, prop, effect, camera move, and animation is assembled procedurally in Three.js—there are no downloaded 3D models or texture packs.

Watch the production build

Film profile

• 7 minutes 6 seconds, staged as 58 authored shots across ten chapters
• Nine articulated procedural character rigs with shot-specific acting poses
• A complete miniature Privet Drive, interior sets, memory vignettes, aerial motorcycle sequence, weather, particles, and practical light cues
• Cinematic color grading, bloom, depth of field, adaptive SSAO, film grain, chapter cards, captions, and responsive transport controls
• ElevenLabs narration, a subtle authored orchestral music bed, and a deterministic procedural score, ambience, and synchronized Foley
• Adaptive render resolution and shadow budgets tuned for sustained real-time playback on desktop and mobile

Architecture

The film is data-directed: a declarative timeline defines camera paths, transitions, captions, lighting states, and actions, while a reusable director evaluates every shot deterministically at any timestamp. This makes the entire movie seekable, testable, and reproducible without baked video or animation files.

Local development

npm install
npm run dev

Production build:

npm run build
npm run preview

Controls

• Space — play / pause
• Left / Right — seek five seconds
• [ / ] — previous / next shot
• C — captions
• M — sound
• F — fullscreen
• Home — restart

Audio

The film ships with a 426-second mastered ElevenLabs narration, a 426-second background music edit, procedural Web Audio score, ambience, and synchronized effects. The narration is divided into 48 emotionally directed cues spanning every shot; its generated timing manifest ducks the music only beneath spoken words.

To regenerate the narration, copy .env.example to .env.local, add a restricted ELEVENLABS_API_KEY and ELEVENLABS_VOICE_ID, then run:

npm run narration:generate

Paid cue generations are cached under the ignored output/narration directory. The script performs strict timing checks and writes the public MP3 and cue manifest only after every line fits its authored shot.

The background bed is mastered from the user-supplied recording with a musically matched crossfade, preserved final coda, and broadcast-safe headroom. To reproduce that edit from a locally held source:

npm run music:master -- "/absolute/path/to/source.mp3"

Disclaimer

This is a non-commercial, unofficial fan-made technical demonstration. It is not affiliated with or endorsed by J. K. Rowling, Bloomsbury, Scholastic, Warner Bros., or any other rights holder. The software and original procedural visuals in this repository are released under the included MIT license. “Hedwig's Theme,” composed by John Williams, and the supplied soundtrack recording are excluded from that license and remain the property of their respective rights holders; public use requires the appropriate music rights.