MRI Machine Demo

Oneshot - build in one go >
Build "Inside an MRI": an interactive, explorable 3D model of an MRI scanner that shows how it really works, from the superconducting magnet down to the spinning protons and back out to the finished picture. It should be the best explainer of MRI on the web: beautiful enough to stop someone scrolling, accurate enough that a radiographer would nod along.

Write it as an expert in MRI physics and a top creative technologist. Every label, number and behaviour must be correct. Where something is simplified or slowed down, say so on screen.

## Technical rules

- ONE self-contained HTML file: HTML, CSS and JavaScript together. No build step.
- three.js as ES modules from jsDelivr with an import map, pinned to an exact version (e.g. `https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js`, addons from `.../examples/jsm/`). No other network calls. All geometry, images and sound are generated in code: no model files, no textures, no audio files, no real patient scans.
- It runs inside a sandboxed iframe on a gallery site. The frame can be 0×0 for a moment at load: size the renderer and every canvas from a ResizeObserver and never throw on a zero size. No alert(), no top-level navigation.
- Fill the window. Work from a 360px phone (controls collapse into a bottom sheet) up to a large desktop. Mouse, touch and keyboard.
- Wrap all localStorage use in try/catch; it only remembers small things like mute and last view.
- Smooth on a mid-range laptop and phone: cap devicePixelRatio at 2, use instanced meshes for particles, pause rendering when the tab is hidden, respect prefers-reduced-motion (no swooping camera, instant cuts).
- No placeholders, no TODOs, no "add more here". Every control does something.

## Look and feel

