NAUTILUS

# Install: "NAUTILUS" — A voyage into the unknown

## 0. Brief

Install the complete NAUTILUS website by Orbital Supply: a thirteen-chapter, scroll-driven underwater expedition inspired by Jules Verne, followed by a compact epilogue, four characters and an interactive literary map. This is a source-restoration prompt for a finished, editable product. Use the versioned public code release so the authored geometry, camera choreography and water shaders remain intact. Do not attempt to approximate the scene from prose or replace it with generated imagery.

## 1. Output & hard constraints

Target: react. Fetch the source manifest URL below with a standard HTTPS client. Verify its SHA-256 before writing files. Parse JSON and verify `format === "orbital-editable-source-v1"` and `version === "1.0.0"`. The `files` object maps safe project-relative paths to complete UTF-8 source text. Write every entry beneath the destination project root, preserving text exactly. Reject absolute paths or any `..` path segment. Do not overwrite unrelated existing project files. The manifest includes package.json, package-lock.json, index.html, TypeScript/Vite configuration, README, notices, and all source modules.

Run `npm ci`, `npm run build` and `npm test` in that root. Serve `npm run preview -- --port 4317`. Use Node.js 22.18 or newer. The assets array is an inventory of public CDN files and their hashes; the implementation already uses those URLs. The manifest is a published code dependency, not an image, hidden reference, paid API or remote iframe. All application source is now local and editable.

When integrating into an existing Vite/React project, first install the pinned dependencies, copy the scene, content, UI and styles modules to a dedicated feature directory, then render App once as a full-page route. Preserve the document-level scroll contract. Do not nest this expedition inside a second independently scrolling container.

Canonical public code artifact: `https://cdn.orbital.supply/exp-0016/v1/nautilus-v1.source.json`
SHA-256: `e8f918999a1875372dfc04267b3005b3cac77b98837e6aee1d594c6e42c67716`
Complete source + HTML + models + fonts ZIP: `https://cdn.orbital.supply/exp-0016/v1/nautilus-v1.zip`
ZIP SHA-256: `67ac090da6e1eebeeb191e4bec3f923142266c3a5595d00e9513da02ff7b7d4e`

Runtime versions: React 19.3.0, React DOM 19.3.0, Three.js 0.186.1, GSAP 3.15.0, @gsap/react 2.1.2. The editable build uses Vite 8.3.2, @vitejs/plugin-react 6.1.1 and TypeScript 6.0.3; install the supplied lockfile, not latest versions. Styling is authored CSS; icons are original inline SVG. Do not install Tailwind, Motion or an icon package. No secret, account, backend, generation service or paid API is needed.

Keep `lang="en"`, title `NAUTILUS — A voyage into the unknown`, theme-color `#050d12`, and the English description in index.html. Serve over HTTP(S); file:// is not a supported validation target. Preserve the third-party notices and OFL licenses. Do NOT add pricing, forms, authentication, analytics, testimonials, extra chapters or new portraits. Do not remove the ending or flatten the real-time scene into a video. No external-builder compatibility claim is implied by this installation.

## 2. Assets

All visual assets are public files under `https://cdn.orbital.supply/exp-0016/v1/`. The release code already resolves them by exact name. Preserve names and URLs:

- Geometry: `nautilus.glb`, `salon.glb`, `atlantis.glb`, `whale.glb`, `squid.glb`. These are real meshes; load using the bundled GLTFLoader. No Draco decoder is needed.
- Surface maps: `steel.webp`, `basalt.webp`, `ice.webp`, `walnut.webp`.
- Distant atmosphere: `valley.webp`, behind the real scenery, never replacing foreground geometry.
- Naturalist plate: `naturalist.webp`, inside the journal.
- Fictional character portraits: `portrait-nemo.webp`, `portrait-aronnax.webp`, `portrait-conseil.webp`, `portrait-ned.webp`.
- Fonts: `font-0.ttf` through `font-4.ttf`, with `BodoniModa-OFL.txt` and `InstrumentSans-OFL.txt`.

