Making time
visible.

01 · Concept

The page is the tree

The Long Stand treats vertical scroll as physical descent. The opening begins in a luminous, wind-broken crown; each section moves lower through epiphyte shelves, a cool fog band, the cross-section, old fire wounds, and finally the grove floor. A fixed 311-foot gauge translates page progress into height. Every trunk, shaft, contour, scar, and ring is drawn by CSS, SVG, or canvas.

The narrative hinges on a deliberate collision of human and arboreal time. In the ring chamber, Rome falls as a passing annotation while the sequoia continues outward. That reversal—history becoming a tiny mark inside a living body—is the emotional center of the piece.

02 · Signature system

How the ring count works

The long .ring-vault section in index.html contains a sticky stage. In main.js, updateScroll() converts its scroll distance into a normalized value from bark to pith. selectRingEvent() chooses the nearest dated chapter; scrollToRing() gives the 5 milestone buttons an exact keyboard-accessible destination.

drawRings() paints 264 noisy contours on #ringCanvas. Trigonometric offsets prevent mechanical circles; darker bands encode drought, radial rays expose wood anatomy, and asymmetric charcoal wedges gain warm closure rims. Scroll changes the highlighted radius and camera scale, so the archive appears to travel around the reader.

03 · Supporting ecology

Scars, canopy, and grove

The canopy combines clipped gradients, bark columns, fog banks, and skewed gold shafts. Fire specimens use irregular CSS masks and inset charcoal shadows, while small ledgers quantify cambium survival and closure time. The interactive good-fire chamber transforms one CSS forest through flame, ash, light, and bark states; setFireStage() keeps its pressed controls, field measurements, live copy, URL query, and visual phase synchronized.

The grove map is inline SVG—Bézier contours, trail, creek, fog ellipses, and tree symbols—with a matching HTML index for legible phone selection. setActiveTree() synchronizes both controls and the field record.

Motion stays event-driven. Intersection Observer reveals notes once; painting is batched through requestAnimationFrame; rendering pauses while hidden. Reduced-motion keeps the section readable but fixes the camera scale, removing the simulated plunge.