Camera teardown site

# Build Prompt — The Keighley Camera Site

One self-contained prompt. Everything needed is below — all facts, all specs, the full
scroll experience. Do not invent specifications or quotes; use only what's written
here.

---

You are a world-class creative front-end engineer and 3D web developer. Build a
single-page, scroll-driven website about **The Keighley** — the new IMAX film camera
Christopher Nolan used to shoot _The Odyssey_, the first feature film shot entirely on
IMAX. The **camera is the centerpiece**: a detailed 3D camera the visitor explores,
that **disassembles into an exploded view as they scroll** and reassembles at the end.

Deliver a directly runnable `index.html` + `main.js` (+ CSS) using native ES modules.
Use **Three.js** for the 3D. Build the camera and all geometry **procedurally in code**
from primitives (no imported 3D models, no image textures, no HDRIs) — there is no
public blueprint of this camera, so construct a clean, stylized-but-believable version
from the described parts. Complete, runnable code — no placeholders.

## The 3D camera model (build these parts, procedurally)
A large-format film camera, roughly cuboid body with a lens barrel on the front. It
must be made of nameable, separable parts so the exploded view can pull them apart:
1. **Carbon-fiber body** (dark, woven-look via procedural shading) — compact, centrally
   balanced.
2. **Lens barrel** at the front.
3. **Film magazine** on top/back (the reloadable film chamber).
4. **The film path + gate** — the horizontal channel the 15/70 film runs through.
   Animate film moving through it.
5. **Side LCD telemetry screen** — a glowing panel on the body (see the readout below).
6. **Reflex viewfinder** with a small **video-tap** module.
7. **The "blimp"** — a separate coffin-like acoustic housing the whole camera drops
   into (appears in its own section).
8. **The mirror periscope** — a small twin-mirror arm that mounts beside the lens
   (appears in its own section).

## Scroll experience — section by section (be exact)

**1 — Hero.** The fully assembled Keighley, slowly rotating, dramatically lit against
near-black. Oversized headline: **"THE KEIGHLEY."** Subhead: _"The camera behind the
first film shot entirely on IMAX."_ A small scroll cue.

**2 — The format.** As the user scrolls, the camera moves to center 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 every second. That speed is exactly why it's so loud."_ Animate the film moving;
tie its speed subtly to scroll.

**3 — Exploded view (the core beat).** The camera **breaks apart** — each part floats
out to its own position and draws a thin leader line to a label + spec. Reveal, one at
a time as they scroll:
- **Carbon-fiber body** — _"Compact, centrally balanced — a ground-up redesign of a
  camera that hadn't changed in decades."_
- **Film magazine** — _"Holds only 2.5–3 minutes of film per load before a reload."_
- **Side LCD screen** — render a live-looking readout showing: **FILM REMAINING**,
  **TEMP ~20°C** (_"held near 20°C to protect the ESTAR film emulsion"_), **VOLTAGE**,
  **SHUTTER ANGLE**. Copy: _"A digital telemetry screen on a pure film camera — the one
  modern touch."_
- **Reflex viewfinder + video tap** — _"A high-resolution video tap feeds external
  monitors for Nolan and cinematographer Hoyte van Hoytema."_

**4 — The noise problem & the blimp.** The reassembled camera **lowers into the
coffin-like "blimp."** Copy: _"Even 30% quieter than the old cameras, 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 to move."_ Show scale/weight
(e.g. a weight readout, or the dolly).

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

**6 — The Odyssey.** Camera settles; a quiet, cinematic full-bleed section. Copy pulls
these facts (state them plainly, no fluff):
- _"Spring 2024: Nolan challenged IMAX's CEO to build a camera that could shoot an
  entire feature — dialogue and all. They delivered within a year."_
- Pull-quote, **Nolan verbatim:** _"If ever there were a story where you want to do the
  whole thing on IMAX, this is it."_
- _"The Odyssey is the first theatrical feature shot entirely on IMAX film."_
- Three stat callouts, animated count-up: **2,000,000+ feet of film shot** · **6+
  countries** (Morocco, Greece, Italy, Iceland, Scotland, Malta) · **Feb–Aug 2025.**

**7 — Named for the Keighleys (the closer).** The camera reassembles fully, back to the
hero pose, now still. Copy: _"The camera is named for David Keighley — IMAX's first
Chief Quality Officer, five decades at the company, post-production on over 500 IMAX
films — and his wife Patricia. David died on August 28, 2025, at 77, days after
finishing his review of the Odyssey dailies."_ Understated, respectful. End card:
**"THE KEIGHLEY."**

## Design system (specific)
- **Palette:** near-black background (#0a0a0a), bone white (#f4f1ea) text, a single
  warm **film-amber** accent (#e8a33d) for highlights/leader lines, brushed metallic
  greys for the camera.
- **Type:** oversized condensed grotesque display headlines (very large, tight
  tracking), clean sans for body. Big scale contrast between headline and caption.
- **Motion:** scroll-scrubbed and eased (the 3D disassembly maps to scroll progress —
  scrubbing up reassembles). Parts float with gentle inertia. Nothing abrupt.
- **Micro-interactions:** hovering a floating part **highlights it, dims the rest, and
  pops its spec**; leader lines draw on as sections enter; the LCD readout subtly
  animates; stat numbers count up on enter; a thin scroll-progress indicator.
- **Lighting:** one dramatic key + soft fill, subtle rim light on the metal, faint
  bloom on the LCD glow and amber accents. Cinematic, restrained.

## Copy rules
Factual and plainly stated — the specs and the story carry it. No marketing adjectives,
no jokes.

## Technical requirements
Native ES modules, no build step. Fully responsive (rework the exploded layout for
mobile — stack parts vertically, keep it legible). Respect `prefers-reduced-motion`
(disable scrub-scrubbing, present the parts statically). Handle WebGL detection with a
graceful message, window resize, and capped DPR. Smooth 60fps — throttle heavy work,
pause when the tab is hidden. Avoid generic cards, stock imagery, and glassmorphism.
Return complete, executable code and brief launch instructions.