Do not use generator URLs or fetch new stock images. The recorded catalogue film is not a runtime scene asset. Asset CORS must allow the page origin, including a sandboxed live preview's null origin.

## 3. Typography

Bodoni Moda 400/500 is the editorial display face. Instrument Sans 400/500/600 is the interface/body face. The five exact @font-face declarations are in src/styles.css, with font-display swap. Keep the supplied fallback stacks, font smoothing and font-synthesis none. Do not replace the display face with a generic system serif.

## 4. Design tokens

Retain the implementation's tokens: deep `#061017`, ivory `#ddd8c8`, brass `#ad8650`, muted `#a5aaa5`, line `rgb(221 216 200 / 22%)`, edge `clamp(22px,3.25vw,64px)`, chapter span `170svh`. Underwater palettes and exposure vary by chapter. Warm cabin/window light contrasts with the cold scene. Use the supplied CSS verbatim on initial restoration; visual changes are optional subsequent work, not required to install the product.

## 5. Structure and content

The root mounts one App. Source modules: src/App.tsx (controller and interface), src/content.ts (all thirteen chapter titles, prose and literary distinctions), src/ExpeditionArchive.tsx (people and route), src/icons.tsx, src/styles.css, src/archive.css, and src/scene/ (rendering, world, journey, shaders, atmosphere, materials and audio).

Chapter order: The Moving Reef; Mobilis in Mobili; The Captain's World; The Forest of Crespo; The Coral Sanctuary; Through the Mountain; A Lost Continent; Where Light Ends; The Great Passage; Beneath the Ice; The Devilfish; The Enemy Above; The Maelstrom. Keep the complete supplied copy, including its apostrophes and intentional line breaks. Depths are dramatized. Twenty thousand leagues is distance travelled, never depth.

After the voyage: short Lofoten epilogue; Captain Nemo, Pierre Aronnax, Conseil and Ned Land together; seven selectable route stops with chapter revisits; compact footer. Four portraits share one desktop row and two mobile columns. No individual full-height portrait heroes or additional oversized ending.

## 6. Components

Keep the header brand and Expedition journal action; fixed chapter caption; chapter rail; progress/depth readings; Play/Pause, Sound off/on and Experience settings controls. The journal contains all chapter navigation and literary notes, the original naturalist plate, Inspect Nautilus, The people aboard and Epilogue & route. Native dialogs retain close/Escape behavior and focus restoration. Inspection has drag/orbit, zoom and labelled keyboard buttons. The archive is normal document flow, with the scene suspended while reading it.

## 7. Motion

Native scroll controls one deterministic progression. GSAP ScrollTrigger coordinates the story position and Three.js receives every scroll update. React's text updates are throttled separately. Preserve the complete camera/vessel path in scene/journey.ts; reversing scroll reverses the expedition coherently. Ambient waves, particles, animals and lights remain alive while the story position rests.

Opening: skim the ocean, follow the underwater shadow, pass through the surface, reveal the lit vessel, then accompany it through real rock formations. Interior, vegetation, coral memorial, tunnel, ruins, darkness, whale, ice, cephalopod, warship and vortex each retain their own scale and atmosphere. The Maelstrom follows a tangent heading and progressively submerges the vessel. Never make the ship disappear abruptly.

Autoplay takes seven minutes through the same scroll path. Wheel, touch, chapter navigation, dialogs and a hidden page pause playback. Sound starts only after a visitor enables it. Reduced motion switches to the full reading route with selected still scenes, not a disabled or empty experience.

## 8. Behaviour and lifecycle

Preserve loading, slow-loading and failed-WebGL/asset feedback with an accessible journal/reading alternative. The Three.js engine uses a depth-aware atmospheric pass before bloom; quality low uses fewer ray samples, lower pixel ratio and reduced geometry draw count. Inspection disables voyage tracking, uses OrbitControls, and returns to the saved progress and focus. On cleanup remove ScrollTriggers, observers, events and animation frames; dispose scene resources and audio. Avoid double mounting, duplicate canvases and multiple render loops.

