How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Pin: the section is 1 + 7 screens tall. Its first screen stays fixed while the next 7 screens of scrolling play the sequence from the first frame to the last.
- Frames: drawn on a full-screen canvas, cropped like object-fit: cover and sharp on retina screens. The frame follows the scroll with a quick 0.15s catch-up, so fast flicks stay smooth. Every frame is preloaded, and the nearest one that has loaded is shown.
- Loop word: a 180px outlined uppercase word (2px stroke), repeated in a row behind the canvas at 35% down. It slides left forever (8s per loop). Over the first quarter of the film it drifts up and fades away.
- Beats: text blocks that live between two points of the film's progress (0 to 1). Each rises 30px and fades in over the first 20% of its window, and fades out over the last 20%. - Left blocks sit 8% from the left, right blocks 8% from the right (right-aligned), and they are vertically centred. - Lines are 40px heavy uppercase (line-height 1.05), with an optional 11px eyebrow above and a small note below. big blocks use 64px lines.
- Bar: a brand name on the left and a small pill on the right, 24px padding, over the top of the film.
- Under 1000px: lines are 26px (40px when big), blocks sit 6% in, and the loop word is 96px.
- Fallbacks: reduced motion still scrubs the frames but shows the loop word still and switches beats without the rise.