Gallery-minimal, black and white, with exactly ONE accent colour (a vivid signal orange, around #FF5A1F) reserved for energy and signal: the RF pulse, the net magnetisation arrow, the received signal trace, whichever coil is active. Everything else is greyscale.

- Follow the system light/dark setting. Light: a white gallery space, the scanner in white and pale greys like a real one, soft shadows. Dark: near black, the scanner in pale greys with rim light. Both must look deliberate, not inverted.
- Typography: Inter (Google Fonts) or a system grotesk. Tiny uppercase labels with wide tracking, tabular numbers on readouts, square corners, hairline 1px borders.
- Interface floats over the full-bleed 3D scene: a small "INSIDE AN MRI" wordmark top left; a compact control panel top right; live readout tiles bottom left; a one-line caption strip along the bottom that narrates what is happening right now in plain English.
- Labels on the 3D model are thin leader lines to tiny uppercase names. Tap or hover a part for a short card on what it does, with one real number.

## Three views (switch with chips or keys 1 / 2 / 3, with a smooth camera transition between them)

### 1. MACHINE: the scanner itself

Model a modern 1.5 T closed-bore scanner at believable scale (about 2 m tall, 1.7 m long, 70 cm bore) in the shielded scan room, with the patient table and a person lying head-first with a head coil. Build it from real nested layers, outermost to innermost:

1. Cosmetic cover.
2. Vacuum vessel (outer cryostat shell) with the cold head / cryocooler on top and the quench pipe rising through the ceiling.
3. Thermal radiation shield.
4. Helium vessel holding the main magnet: several niobium-titanium superconducting coil packs at about 4.2 K, plus larger-radius active shield coils that cancel the field outside.
5. Gradient coil cylinder, with its three sets shown distinctly: Z (a Maxwell-style pair of loops) and X / Y ("fingerprint" saddle coils, rotated 90° to each other).
6. RF body coil (a birdcage: two end rings joined by straight rungs).
7. Bore liner, then the patient and the head coil.

Display modes: WHOLE, CUTAWAY (a clean quarter section so every layer reads as a ring) and EXPLODED (layers slide apart along the bore axis, staggered, with labels). Toggle FIELD LINES: B0 runs along the bore; show the fringe field and the 0.5 mT ("5 gauss") safety line drawn on the floor.

Key facts to surface:
- The magnet is ALWAYS on, even when no one is being scanned. Switching off the power does not switch off the field.
- 1.5 T is about 30,000 times the Earth's field.
- The coil wire is superconducting, so once ramped up the current flows with no power supply.
- The banging comes from the gradient coils. Fast-switching currents in a strong field produce Lorentz forces that flex the coils like a loudspeaker: up to about 110 dB, which is why patients wear ear protection.

### 2. SPINS: inside one voxel

Dive the camera into the patient's head and into a single voxel (a smooth, spectacular zoom). Show a few hundred hydrogen nuclei as small spinning tops.

- Magnet off: random orientations.
- Magnet on: each precesses around B0. Their phases stay random, and only a tiny excess (a few per million) leans with the field. Exaggerate that excess visibly and say so in the caption. Draw the resulting net magnetisation M as a bold accent-coloured arrow.
- Larmor frequency f = 42.58 MHz/T × B0: 63.87 MHz at 1.5 T, 127.7 MHz at 3 T. Animation is slowed by a stated factor (compute it and show it, e.g. "slowed ~60,000,000×").
- 90° RF PULSE: M tips into the transverse plane and sweeps around. The receive coil picks this up: an oscilloscope trace (in accent) shows the free induction decay.
- Relaxation, simulated with the Bloch equations: spins fan out and dephase (T2 / T2*), so the transverse signal decays while Mz regrows (T1). Plot Mz(t) and Mxy(t) live.
- 180° PULSE: the fan refocuses and an echo appears on the trace (the spin echo; a runners-on-a-track analogy in the caption is welcome).
- ROTATING FRAME toggle: "ride along at the Larmor frequency" so the precession freezes and the tipping becomes easy to see.
- TISSUE picker with approximate 1.5 T values, labelled approximate:
  - fat: T1 ≈ 260 ms, T2 ≈ 80 ms
  - white matter: T1 ≈ 790 ms, T2 ≈ 90 ms
  - grey matter: T1 ≈ 920 ms, T2 ≈ 100 ms
  - CSF: T1 ≈ 4000 ms, T2 ≈ 2000 ms

  Overlay the curves of two tissues, with TR and TE markers, so you can SEE why the choice of TR and TE creates contrast.

### 3. IMAGE: from echoes to a picture

Side by side, k-space and the image. This must be REAL: compute it with a radix-2 FFT on typed arrays, never faked.

- A synthetic axial head slice generated in code at 256×256: scalp fat, dark cortical bone, bright marrow, CSF in folded sulci and butterfly-shaped lateral ventricles, a folded grey-matter cortical ribbon (gyri from smooth noise), white matter, deep grey nuclei. Store it as tissue maps (proton density, T1, T2), not as a picture. Also offer the classic Shepp–Logan phantom as a second subject.
- Image intensity comes from the signal equation:
  - spin echo: S = PD · (1 − e^(−TR/T1)) · e^(−TE/T2)
  - FLAIR (inversion recovery): S = PD · |1 − 2e^(−TI/T1) + e^(−TR/T1)| · e^(−TE/T2), with TI chosen to null CSF
- Presets plus free TR / TE / TI sliders:
  - T1-weighted: TR 500 / TE 15 (CSF dark, fat bright)
  - T2-weighted: TR 4000 / TE 100 (CSF bright)
  - PD: TR 3000 / TE 15
  - FLAIR: TR 9000 / TI 2500 / TE 120 (CSF dark)

  The image and the tissue contrast change live as you drag.
- START SCAN fills k-space one phase-encode line per TR and reconstructs as it goes (throttle the reconstruction so it stays smooth), so the picture emerges blurry-then-sharp. Explain it simply: the centre of k-space holds contrast, the edges hold fine detail.
- Readouts: scan time = TR × phase-encode lines × averages (e.g. 500 ms × 256 = 2 min 8 s), lines filled, SNR. Show the scan running 3T vs 1.5T (about 2× SNR) and averages (SNR ∝ √averages, time ∝ averages). Add realistic noise so this is visible.
- Play with k-space: brush on it to erase or keep regions, with one-click "centre only" (blurry but correct contrast) and "edges only" (just outlines).
- Artefacts, each a toggle that produces the real effect through the real maths:
  - PATIENT MOVED: random phase errors on some lines create ghosts along the phase-encode direction.
  - SPIKE: one bad k-space point creates a herringbone stripe pattern.
  - FOV TOO SMALL: aliasing / wrap-around.
  - LINE ORDER: linear vs centric.
- A scrolling PULSE SEQUENCE DIAGRAM (RF, slice-select, phase-encode, frequency-encode, signal rows) runs in sync with the scan.

## The scan, end to end: the signature moment

START SCAN in the Machine view runs the whole thing at once:

- the table slides the patient into the bore;
- the RF body coil glows in accent on each pulse;
- the X, Y and Z gradient coils pulse and visibly flex, each lit as it fires, in step with the sequence diagram;
- a picture-in-picture panel shows k-space filling and the head image appearing.

The sound is synthesised from the gradient waveforms themselves. Take the rate of change of each axis's gradient current, drive resonant filters standing in for the coil's mechanical modes (roughly 500 to 1500 Hz), and add a low hum from the cold head's helium pump. Spin echo thumps rhythmically; a fast EPI sequence (offer it as a choice) screams as a high-pitched buzz.

Sound is OFF until the user turns it on (browsers require a gesture anyway). It is capped at a comfortable volume, with a note that the real thing reaches about 110 dB. The Sound readout shows the real loudness level.

## Scenarios (chips in the control panel)

- IDLE: the magnet humming, the cold head ticking, a caption reminding you the field is still on.
- SCAN: as above.
- QUENCH: a guarded emergency-rundown button with a cover that flips up. The superconductor goes resistive, the liquid helium boils (each litre becomes roughly 700 litres of gas), and a white plume vents up the quench pipe and out of the roof. Field and helium readouts fall over about 20–30 seconds, then the magnet sits dead. The caption explains that this protects the magnet, but costs a lot of helium and days to weeks of downtime. A RESET button restores everything.
- METAL IN THE ROOM: a steel oxygen cylinder (no people in this scene) that you drag across the room. A live readout shows the pull as a multiple of its own weight. The force depends on the field's spatial gradient, so it is negligible at the door and rises steeply near the bore entrance. Past the threshold it is yanked off its trolley and slams into the bore. Show the safety zones and the 5-gauss line on the floor. The caption: this is why everything is screened before entering. RESET restores everything.

## Controls and readouts

**Control panel:**
- VIEW: Machine / Spins / Image
- SCENARIO: Idle / Scan / Quench / Metal
- DISPLAY: Whole / Cutaway / Exploded
- Field strength: 1.5 T / 3 T
- Sequence: T1 / T2 / PD / FLAIR / EPI
- Play / pause and speed
- Sound toggle
- "?" opens an About panel: how to use; "Simplified for teaching. Timings slowed as stated. The head is synthetic, not a real scan. Not medical advice."

**Readout tiles (live, tabular numbers):**
- Field (T)
- Larmor (MHz)
- Helium (K and fill %)
- Sound (dB)
- Scan time
- k-space filled (%)

**Keys:** 1 / 2 / 3 switch views, Space starts or pauses the scan, E explodes, C cutaway, F field lines, M mute, T tour, R resets.

**TOUR button:** an automatic guided tour of about 90 seconds through all three views and one scenario, with the caption strip narrating each step. It must look great to screen-record. Any interaction stops it.

## First impression

On load, the scanner in CUTAWAY, slowly turning, softly lit, faint field lines breathing, and the caption "The magnet is always on." Show two clear buttons: TAKE THE TOUR and START SCAN. Within two seconds of opening, it should look like a museum piece.

## Output

Think through the architecture briefly first. Then write the complete file, from `<!doctype html>` to `</html>`, with nothing omitted. If you must trade scope, protect in this order:

1. the end-to-end scan moment;
2. the real k-space ↔ image maths;
3. the spins view;
4. the scenarios;
5. the tour.