Chapter rail and journal navigation seek real scroll positions. The route explorer changes the selected stop's copy/map highlight; Revisit opens its matching chapter. Journal-to-archive navigation moves keyboard focus to its destination. Keep autoplay and sound off on initial load.

## 9. Responsive

The camera uses its own mobile framing below 700 px, retaining the same narrative position. Reduced mobile atmospheric density keeps the farther hull readable. The archive becomes two portrait columns and stacks the map with its text. Preserve touch-sized controls, safe readable margins and the compact chapter rail. Check widths 375, 768, 1440 and 1920 without horizontal document overflow. A narrow desktop screenshot is not physical-phone performance evidence.

## 10. Accessibility and performance

Keep landmarks, one primary heading, skip-to-reading link, labelled controls, visible focus, dialog focus management, meaningful portrait/plate alternatives and the complete reduced-motion route. Canvas visuals are accompanied by real readable text. Do not autoplay sound. Pause the scene when the document is hidden or the archive is being read. Preserve adaptive quality and source texture dimensions. Do not add expensive passes or new dependencies during installation.

## 11. Acceptance checklist

- Initial ocean, typography and navigation load over HTTP without console errors.
- All thirteen chapters and the compact archive remain present.
- Scroll forwards and backwards through the vessel reveal, tunnel and vortex; position remains coherent.
- Play/Pause, journal, chapter navigation, inspection orbit/zoom/return, route revisits and motion settings work.
- Portraits, five GLBs, textures and fonts load from the exact public CDN URLs.
- No horizontal overflow at the four review widths; mobile framing differs intentionally.
- Reduced motion provides all chapter text and controls; audio is opt-in.
- React: clean npm ci, build and journey tests pass. HTML: the single file runs over HTTP and includes application CSS/JS inline.
- Report any actual failed step. Do not claim Lovable testing, physical mobile GPU testing or a creative reconstruction from scratch; this prompt restores the published source release.

# Install: "NAUTILUS" — A voyage into the unknown

## 0. Brief

Install the complete NAUTILUS website by Orbital Supply: a thirteen-chapter, scroll-driven underwater expedition inspired by Jules Verne, followed by a compact epilogue, four characters and an interactive literary map. This is a source-restoration prompt for a finished, editable product. Use the versioned public code release so the authored geometry, camera choreography and water shaders remain intact. Do not attempt to approximate the scene from prose or replace it with generated imagery.

## 1. Output & hard constraints

Target: html. Fetch the HTML release URL below with a standard HTTPS client. Verify its SHA-256, then save its UTF-8 bytes unchanged as `index.html` in the destination directory. Serve that directory over HTTP, for example `python3 -m http.server 4318 --bind 127.0.0.1`, and open its HTTP URL. There is no build step for this target.

This is the compiled single-file version of the accepted React implementation. Its CSS and application JavaScript, including the pinned library runtimes, are inline. It is not dependency-free or offline: models, images and fonts are loaded from the declared public CDN. Do not wrap another website in an iframe. The complete scene runs in this document. For maintainable scene or layout edits, download the source ZIP, edit its React project, build it, then package a new HTML artifact; the ZIP includes the readable source and bundled asset copies.

Canonical public code artifact: `https://cdn.orbital.supply/exp-0016/v1/nautilus-v1.html`
SHA-256: `2d92cb16ce7499710f46c75e3a75ce7be31d65fa60a17950e370c977766b904a`
Complete source + HTML + models + fonts ZIP: `https://cdn.orbital.supply/exp-0016/v1/nautilus-v1.zip`
ZIP SHA-256: `67ac090da6e1eebeeb191e4bec3f923142266c3a5595d00e9513da02ff7b7d4e`

