Depth map scroll

Build an editorial scroll section (a small gold eyebrow, a large serif heading with an italic gold last word, a framed painting, and a quiet italic caption on a near-black green ground) where the painting is a stack of depth layers rendered in raw WebGL2. Prepare the artwork as hand-cut layers (sky, architecture, figure, a foreground hand holding a glass), each a premultiplied RGBA colour texture plus its own grayscale depth map, and give every layer a depth band [lo, hi] that remaps its raw 0–1 depth into the scene's shared range, so draw order and depth placement stay separate decisions. Render each layer as a 160×160 grid mesh displaced in the vertex shader: placed = pow(lo + raw·(hi − lo), gamma), z = placed − focus, shift the vertex by the camera offset times z, and scale it by 1 + z·dolly for perspective; composite back to front with ONE, ONE_MINUS_SRC_ALPHA. Put the painting behind a rounded window: an absolutely positioned div with a 1px gold hairline, a 9px gap, and a second faint gold ring as box-shadows, whose rect the renderer reads every frame; cover-fit the painting to that rect and clip every layer except the foreground hand to it with a rounded-rectangle SDF in the fragment shader, so the hand and glass break out of the frame. Drive the reveal from scroll: progress runs from the stage's top at 70% of the viewport to 5%, smoothstepped; with it the window widens from 78% to 86% of the stage and grows from 54 to 64 container-width units tall, the scene zooms 5.5%, perspective builds from a quarter to full, and the hand scales from 88% to 110% with a small lift so the reveal reads as a reach. Across the section's whole travel, tilt the camera vertically and swell the parallax amplitude with sin(progress·π) so depth blooms mid-scroll. Let the pointer steer the camera while it is over the art, and carry a candle: a warm lamp hovering just in front of the scene whose light falls off in 3D with each fragment's depth, lights a wrapped-diffuse relief normal taken from the depth map's neighbours plus a small specular glint, lifts the paint multiplicatively with a soft cap (never fogging it), dims the rest of the room slightly while it is up, and uses three gains and falloffs (tight on the glass, broad on the background), each lamp parallaxed into its layer's plane. Scale only the sky up by exactly what its worst-case motion can expose so edges never show. Damp every input frame-rate independently, fade the scene in once textures load, reveal the heading letter by letter (a 42% rise plus opacity, 24ms stagger, expo-out, when it crosses 72% of the viewport, then un-split back to plain text, and faded out and re-armed whenever it is scrolled back below that line, so it plays again on the way up), freeze the camera, reveal, and lamp under reduced motion, and fall back to a flat image without WebGL2. Pad the section with half a viewport of empty space above and below. Expose it all in a control panel: the scroll ranges, window sizes, zoom and reach; amplitude, bloom, tilt, pointer strength, dolly, focus, gamma, overscan, damping; the lamp and its three groups with a colour; tint, vignette, chromatic aberration, and grain; a folder per layer with visibility, its band, and a depth-view toggle that draws that layer's raw depth; the copy; and presets from candlelit to a flat gallery framing.