Working document

Hero backgrounds

Eight directions for the front page. Six built and mounted, two cut. Each entry below records the concept, how it was made, its measured contrast and weight, and what each of three review passes changed.

Every background here runs with zero client-side JavaScript — CSS animation, animated inline SVG, or a bare <video autoplay muted loop playsinline>. All of them freeze to a static state underprefers-reduced-motion: reduce.

Imaging. No donor imaging appears anywhere in this set, and none was used to make it. The only real scan involved is the publicColorectal-Liver-Metastasescollection from The Cancer Imaging Archive (series CRLM-CT-1026), CC BY 4.0 — the same series the student tour already uses.

Recommendation

Ship The Traverse. It is the only background in the set that is the product rather than a picture about the product: a course director sees diagnostic cross-sectional imaging moving the way it moves in the viewer their students will use, before reading a word. Every other direction is a metaphor for the work; this one is the work, and it makes the “~1,700 slices” claim visible instead of asserted.

If the anatomical gift program would rather the public page carried no imaging at all, ship The Margin instead. It is the most restrained thing here, it costs nothing, and it says the one thing a stripped-down page can say: this does not need to sell itself.

Built

Direction 1 · Volumetric · dark field · single-axis motion

The Traverse →

A slow descent through a real axial CT stack. No metaphor: it is the thing students spend the year doing, and it makes the “~1,700 slices” stat visible instead of stated.

Motion: Descends and re-ascends one axial run, ~3 slices/sec, 37.5 s loop
Contrast: 8.55:1 worst (lede @ 1440)
Weight: webm 1.34 MB · mp4 1.52 MB · poster 34 KB

How it was made. 183-slice TCIA series decoded with pydicom, soft-tissue window at 40/420 Hounsfield units. The scanner table is removed by keeping only the largest connected body component per slice and feathering its margin, so the section dissolves into the field instead of sitting in a lit square. Five blended steps between adjacent slices give the dissolve. Encoded as a palindrome so the loop is seamless — which is also what scrolling a stack in a viewer actually looks like.

Pass 1 — legibility. Failed at every breakpoint: the lede fell to 2.99:1 and the stat numerals to 2.00:1 over the bright cross-section. Two fixes — the stat cards were translucent white over a bright CT passage, which lifted them into the same luminance band as their own text, so they became translucent dark; and the directional scrim was rebuilt with a heavier mid-band. Now 8.55:1 worst.
Pass 2 — restraint. Removed the video below 1024px rather than below 640px. Under the heavier narrow scrim the motion was barely legible anyway, so this drops ~1.4 MB and one moving element from every tablet without changing how the page looks.
Pass 3 — credibility. Kept, and recommended. It is the only background that is the product rather than a picture about the product.

Direction 2 · Geometric · light field · near-still

Three Planes →

Three orthogonal planes intersecting in mostly empty space. The three-plane capability took real engineering, and the near-isotropic geometry is what made it possible without scanning anyone twice.

Motion: Drifts −1.4° to +1.2° over 52 s, alternating. Never completes a rotation
Contrast: 6.72:1 worst (lede @ 1440)
Weight: ~1.4 KB inline SVG · no image request

How it was made. Inline SVG generated at build time. The basis vectors are the patient axes — ex left-right, ey anterior-posterior, ez cranio-caudal — so each plane is the span of two of them and the three gold intersection lines are exactly the axes. Nothing is drawn twice.

Pass 1 — legibility. The lede measured 4.38:1 at 360px, just under. Fixed by the narrow-viewport scrim rather than by anything specific to this piece.
Pass 2 — restraint. Removed the plane fills. Each plane carried a 2.8%-opacity navy wash that the strokes were already doing the work of; without it the piece is pure linework and reads as a drawing rather than a render.
Pass 3 — credibility. Kept. Of the light-field pieces this is the one closest to looking like a technology illustration, but it survives because the geometry is the actual claim, not a decoration of it.

Direction 3 · Data-as-image · light field · slow reveal

The Accretion →

The only direction that animates the argument rather than the artifact: “In September it is nearly empty. By spring it is the reason the whole thing exists.” A ledger filling up, not a dashboard.

Motion: Entries reveal top-down across 44 s, then the field clears and refills
Contrast: 6.92:1 worst (lede @ 1440)
Weight: ~2.9 KB inline SVG · no image request

How it was made. Inline SVG with build-time generated entries: a leader off the spine rule and a tick where a finding was filed. A mask opens top-down across the loop. The mask rect ships at full height, so a browser that will not animate SVG geometry shows the completed map rather than a blank field.

Pass 1 — legibility. Measured at 34 s into the loop — the densest state, not the emptiest, since that is what has to pass. The lede failed at 3.74:1 at 768px; fixed by the scrim rebuild.
Pass 2 — restraint. Removed the right-hand margin rule. Two vertical rules made it read as a table; one spine rule is enough to establish a ledger, and the marks carry the rest.
Pass 3 — credibility. Kept. It is the only piece that argues rather than illustrates, and it does it without inventing a single piece of clinical data.

Direction 6 · Data-derived vector · light field · parallax

Contour Field →

Density isolines pulled from the CT and drawn as topographic contours — a cross-section described as terrain. Real data, real transformation applied to it.

Motion: Three layers drift ±0.5% across 68 / 82 / 96 s
Contrast: 6.00:1 worst (lede @ 1440)
Weight: 67 KB across three SVGs (~22 KB gzipped)

How it was made. Genuine iso-HU contours through one axial slice: 28 levels from fat through soft tissue and enhanced parenchyma to bone, traced with marching squares, simplified, and split into three depth bands. Body-masked first so the scanner table generates no contours. Three standalone SVGs, so the bands can drift against each other while staying cacheable and out of the HTML.