Runtime versions: React 19.3.0, React DOM 19.3.0, Three.js 0.186.1, GSAP 3.15.0, @gsap/react 2.1.2. The editable build uses Vite 8.3.2, @vitejs/plugin-react 6.1.1 and TypeScript 6.0.3; install the supplied lockfile, not latest versions. Styling is authored CSS; icons are original inline SVG. Do not install Tailwind, Motion or an icon package. No secret, account, backend, generation service or paid API is needed.

Keep `lang="en"`, title `NAUTILUS — A voyage into the unknown`, theme-color `#050d12`, and the English description in index.html. Serve over HTTP(S); file:// is not a supported validation target. Preserve the third-party notices and OFL licenses. Do NOT add pricing, forms, authentication, analytics, testimonials, extra chapters or new portraits. Do not remove the ending or flatten the real-time scene into a video. No external-builder compatibility claim is implied by this installation.

## 2. Assets

All visual assets are public files under `https://cdn.orbital.supply/exp-0016/v1/`. The release code already resolves them by exact name. Preserve names and URLs:

- Geometry: `nautilus.glb`, `salon.glb`, `atlantis.glb`, `whale.glb`, `squid.glb`. These are real meshes; load using the bundled GLTFLoader. No Draco decoder is needed.
- Surface maps: `steel.webp`, `basalt.webp`, `ice.webp`, `walnut.webp`.
- Distant atmosphere: `valley.webp`, behind the real scenery, never replacing foreground geometry.
- Naturalist plate: `naturalist.webp`, inside the journal.
- Fictional character portraits: `portrait-nemo.webp`, `portrait-aronnax.webp`, `portrait-conseil.webp`, `portrait-ned.webp`.
- Fonts: `font-0.ttf` through `font-4.ttf`, with `BodoniModa-OFL.txt` and `InstrumentSans-OFL.txt`.

Do not use generator URLs or fetch new stock images. The recorded catalogue film is not a runtime scene asset. Asset CORS must allow the page origin, including a sandboxed live preview's null origin.

## 3. Typography

Bodoni Moda 400/500 is the editorial display face. Instrument Sans 400/500/600 is the interface/body face. The five exact @font-face declarations are in src/styles.css, with font-display swap. Keep the supplied fallback stacks, font smoothing and font-synthesis none. Do not replace the display face with a generic system serif.

## 4. Design tokens

Retain the implementation's tokens: deep `#061017`, ivory `#ddd8c8`, brass `#ad8650`, muted `#a5aaa5`, line `rgb(221 216 200 / 22%)`, edge `clamp(22px,3.25vw,64px)`, chapter span `170svh`. Underwater palettes and exposure vary by chapter. Warm cabin/window light contrasts with the cold scene. Use the supplied CSS verbatim on initial restoration; visual changes are optional subsequent work, not required to install the product.

## 5. Structure and content

The root mounts one App. Source modules: src/App.tsx (controller and interface), src/content.ts (all thirteen chapter titles, prose and literary distinctions), src/ExpeditionArchive.tsx (people and route), src/icons.tsx, src/styles.css, src/archive.css, and src/scene/ (rendering, world, journey, shaders, atmosphere, materials and audio).

Chapter order: The Moving Reef; Mobilis in Mobili; The Captain's World; The Forest of Crespo; The Coral Sanctuary; Through the Mountain; A Lost Continent; Where Light Ends; The Great Passage; Beneath the Ice; The Devilfish; The Enemy Above; The Maelstrom. Keep the complete supplied copy, including its apostrophes and intentional line breaks. Depths are dramatized. Twenty thousand leagues is distance travelled, never depth.

After the voyage: short Lofoten epilogue; Captain Nemo, Pierre Aronnax, Conseil and Ned Land together; seven selectable route stops with chapter revisits; compact footer. Four portraits share one desktop row and two mobile columns. No individual full-height portrait heroes or additional oversized ending.

