The finale · Wave 4, Second Person
THRESHOLD is the hundredth and final site of the Generative Assets run. A tall dark doorway stands in a field of dawn light and stays shut — until you lean toward it. It is the closing statement of the whole collection: the page has no engine but the visitor.
Wave 4 sites are inert until the viewer drives them. For the finale, the driver is the oldest metaphor there is: a door you walk through. Pointer proximity and downward scroll are blended into a single approach value; that one number swings the leaf, brightens the light spilling from beyond, and lifts a warm chord. Cross it and the page turns to address you directly — thanking you, by the second person, for walking all one hundred — then opens onto the collection and the invitation to commission work from Sapience Analytics.
Dark leaf against a field of light, so the whole picture is a silhouette waiting to open. Warm brass is reserved strictly for lines and marks — the frame, the keystone numeral, the ajar meter — while text runs on a dedicated dark ink so nothing small ever sits on the accent (the contrast lesson from earlier waves).
Fraunces carries every voice that matters — the wordmark, the door's invitation, and the valedictory address beyond it — set in its light italic at a display optical size for a soft, literary, slightly old-world grandeur fit for a last page. Inter handles the quiet mechanics: the ajar readout, the notes, the commission details.
The doorway is CSS-3D, not an image: an arched transom (a fanlight built from border-radius and a brass mullion), a jamb-bordered aperture, and a leaf hinged on its left edge with transform-origin:left center. A single custom property, --open (0 to 1), is written to the document each frame; CSS calc() turns it into everything at once — the leaf's rotateY (up to −84°), the opacity of the light behind it, the glow of the keystone numeral C (one hundred, in Roman), the seam of light down the opening edge, and the drifting motes in the beam.
That --open value is clamp(baseline × 0.9 + proximity × 0.4). Baseline is scroll progress through a 240vh track that pins the stage; proximity is one minus the cursor's distance to the door centre over a viewport-scaled radius, eased so the leaf breathes toward your hand and settles when it leaves. Both drivers are real, and either alone can open it — touch and keyboard reach the same place through scroll and a Step through button.
Sound is a WebAudio drone: five oscillators tuned to a warm F-major stack (root, fifth, octave, major third, twelfth), slightly detuned for beating, through a low-pass filter. Master gain and cutoff both rise with --open squared, so the chord opens in step with the light. It arms on the first gesture (autoplay policy) and every value is clamped and NaN-guarded before it touches an audio param. Crossing the threshold — opened wide and scrolled to it — latches a light flood, blooms the chord, and reveals the closing address, which is plain document flow and fully reachable with JavaScript disabled.
Screenshots caught two real defects. First, on a wide viewport the door was tall enough to push its arched top into the headline — fixed by shrinking it (a single --dw unit drives transom, aperture, sill and keystone), lowering it a touch, and tightening the invitation to two clean lines above the frame. Second — the important one — the light beyond the door rendered as dead grey: the aperture's own dark background was occluding the glow plane that sits behind it in 3D, so I moved the backstop deeper than the glow and let real warmth pour through when the leaf swings. Also split the accent into --brass (lines) and --brass-ink (text) so the ajar label and eyebrows clear contrast on the dawn field, and reflowed the mobile nav onto one line.
Refined the signature payoff. The keystone numeral C — one hundred — glows brighter as you approach, a second-read detail most visitors only notice once the door is lit. Crossing the threshold became a real event rather than a state flip: a timed light flood, an audio bloom, and a dolly that pushes the whole frame toward you and past the camera, so you feel yourself walk through it. The Step through button carries hysteresis so it can't flicker at the open/shut boundary, and the leaf eases toward the cursor and relaxes back the moment the pointer leaves the window.
Verified 375px in the browser: the --dw clamp and column-stacked afters keep the door and copy inside the viewport, and the one over-wide element (the ground light-pool) is clipped by the stage, so scrollWidth stays exactly 375. Reduced-motion rests the door ajar at a settled pose, disables the flood, dolly, motes and audio, syncs the ajar readout to the resting value, and shows the whole address immediately. Confirmed the closing message and both commission links are reachable with JS off (a no-js guard leaves the door ajar and never hides the beyond section); added an IntersectionObserver reveal with a four-second fail-safe, paused the rAF loop and ducked the chord on visibilitychange, and gave focus-visible rings and a skip link. Chanel rule: cut the radiant sunburst's perpetual rotation down to a still halo — the least-visible ornament was also an always-on animation, and the light is more disciplined without it.
--open value drives the leaf, light, sound and marks in lockstep.