An opening that hands over to the product

Everything runs off one variable. A component that renders nothing subscribes to scroll and resize, throttled by an animation frame, and writes a single number between zero and one onto the section. The CSS interpolates the rest.

The discipline inside that frame matters more than the idea: one read, then two writes, and nothing in between. A read that follows a write forces a layout recalculation in the middle of the frame, and that is what turns a scroll into a stutter. Nothing crosses React — a state update per frame would mean sixty renders a second for a value CSS interpolates on its own.

#No zoom, ever

The window measures exactly the same width at the first and the last pixel of the run — 893 px at 1440, 1,184 at 1920, 353 at 375. Only the abscissa moves. An enlarged screenshot goes soft, and a product that grows under the eye is an effect rather than a demonstration.

#Fourteen paths, not one

Each mandate carries its own departure delay, heading and arc height, all derived from its rank rather than drawn at random — a random draw at render would diverge between server and client. The arc itself is a sine: at mid-flight the owl is at the top of its curve, at both ends it is on the line. That is what separates a flight from a slide.

#Three compositions were measured and rejected

• An arc of fifteen faces around the statement put six of them on the title at 1440 by 900.
• A lower band put three of them on the call to action.
• A centred statement left 430 px of text sitting on the application screenshot.

The host is not in the band. It is the brand mark, and it holds the centre of the block. That is the legible hierarchy: one face large, fourteen around it.