Cinematic Scroll · 13
← Back to the catalogueCinematicScroll
Six shots in one landscape. The camera, the hour, the fog and the light are all read off your scroll position every frame — there is no video here and no photograph either. Every ridge is a sum of sines drawn by hand, sixty times a second.
Scroll to move the camera · 1–4 change the hour · H folds the dock
One number decideswhere you stand.
The whole reel is driven by a single scalar: how far the playhead has travelled through the document, in scene units. Six shots, five viewports of travel, one number. Everything you see — the camera's height, its lens, its dolly, the thickness of the haze and the elevation of the sun — is an interpolation between the two shots either side of that number.
That is the whole trick, and it is not a trick about graphics. It is a trick about cost: a scroll-driven page that re-measures twenty elements per frame is a page that stutters on a phone, and a page that stutters on a phone is a page nobody believes was built by someone who ships pages for a living.
The type is wipedby its own progress.
Each line of each heading is clipped by a rectangle whose width is a
function of that shot's scroll progress. No IntersectionObserver,
no .is-visible class, no transition with a duration.
The mask is the progress, so it scrubs backwards the
moment you scroll up — which a one-shot class can never do, and which
is the difference between a page that feels physical and a page that
feels like a slideshow.
The three windows are deliberately offset. The second line arrives while the first is still travelling and the paragraphs trail both, which is what turns a heading into a piece of choreography instead of a heading that fades in.
Seven ridges,one parallax ladder.
The landscape is seven silhouette bands at seven depths. Each band is a sum of four sines at different frequencies and amplitudes, sampled every six pixels across the frame, and each one moves at its own fraction of the camera's dolly. Nothing is textured and nothing is loaded: the whole range is a function evaluated a few thousand times per frame.
In front of them sit two hundred and sixty reed strokes at 1.35× camera travel, which is the cheapest depth cue there is and the one the eye reads fastest. Move the dock's Dolly knob and watch the ladder separate — the near reeds cross the far ridges in a way that no amount of shading would have earned.
Four hours,four palettes.
A look on this page is seven numbers: two sky stops, the sun's colour
and its altitude, two ridge colours, the haze, and the exposure. That
is the entire look system, and it is why the four chips in the dock
are not four filter values — switching look re-seeds the
sky gradient, moves the disc, restacks the ridges and re-tints the
grain, and the frame changes colour in the place you are looking at.
It settles,it does not stop.
The last shot is a hold: the camera comes to rest with the sun clear of the ridge and the haze at full strength, and the page hands you the brief. Nothing resets, nothing loops back to the top, and the scroll position is still yours — which is the behaviour a reader expects from a piece that behaves like a film rather than like a carousel.
If you would rather see the numbers, the dock has them: the frame time, the shot index, the playhead, the resolved drawing-buffer size and the running frame count, all read from the same functions that draw the frame rather than typed into the labels.
Cinematic Scroll — the catalogue block
- Technique
- Scroll-driven camera rig on a Canvas2D procedural landscape, with CSS
clip-pathmasks driven from the same progress value - What it does
- Six pinned shots over one continuous world. Scrolling sets the camera height, lens, dolly and roll; the hour; the fog density; the sun's altitude and size. Nothing is a recording and there is no second scene to cut to — the transitions are interpolations of one parametric landscape, so there is no seam to hide.
- Live demo
- The four look chips in the dock change the rendered pixels immediately, in the frame you are looking at. The three knobs change the dolly, the haze and the grain; Hold stops the render loop and keeps the last frame on screen. —
- What it's good for
- Brand films that have to live on a web page · launch stories · award-site openers · anything with a sequence and no footage budget
- Combines with
- Type choreography · scroll-linked WebGL passes · audio scrubbing · a real film cut in at shot three
- Complexity
- Advanced — one scalar of state, one interpolated parameter set, seven silhouette layers, four looks
- Performance
- What is rendered: one 2D canvas at up to 1.6 M pixels of backing store, seven polyline ridges, 260 reed strokes, one radial sun, six haze bands and a tiled grain pass. What degrades: the drawing buffer is capped by pixel count rather than by DPR, and the grain pass is skipped on frames where the previous frame ran long — so a slow machine loses the film grain before it loses the landscape. Frame rate is reported in the dock and is never claimed here. —