Shonen Hero Saga — Origin → Academy → Tournament → War (3D)
Hero ages 6→17 across 5 forms. Village burns. Rival appears. Power awakens. 怒 力 友 覚 勝.
Built with:
HTMLJavaScriptthree.js
Prompt
An autonomous 3D shonen anime hero saga across 5 arcs (Origin → Academy → Tournament → War → Final Battle). Hero ages 6→17 across 5 parametric forms (Child → Academy → Fighter → Awakened → Ultimate), rebuilt parametrically per transition. ~95s per arc + 12s epilogue + reset = ~487s loop (8 min). Sub-scenes: hometown (cherry-blossom petals + Mt. Fuji + houses, hero's house burns at 'village destroy' beat), academy (3 dojos + statue + dust), tournament arena (ring + ropes + 140-figure cheering crowd + confetti), battlefield (red moon, lava, fortress, explosions). 8+ named characters: hero, master, rival, heroine, coach, villain, 3 named comrades — all randomly reseeded each loop from pools. 6 director cams (WIDE / HERO_CU / RIVAL_CU / MASTER_CU / IMPACT / AERIAL) with smooth lerp, plus PIP cam top-right. Broadcast UI: SHONEN NETWORK + 少年伝説 logo + LIVE; arc kanji banner top; episode counter; hero portrait with live-drawn pixel face + power level meter (5 → 9999); CAM label; lower-thirds; ticker; vignette + scanlines. Big-moment FX: kanji banners (怒/力/友/覚/勝/極/裏/死/激/結), white flashes, screen shake, slash lines, flashback sepia tint. Speech bubbles (DOM, projected via vector.project(camera)) for hero / master / villain in distinct styles (shout, master, villain). Two narrator anchors: MASTER NARRATOR HAYATO (gold) + LADY KIRA (white) — TTS via SpeechSynthesisUtterance with voice pitch tuning + voiceschanged guard. Forever loop: full disposal of geometries/materials, reseed all data pools, reset state, rebuild scenes.
Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- A POWER LEVEL meter that ticks 5 → 9999 across the saga is the most insanely effective shonen trope ever — viewers stick around for arc 5 because they want to see the number HIT IT'S ULTIMATE — every fight feels meaningful because the meter validates it.
- Kanji banners (怒 力 友 覚 勝 極 裏 死 激 結) for big moments do all the emotional work that 30 lines of subtitles couldn't — viewers don't need to read Japanese to feel the punch when 力 (POWER) hits the screen.
- DOM speech bubbles projected via vector.project(camera) and re-rendered each frame look exactly like manga panels overlaid on 3D — it's the cheapest possible way to ship a 'looks like an anime' effect on top of three.js.