Cinematic scrolling site

# Build Prompt — The IMAX Keighley

One self-contained prompt. Build a single-page, scroll-driven website about **The IMAX
Keighley** — the real next-generation 65mm film camera Christopher Nolan used to shoot
*The Odyssey*, the first feature shot entirely on IMAX film. The camera is the centerpiece:
a photoreal 3D camera the visitor explores, that **disassembles into an exploded view as
they scroll** and reassembles, and that at the end **they actually operate** — pointing it
at a live Odyssey scene and shooting it. Everything is built in code.

The bar for the camera is not "recognizable." It's **as close to a photoreal, exact
replica as you can get in real time** — it should almost look like a photograph of the real
camera, rendered like a 2026 AAA game. Do not stop until it clears that bar.

---

You are a world-class creative front-end + real-time 3D engineer. Use **Three.js
(WebGPURenderer + TSL where it helps), native ES modules, no build step. Build the camera
and all geometry procedurally from primitives — no imported 3D models, no image textures,
no HDRIs.** You MAY use Three.js official addons and open-source libraries for the
rendering/scroll/post plumbing (e.g. `lil-gui`, a scroll library, post-processing passes) —
but the camera, its parts, and every material are built by you, in code.

## The camera — build an accurate IMAX Keighley (real reference)
The Keighley is a **carbon-fiber-bodied large-format film camera** — a radical departure
from the old bulky aluminum IMAX housings. Build it as **separable, nameable parts** so the
exploded view can pull them apart, and get the proportions and detailing right so it reads
as a real machined device up close:
1. **Carbon-fiber body** — a compact, boxy-but-refined main housing with visible **woven
   carbon-fiber panels**, panel seams, recessed hex screws, vents, and a matte finish.
2. **Large central lens assembly** — a substantial large-format prime on a **PL-style
   mount**, with focus/iris rings, lens barrel markings, a front element with real glass,
   and a **matte box** with flags.
3. **Film magazine** — the reloadable 15-perf 70mm chamber mounted on top/back; holds only
   ~2.5–3 min of film per load. Show the **film path + gate** where the 70mm runs through
   horizontally; animate film moving (it runs ~5.6 feet per second at 24 fps).
4. **Body-mounted digital LCD telemetry screen** — the camera's signature modern touch.
   Render a live, glowing readout with real-looking data: **frame rate (23.999 / 24.000
   fps), film remaining (e.g. "Rem: 00:42"), temperature (~26°C), voltage/current (35.5V /
   3.2A), and a status line ("Local 230.7 Forward").** This detail sells authenticity.
5. **Reflex viewfinder** mounted top-right, with a small **video-tap** module feeding
   external monitors.
6. **The "blimp"** — the coffin-like acoustic housing the whole camera drops into (its own
   section). Fully rigged the system weighs 300–400 lb and needs steel-plated dollies.
7. **The mirror periscope** — a small twin-mirror arm that mounts beside the lens (its own
   section).
- Add **greebling**: cables, ports, labels, a red REC tally, rod mounts, a top handle,
  toggle switches — the small hardware that makes it read as a real camera, not a clean box.

## REALISM BAR — this is how it stops looking like a video-game prop and starts looking real
Name-check every one of these; all required:
- **PBR metallic-roughness materials:** procedural **carbon-fiber weave** (albedo +
  roughness + normal generated from math), **anodized/brushed aluminum** fittings with
  correct metalness, **real glass** on the lens via `MeshPhysicalMaterial` (transmission,
  clearcoat, refraction, subtle chromatic dispersion), **rubber** grips, painted markings.
- **Image-based lighting:** generate a procedural **HDR studio environment** and convert it
  with **PMREM** so the metal reflects a real room and the lens catches proper highlights.
  This single thing is most of what makes it look photographed.
- **Studio lighting:** physically-correct **key / fill / rim** rig, **cascaded shadow maps**
  for crisp self-shadowing, **SSAO** in every seam and screw recess, **SSR** on the body.
- **Post pipeline:** **ACES filmic** tone mapping, **bloom** on the LCD glow and rim lights,
  **depth-of-field** (real bokeh) on the beauty shots, a whisper of **chromatic aberration**
  and **film grain** for the photographic feel, correct linear/sRGB color management.
- **Geometry quality:** beveled edges (no razor-sharp CG edges), chamfers, consistent panel
  gaps, high-enough tessellation on curves. The camera must survive a slow close-up orbit.
- **Micro-detail (the photographic touch):** subtle edge wear, fine scratches, faint dust
  and fingerprints on the metal and on the lens glass, **emulsion sheen and visible
  perforations** on the 70mm film, and the LCD rendered as a **real emissive panel** with a
  crisp anti-aliased readout and a faint glow. These small imperfections are what push it
  from "clean CG render" to "photograph of a real object."
- **Every state stays photoreal — this is required, not just the beauty shots:** the realism
  bar holds for the whole assembled camera in the hero, for **every floating part during the
  exploded view** (each part keeps its full PBR materials, ambient occlusion, and
  reflections, and casts and receives shadows on the neighboring parts), and in the finale.
  Depth-of-field follows whatever part or subject is currently in focus; everything else
  falls off with real bokeh. Lighting, reflections, and shadows stay consistent as the parts
  separate and come back together — the camera can never flatten into shaded boxes while it's
  apart.

