Scroll-Driven Poster Terrain
The headline is ink first and terrain second. Its glyph raster is blurred into a heightfield; scrolling raises the altitude and turns the light across the contour bands. Edit the headline, the light angle or the altitude scale and the same field is rebuilt without an animation loop idling underneath.
How this is built
01 / measurement
One raster answers three questions
The poster samples the headline’s ink alpha, smooths it with separable box passes, and asks the result for a band index, two height gradients, and a Lambert-lit color. Nothing is simulated offscreen: every change you make is measured at the same boundary that paints the visible frame.
02 / motion
Scroll requests work; it does not lease the display
A passive scroll listener marks the field dirty. A single requestAnimationFrame services that mark, calls the shared metrics tick, and stops. Editing, dragging a range control, resizing, or returning to a visible tab follows the same path, so an idle poster does not burn frames to hold a fake frame rate.
03 / implementation note
Heavy on purpose, with a quieter route
The shipped Roboto Flex subset is loaded at maximum weight and rasterized on a bounded offscreen canvas; the display canvas is capped at device pixel ratio 2. With reduced motion, scroll no longer interpolates terrain: the IntersectionObserver swaps between 3 authored section states, while edits and controls still render one immediate frame. Touch input remains page scrolling because the canvas is only a backdrop.
The headline and both controls are saved to lab.poster-terrain.v1. An earlier build wrote poster-terrain:v1; that key is still read as a fallback and deliberately left in place, so rolling this route back finds the poster where the old build left it. Reset is the one action that clears both.