## 6. Components

Keep the header brand and Expedition journal action; fixed chapter caption; chapter rail; progress/depth readings; Play/Pause, Sound off/on and Experience settings controls. The journal contains all chapter navigation and literary notes, the original naturalist plate, Inspect Nautilus, The people aboard and Epilogue & route. Native dialogs retain close/Escape behavior and focus restoration. Inspection has drag/orbit, zoom and labelled keyboard buttons. The archive is normal document flow, with the scene suspended while reading it.

## 7. Motion

Native scroll controls one deterministic progression. GSAP ScrollTrigger coordinates the story position and Three.js receives every scroll update. React's text updates are throttled separately. Preserve the complete camera/vessel path in scene/journey.ts; reversing scroll reverses the expedition coherently. Ambient waves, particles, animals and lights remain alive while the story position rests.

Opening: skim the ocean, follow the underwater shadow, pass through the surface, reveal the lit vessel, then accompany it through real rock formations. Interior, vegetation, coral memorial, tunnel, ruins, darkness, whale, ice, cephalopod, warship and vortex each retain their own scale and atmosphere. The Maelstrom follows a tangent heading and progressively submerges the vessel. Never make the ship disappear abruptly.

Autoplay takes seven minutes through the same scroll path. Wheel, touch, chapter navigation, dialogs and a hidden page pause playback. Sound starts only after a visitor enables it. Reduced motion switches to the full reading route with selected still scenes, not a disabled or empty experience.

## 8. Behaviour and lifecycle

Preserve loading, slow-loading and failed-WebGL/asset feedback with an accessible journal/reading alternative. The Three.js engine uses a depth-aware atmospheric pass before bloom; quality low uses fewer ray samples, lower pixel ratio and reduced geometry draw count. Inspection disables voyage tracking, uses OrbitControls, and returns to the saved progress and focus. On cleanup remove ScrollTriggers, observers, events and animation frames; dispose scene resources and audio. Avoid double mounting, duplicate canvases and multiple render loops.

Chapter rail and journal navigation seek real scroll positions. The route explorer changes the selected stop's copy/map highlight; Revisit opens its matching chapter. Journal-to-archive navigation moves keyboard focus to its destination. Keep autoplay and sound off on initial load.

## 9. Responsive

The camera uses its own mobile framing below 700 px, retaining the same narrative position. Reduced mobile atmospheric density keeps the farther hull readable. The archive becomes two portrait columns and stacks the map with its text. Preserve touch-sized controls, safe readable margins and the compact chapter rail. Check widths 375, 768, 1440 and 1920 without horizontal document overflow. A narrow desktop screenshot is not physical-phone performance evidence.

## 10. Accessibility and performance

Keep landmarks, one primary heading, skip-to-reading link, labelled controls, visible focus, dialog focus management, meaningful portrait/plate alternatives and the complete reduced-motion route. Canvas visuals are accompanied by real readable text. Do not autoplay sound. Pause the scene when the document is hidden or the archive is being read. Preserve adaptive quality and source texture dimensions. Do not add expensive passes or new dependencies during installation.

## 11. Acceptance checklist

- Initial ocean, typography and navigation load over HTTP without console errors.
- All thirteen chapters and the compact archive remain present.
- Scroll forwards and backwards through the vessel reveal, tunnel and vortex; position remains coherent.
- Play/Pause, journal, chapter navigation, inspection orbit/zoom/return, route revisits and motion settings work.
- Portraits, five GLBs, textures and fonts load from the exact public CDN URLs.
- No horizontal overflow at the four review widths; mobile framing differs intentionally.
- Reduced motion provides all chapter text and controls; audio is opt-in.
- React: clean npm ci, build and journey tests pass. HTML: the single file runs over HTTP and includes application CSS/JS inline.
- Report any actual failed step. Do not claim Lovable testing, physical mobile GPU testing or a creative reconstruction from scratch; this prompt restores the published source release.