Six layers, one scroll, and a train

The recreation, live

scroll inside the frame · the train is bound to that scroll

One clip, two clocks

the most interesting thing about this recording

A parallax is scroll-driven. The timing motiscope reports for this clip — a 0.77s hold, then 1.45s of motion — describes the person who did the scrolling, not the design. Replay those seconds and you recreate the recording, not the website.

The train, in the source, is time-driven: it runs on a clock, at a speed that survives however fast you happened to scroll. So one clip carries two different kinds of number.

The train tracks your scroll

a scroll-through of the recreation · the train crosses and exits behind a tree, as in the source

Layer speeds

three of four estimators were confidently wrong

Each layer is a flat colour, so each layer is a binary mask. The vertical shift that minimises mask disagreement between two frames is that layer’s displacement.

The trap: layers enter the viewport during a scroll, so any statistic that depends on a layer’s visible extent — topmost row, centroid, a fixed viewport band — moves for reasons that have nothing to do with translation.

They were caught only because they disagreed by up to 6×. Restricting to the window where every layer is on screen (frames 97–134) and accumulating identical step counts, run at two resolutions:

A smooth gradient has no stable colour mask. Estimates ran −0.03 to 0.63, so we don’t quote one. Averaging them into 0.30 would have invented a fact.

In the recreation the sky and the far hills share one factor (0.30) — a design choice inside the uncertainty. They are the same pale mask, and the measurement could never separate them.

The viaduct

The deck is the sharpest rigid feature in the whole clip, so it was tracked directly against both foreground tree apexes:

bridge deck      4.69 px/frame  (resid 3.5)
left tree apex   5.88 px/frame  (resid 4.4)
right tree apex  5.82 px/frame  (resid 4.4)
  -> bridge parallax factor = 0.80x ± 0.04

Consistent within noise with the deep hills it sits in (0.86×), so it rides that layer — and the train, sitting on the deck, inherits that parallax for free.

The train, and the 100× error we nearly shipped

track the tail, never the nose

The train was missed entirely at first. It never appeared in a single curated keyframe: it is small, dark-on-dark, and rides a bridge that is off-screen for most of the clip, so it barely moves the motion-energy signal that chooses frames. It was found by diffing the band above the deck, aligned per-frame on the deck row — a localised bump marching from x=950 to x=1200 across frames 112–126.

Per-4-frame velocity estimates scatter from 1080 to 1800 px/s with no clean trend — that is measurement noise from the car gaps breaking the colour run, not an ease. Constant speed is within noise, so linear it is.

Terrain: traced, not approximated

and why a median filter cannot do it

The four hill ridgelines are traced out of the final frame, one y per column, into ridges.json.

Occluders — trees, bushes — always sit in front, which in a landscape means above. So the contamination is one-sided: it only ever pulls a ridge upward.

A median filter does not fix this. A tree crown spans 200 columns, and the median follows it — the first tracer read the ground at y=496, which was a tree. The terrain is the upper quantile of the raw trace over a wide window. Ask which way the contamination pushes, then pick a statistic robust in that direction.

The ground line is the one exception: it is almost entirely hidden behind foreground trees in the source, so it is derived from the purple ridge rather than traced.

The frames motiscope actually used

all 29 curated keyframes, in order, unedited · the train is in none of them

Verified, not asserted

ask the browser what it resolved — don’t re-measure your own pixels

A pixel-diff of the finished page reported a mismatch. It was measuring occlusion and the page background, not motion. So instead: scroll to 300px and read each layer’s on-screen position. A layer’s on-screen speed relative to the page is its parallax factor.

scrollY=200 (inside --pmax)     train: animation-name = none (it is pure geometry)
set_f=0.30  implied_f=0.300     train translateX = 656.0  (expect -60 + 3.58*200 = 656.0)
set_f=0.30  implied_f=0.300
set_f=0.72  implied_f=0.720     scrolling 300 -> 100: dx = -716.0  (the train reverses)
set_f=0.86  implied_f=0.860
set_f=0.97  implied_f=0.970
set_f=1.00  implied_f=1.000

Only the palette changed

a warm sunset became a cool dawn

The terrain, the viaduct, the train, the tree shapes and the depth order are the source’s.

What we chose, and what we got wrong

honest examples teach more than perfect ones

• The sky and far hills share a chosen factor, not a measured one — they were never separable.
• The vertical composition is ours. The traced land fills 93% of the canvas, so it is compressed toward the horizon (×0.78) to make room for sky. Ridge shapes and layer factors are untouched.
• We first called the sky bug a depth inversion. It was a rectangle with a top edge inside a sinking layer, and the clamp we added to hide it froze the parallax after 240 px. The sky is now the hero’s background and travel runs the full hero.
• Binding the train to scroll is a departure from the source, where it runs on a clock. The 3.58 ratio is measured; the binding is a decision.
• The ground line is derived from the purple ridge, not traced — it is hidden behind trees.
• Trees, bushes, tulips and the train’s car divisions are our own drawings, positioned to match the source. Only the terrain is traced.
• The train was missed on the first pass entirely. It took a user pointing at it.

Reproduce it

the whole chain, from clip to page

motiscope analyze parallax.mov --preset detailed        # -> report.md + curated frames
python3 generate.py > recreation.html                   # the build script, verbatim