Pass 1 — legibility. Worst performer at Pass 1: the lede measured 3.55:1 at 768px with contour lines running under the last two lines of text. Fixed by the scrim rebuild plus moving the isolines right, from 63% to 72% horizontal position.
Pass 2 — restraint. Removed the scale component from the third band's drift. A zoom layered on top of a translate is what makes parallax legible as a website effect rather than as breathing.
Pass 3 — credibility. Kept. It is the most obviously beautiful of the set, which made it the one to interrogate hardest — but it survives because the lines are real measurements, not a pattern that resembles measurement.

Direction 7 · Point cloud · dark field · drift

The Surface →

A bone surface implied by thousands of points rather than rendered as a solid. Structure reconstructed from measurement, not photographed.

Motion: Translates ±0.3% over 88 s at a fixed scale
Contrast: 10.06:1 worst (statnum @ 1440)
Weight: 110 KB WebP

How it was made. Bone-density voxels (>280 HU) from a 58-slice run of the thoracolumbar spine, eroded to a shell so the cloud describes a surface rather than filling a solid, then projected obliquely. Each point is jittered inside its own voxel — without that the 1.5 mm slice pitch quantises every point onto a row and the whole thing renders as horizontal scanlines. Faded at both ends of the sub-volume so it continues past the frame instead of stopping on a cut. Fragment scale only; this series contains no skull.

Pass 1 — legibility. The lede failed hard at 768px — 2.47:1 — with the densest part of the cloud directly behind it. Fixed by the scrim rebuild and by moving the cloud right, from 56% to 68%. A later re-measure appeared to show the eyebrow at 1.00:1; that turned out to be a harness fault rather than a real failure — the browser client only applies a viewport when it creates a page, so a reused page name measured boxes at one size against a screenshot taken at another. Re-verified with a viewport assertion: 12.56:1.
Pass 2 — restraint. Removed the zoom from the drift, leaving only a translate. A slowly growing point cloud reads as a reveal; a slowly sliding one reads as still.
Pass 3 — credibility. Kept, but ranked last of the six. A point cloud is close to a graphics demonstration, and it is the piece most open to the charge of showing off. It stays because it is genuinely derived and deliberately never resolves into a whole skeleton.

Known limitation. Portrait framing was wrong on first release and is fixed. A tall narrow hero makes `cover` scale this 16:9 asset by height, so the viewport shows only about a fifth of its width, and the narrow crop was inherited from Contour Field at 58% — which landed on the empty left of the frame and made the piece read as a blank dark field on a phone. It is now framed at 70%, on the cloud itself. There is no vertical control at this aspect, since the image ends up exactly container-height. Even framed correctly, a phone sees a slice of a wide composition rather than the whole reconstruction; that is inherent to the asset, and a portrait-composed render would serve small screens better.

Direction 8 · Typographic / textural · light field · static

The Margin →

Almost nothing. A pale ruled field, one gold hairline, one small mark placed in the lower margin. A page that does not need to decorate itself — and the emptiest chart on day one, waiting to be written into.

Motion: None, by design
Contrast: 6.95:1 worst (lede @ 1440)
Weight: 0 KB · no requests

How it was made. Pure CSS. The ruling is a repeating-linear-gradient; the rule and the mark are two elements. No image request and no bytes beyond the stylesheet.

Pass 1 — legibility. The only background that passed at every breakpoint on the first measurement, with no change required.
Pass 2 — restraint. Removed the short rule beside the corner mark, leaving a single small square. Two elements in the lower margin was a composition; one is a mark.
Pass 3 — credibility. Kept. Judged as a course director, this is the piece least likely to read as a pitch — but see the recommendation for why it is not the one to ship.

Cut

Two of the eight are not shipped. Neither was quietly dropped to make the count easier — the reasons are below, and one of them was built in full first.

Direction 4 · Engraved illustration · light field · essentially static

The Plate

A modern anatomical plate in the Vesalius lineage — fine line engraving, aged paper, generous margins. Institutionally reassuring in a way technology imagery cannot be.

Why it was cut. Cut before build, for want of a tool. This direction needs genuine engraved anatomical illustration, and no image-generation tool was reachable in this environment. The brief is explicit that anatomically incorrect engraving in front of anatomy faculty is worse than no image at all, so approximating an engraving with filters or vector hatching would have failed the direction on its own terms. Everything else here is built from the real scan or from geometry, where correctness is verifiable.

Direction 5 · Density projection · dark field · drift

Attenuation

The physics itself: light passing through varying density, before it is an image. What a radiograph is, rendered as a soft luminous field.

Why it was cut. Built, measured, and then cut at Pass 3. It passed contrast comfortably, but only because the scrim needed to hold AA over a dark field left it reading as a dark grey gradient with faint mottling. The direction sets its own failure test — “if you cannot tell it from a CSS gradient, it has failed” — and at the scrim level the page requires, you cannot. It was also the piece that most resembled a generic dark SaaS hero, which is the exact failure the brief names. Shipping it would have been shipping a gradient with a good story attached.

How contrast was measured

Not by eye. For each background, at 360, 768 and 1440 px, the page is rendered, the glyphs are hidden while everything behind them stays, and the background is screenshotted. Tight per-line boxes come from the text nodes rather than from the block elements — a <p> is as wide as its container even when its text is not, and measuring the block box samples empty background and flatters the result. Every pixel under every line is then compared against that element’s computed colour, and the worst pixel is the reported ratio.

AA is 4.5:1 for body text and 3:1 for large text. The h1 renders above 24 px at every breakpoint, so it is judged at 3:1; everything else at 4.5:1. The reveal-style backgrounds are sampled at their densest moment, not their emptiest.

First measurement: 11 real failures across five backgrounds, the worst being 2.00:1 on the stat numerals over The Traverse. After Pass 1: none.