3D story telling.

Prompt

# Upper Moon Archives: Interactive 2D + 3D Storytelling Experience Create a cinematic, web-based digital exhibition about the top three Upper Ranks in Demon Slayer: **Kokushibo (Rank 1)**, **Doma (Rank 2)**, and **Akaza (Rank 3)**. The project must feel like an explorable interactive film using Three.js / React Three Fiber, GSAP ScrollTrigger, and 2D motion graphics. --- ## 1. Core Principles & Guardrails * **No Generic Web Layouts:** Strictly NO hero banners, feature cards, standard navbars, simple parallax, or static text panels over 3D backgrounds. * **Integrated World:** Camera movement, 3D environments, 2D vector artwork, typography, ambient sound, lighting, particles, and scroll position must act as a single connected storytelling engine. * **Spoilers:** Show a clear spoiler warning modal before entering the experience. * **Continuous Route Transitions:** Navigating from the homepage to a demon page must seamlessly morph the Infinity Castle environment into that demon's chamber without white flashes, route loading screens, or page reloads. --- ## 2. Routes & Architecture * `/` — Infinity Castle Homepage & Demon Selection Hub * `/kokushibo` — Kokushibo's Interactive Story Experience * `/doma` — Doma's Interactive Story Experience * `/akaza` — Akaza's Interactive Story Experience ### Tech Stack Specifications * **Framework:** Next.js (App Router), React, TypeScript, Tailwind CSS * **3D & Animation:** Three.js, React Three Fiber (R3F), @react-three/drei, GSAP + ScrollTrigger, Framer Motion (for UI overlays) * **State & Audio:** Zustand (global experience state, active chapter, quality settings), Howler.js or Web Audio API * **Assets:** Compressed GLTF/GLB (Draco compression), WebP/Basis textures, custom GLSL shaders. Provide procedural/canvas fallbacks or placeholder generators if external models aren't present. --- ## 3. Homepage: The Infinity Castle (`/`) ### Entry & Opening * Begins in near-total darkness with floating dust, faint red ambient glow, drifting calligraphy fragments, and distant wooden creaks. * Includes Title, Spoiler Warning, Enter Button, Sound Toggle, and Performance Options (Cinematic, Balanced, Performance). * Upon clicking **Enter**, the doorway opens and the camera travels deep into the Infinity Castle. ### Castle Environment Mechanics * Physically impossible geometry: rooms rotating independently, staircases shifting axes, floors morphing into walls, shifting gravity, floating platforms. * Scroll controls camera travel through complex multi-axis paths (up, down, sideways, inverted, rotating through doors). * **Hierarchy Display:** Represent Ranks spatially. Lower ranks crack and disappear; Upper Ranks exist in deeper chambers. Muzan's presence is subtly implied through blood pulses in architecture, red eyes, and shifting shadows. --- ## 4. Selection Chambers & Transitions A central impossible chamber splits into three distinct paths. ### A. Kokushibo Selection * **3D:** Dark wooden samurai corridor, suspended flesh katana, broken shoji, purple fog, blood moon, crescent blades, 6 opening eyes. * **2D:** Ink slashes, vertical calligraphy, moon-arc brush strokes, eye motifs. * **Interaction:** Focusing turns the sword toward the viewer, opens 6 eyes sequentially, cuts a 2D moon slash, and reveals: *"A swordsman who surrendered his humanity while chasing the sun."* ### B. Doma Selection * **3D:** Frozen lotus temple, reflective ice floor, ceremonial lanterns, smiling statues, hanging fabrics, drifting snow. * **2D:** Lotus vectors, ornamental borders, religious iconography, rainbow-eye motifs. * **Interaction:** Focusing opens a lotus, spreads ice frost across the screen, shows a smiling reflection without a body, and reveals: *"A saviour who promised paradise without understanding sorrow."* ### C. Akaza Selection * **3D:** Shattered circular arena, ruined dojo, glowing Compass Needle on the floor, cracked stone, blue combat aura. * **2D:** Impact rings, martial arts symbols, Compass Needle graphics, red memory strokes. * **Interaction:** Focusing activates the Compass Needle, creates a shockwave cracking the floor to reveal warm memories beneath, and reveals: *"A fighter who forgot that his hunger for strength began with love."* ### Selection Transition Behavior When selected: 1. The castle reorganizes violently. Rooms rotate, doors open and close rapidly. 2. The camera zooms through impossible architectural corridors. 3. Color grading and particle systems shift to match the selected demon. 4. The transition lands directly at Act I of the target route (`/kokushibo`, `/doma`, or `/akaza`) without interruption. --- ## 5. Storytelling Mechanics & Information Structure Each demon page is organized into chronological narrative **Acts** driven by scrolling. Information is delivered through 3 layers: 1. **Main Story (Scroll-Driven):** Environmental storytelling, animated typography, battle tableaux, and 3D camera journeys. 2. **Interactive Lore Hotspots:** Clickable/hoverable objects (swords, statues, memories, blood patterns) revealing deeper context. 3. **Archive Mode:** An optional, structured UI panel offering quick access to complete chronology, abilities, Blood Demon Art, named techniques, relationships, and thematic analysis. --- ## 6. Character Story Pages ### A. Kokushibo (`/kokushibo`) * **Theme:** Tragedy of jealousy, mortality, brotherhood, and pride (Yoriichi relationship). * **Typography:** Tall, sharp display fonts, vertical calligraphy, letters sliced by crescent cuts. * **Key Acts:** 1. *Six Eyes in Darkness:* Intimidating presence of Upper Rank One. 2. *Two Brothers:* Contrast between Sun (Yoriichi) and Moon (Michikatsu). 3. *Fear of Time:* Fear of aging and death; creation of Moon Breathing. 4. *Becoming Kokushibo:* Flesh sword transformation; human architecture mutates to demon biology. 5. *Centuries Beneath the Moon:* Power, Muzan alliance, Moon Breathing forms. 6. *Final Battle:* Frozen battle moments with Hashira (Gyomei, Sanemi, Muichiro, Genya). 7. *Broken Reflection:* Realization of his monstrous form inside a broken blade; final regret and disintegration. * **Interactions:** Rotate/inspect flesh katana, activate Moon Breathing arc overlays, trigger 6-eye focus mode, scrub through moon phases to unlock lore. ### B. Doma (`/doma`) * **Theme:** Psychological horror, false holiness, emotional emptiness, deception, and consumption. * **Typography:** Elegant serif typography, symmetrical ornamental framing, letters cracking like ice. * **Key Acts:** 1. *Welcome to Paradise:* Beautiful, serene cult temple setting. 2. *The Worshipped Child:* Childhood as cult leader; subtle visual corruptions appear. 3. *The Empty Chamber:* Internal emptiness represented by a vast, hollow room. 4. *Salvation Through Consumption:* Dark reveal of followers turned into frozen statues/consumed victims. 5. *Upper Rank Two:* Ice Blood Demon Art, crystalline clones, lotus constructs. 6. *Shinobu's Plan & Final Battle:* The fight with Kanao and Inosuke; melting of the temple architecture. 7. *A Feeling Too Late:* Final interaction with Shinobu; the realization of his empty existence. * **Interactions:** Cursor-based frost spreading, scratching ice to reveal memories, breaking mirrored reflections, melting decorative beauty to reveal hidden horrors. ### C. Akaza (`/akaza`) * **Theme:** Emotional tragedy, grief, love, strength born from helplessness, and redemption. * **Typography:** Heavy kinetic display fonts, circular text arranged around the Compass Needle, soft hand-drawn style during Hakuji memories. * **Key Acts:** 1. *The Challenger:* High-impact introduction in a broken arena. 2. *Memories Beneath the Floor:* Cracks in the floor expose Hakuji's poor childhood and sick father. 3. *The Dojo:* Transition into Keizo and Koyuki's warm, peaceful dojo. 4. *Everything Taken Away:* Tragic poisoning incident; loss of warmth. 5. *Becoming Akaza:* Muzan's encounter; shattering of memories into the Compass Needle. 6. *Pursuit of Strength:* Destructive Death techniques, refusal to eat women, battle values. 7. *The Flame & Selfless State:* Mugen Train battle (Rengoku) and Infinity Castle battle (Tanjiro/Giyu). 8. *Hakuji Remembers & No More Fighting:* Stopping his own regeneration; destruction of the Compass Needle; peace in a quiet snow-covered dojo. * **Interactions:** Directing the Compass Needle with pointer position, striking the floor to break through to human memories, switching between Akaza (demon) and Hakuji (human) states, assembling dojo fragments. --- ## 7. Systems & Technical Requirements ### Scroll & Camera Controller * Treat scrolling as a progress timeline ($0.0 \to 1.0$) mapped to camera position, target vector, Field of View (FOV), rotation, particle density, lighting intensities, and active text triggers. * Implement custom easing curves (GSAP) for smooth deceleration. ### Performance & Optimization * **Asset Loading:** Preload core castle assets on `/`, lazy-load demon assets during route selection transitions. * **Quality Tiers:** Automatically adjust Pixel Ratio ($1\times - 2\times$), shadows, particle counts, and post-processing (Bloom/DOF) based on FPS detection. * **Mobile Responsiveness:** Touch-drag interactions, simplified camera paths, dynamic vertical FOV adjustment, and optimized touch hotspots. ### Accessibility & Fallbacks * Respect `prefers-reduced-motion` by converting continuous camera journeys into discrete step-based section jumps with static visual previews. * Provide clear keyboard navigation controls (`Tab`, `Arrow Keys`, `Esc` for modals). * Include a toggleable pure-text / screen-reader-accessible Archive overlay containing all lore facts. ### Sound System * Audio is disabled by default; require a explicit user opt-in or start-button interaction. * Include ambient loops (wooden creaks, wind, ice chimes, low drones) and interaction sound effects (blade slashes, frost cracking, martial impacts). --- ## 8. Expected Deliverables 1. **Complete Codebase:** Production-ready Next.js project structured with clean component separation (`/components/canvas`, `/components/ui`, `/hooks`, `/store`, `/data`). 2. **Structured Data Files:** All character lore, act definitions, technique descriptions, and timelines stored in TypeScript data models (`/data/kokushibo.ts`, `/data/doma.ts`, `/data/akaza.ts`). 3. **Interactive 3D Environments:** Procedural or GLTF-driven scenes for the Infinity Castle hub and all 3 demon chambers. 4. **Custom Shaders / Effects:** Custom materials for ice, flesh/eyes, glowing martial energy, and dynamic camera transitions. 5. **Documentation:** `README.md` with installation commands, asset replacement guide, performance tuning notes, and deployment instructions.

A system prompt was added to support web rendering