## Scroll experience — section by section
Use the **15/70 film strip as the scroll motif**: a thin strip of film runs down the side /
through the gate as the visitor scrolls, tying the sections together; scrubbing feels like
running film.

**1 — Hero.** The fully assembled Keighley, slowly rotating, dramatically lit against
near-black, shallow depth of field. Oversized headline: **"THE KEIGHLEY."** Subhead: *"The
camera behind the first film shot entirely on IMAX."*

**2 — The format.** The camera centers and the **film threads through the gate and
magazine**, running horizontally. Copy: *"15-perforation 65mm film — 'IMAX 15/70,' the
largest format in cinema. It moves more than five feet of film a second. That speed is
exactly why it's so loud."* Tie film speed subtly to scroll.

**3 — Exploded view (the core beat).** The camera **breaks apart** — each part floats to its
own position with a thin leader line to a label + spec, revealed one at a time on scroll:
carbon-fiber body, film magazine ("~2.5–3 min per load"), the LCD screen (render the live
readout), reflex viewfinder + video tap. Hovering a floating part highlights it, dims the
rest, and pops its spec.

**4 — The noise problem & the blimp.** The reassembled camera lowers into the coffin-like
**blimp**. Copy: *"Even quieter than before, it was still too loud for dialogue, so IMAX
built a soundproof housing — the 'blimp.' Fully rigged, the system weighs 300–400 lb and
needs steel-plated dollies."* Show the scale/weight.

**5 — The mirror periscope.** The **twin-mirror arm** mounts beside the lens; animate a
sightline bouncing through the mirrors. Copy: *"The blimp was so wide it blocked the actors'
eyelines. On tight two-shots, Nolan and cinematographer Hoyte van Hoytema mounted a
double-mirror periscope so the actors could hold eye contact through reflections — with the
huge camera between them."*

**6 — The making-of.** A quiet, cinematic full-bleed beat. Copy (state plainly): *"Nolan
challenged IMAX to build a camera that could shoot an entire feature — dialogue and all.
They delivered."* Pull-quote, **Nolan verbatim:** *"If ever there were a story where you want
to do the whole thing on IMAX, this is it."* Three stat callouts, animated count-up:
**2,000,000+ feet of film shot · 6+ countries · first feature shot entirely on IMAX.**

## 7 — THE FINALE: shoot the Odyssey (the interactive payoff)
The camera reassembles and **turns toward a live Odyssey scene that you build procedurally
in 3D code** — not video, not trailer footage, a real-time vignette you generate from
scratch. A moonlit sea with Odysseus' galley against a low horizon works well: it gives
clear foreground/background depth so the focus-pull and the format toggle actually read.
Make it atmospheric and convincing, but **keep the camera the star** — the scene is the
stage it films, so it needs real depth and a clear Odyssey subject, not a second photoreal
simulation competing with the camera for detail. Now the visitor **operates the camera:**
- **Rack focus** — pull focus between foreground and the ship/horizon, with real bokeh.
- **Frame the shot** — pan/tilt the camera to compose; a subtle reticle + level.
- **Format toggle — IMAX 15/70 vs standard** — a switch that **changes the frame you're
  capturing**: the giant near-square IMAX frame vs a cropped standard frame, side by side or
  overlaid, so the visitor *sees and feels* why the format matters (how much more of the
  scene the IMAX frame holds). Show a live "viewfinder" of what the camera sees.
- Small authentic touches: the REC tally lights, the LCD ticks film remaining as you
  "roll," a shutter/film-running sound (Web Audio, synthesized).
End card: **"THE KEIGHLEY."** and a quiet memorial line: *"Named for David Keighley — five
decades at IMAX, post-production on over 500 films."*

## Design system
- **Palette:** near-black (#0a0a0a), bone white (#f4f1ea) text, one warm **film-amber**
  accent (#e8a33d) for leader lines/highlights, brushed metallic greys for the camera.
- **Type:** oversized condensed grotesque display headlines, clean sans body, big scale
  contrast.
- **Motion:** scroll-scrubbed and eased (disassembly maps to scroll; scrubbing up
  reassembles), gentle inertia, nothing abrupt. Thin scroll-progress / film-strip indicator.
- **Copy rules:** factual and plainly stated. No marketing adjectives, no jokes.

## Technical + runtime
Native ES modules, no build step. Fully responsive (rework the exploded layout + the finale
controls for mobile). Respect `prefers-reduced-motion` (present parts statically, disable
scrub). WebGL/WebGPU detection with a graceful message, resize, capped DPR, hidden-tab
pause. Smooth 60fps — throttle heavy work, LOD the camera when zoomed out. No generic cards,
stock imagery, or glassmorphism.

## Standards & iteration — do not stop early
Judged first on how photoreal the camera looks and how satisfying the shoot-the-scene finale
feels. **Do not call it done until the camera clears the exact-replica realism bar.** After
building, **render it, screenshot your own output, and inspect the camera in a close-up
orbit** — if it reads like a gray box, if the carbon fiber/lens/metal don't look real, if
the edges are razor-sharp CG, fix it and go again. Minimum **three full
self-review-and-improve passes**, more if needed. No placeholders, no invented APIs, no
console errors, no hidden fallback rendering. Return complete, directly runnable code and
brief launch instructions.