3D, Scroll Narrative and Cinema — One Prompt, One Site

Build an interactive exhibition about coastal habitats. Visitors explore scenes, open species stories and switch to a text-led route through the same content, with purposeful sound and motion controls.

Include these capabilities:
- Real-time 3D scenes — Three.js / React Three Fiber with lighting and shaders
- Scroll-driven narrative structure: pinned beats, reveals, camera motion
- Cinematic scroll-scrubbed video sequences with AI-generated footage on Pro
- Curated genre direction — luxury, sports legacy, fragrance, automotive, real estate
- One coherent codebase: live preview, one-click deploy, full source export

Build the complete working project with its routes, data model and interactions. For saved or private data, implement persistence, authentication and server-side permissions. Keep API credentials on the server. For external services, document the required setup and use test mode until real accounts are connected. Do not present a simulated integration as a completed live connection.

Make the interface responsive, with accessible labels, keyboard navigation and visible focus. Include loading, empty, validation and error states. Use clearly labelled sample data, never invented customer testimonials or results. Choose a visual direction suited to this project and keep typography, spacing and controls consistent. Explain how to run, test, export and deploy the source.

Verify this end-to-end flow:
Reach each story from both navigation modes. Verify touch and keyboard access, sound-off defaults and a fallback for devices that cannot render the scene.