scroll-videolisted

# Scroll video A scrubbed clip is the most convincing scroll technique there is, and the easiest to ship broken, because it works perfectly on the machine that built it. ## The shape One clip per beat, named for the beat. Not one long film — a single video couples every beat to every other, and a slow load anywhere stalls everything. ```html <video id="beat-case" muted playsinline preload="none" role="img" aria-label="The case closing around the earbuds" poster="/case-poster.jpg"></video> ``` Every attribute is doing work. `muted` and `playsinline` are what allow programmatic control without a user gesture. `preload="none"` keeps it off the critical path. `role="img"` with an `aria-label` announces the *subject* rather than "video". `poster` is the frame the beat falls back to, and it has to be a frame that carries the beat alone. ## Attach the source when it comes into view, once ```js const io = new IntersectionObserver(([e]) => { if (!e.isIntersecting || video.dataset.loaded) return; video.dataset.loaded = '1'; video.src = srcForBreakpoint(); video.load(); io.disconnect(); }, { rootMargin: '200px' }); io.observe(video); ``` Give it a deadline. Apple's own players carry a three-second load timeout; past it the poster simply stays. Build that timer before the happy path, because it is what most users on a bad connection actually see. ## Map scroll to time, and clamp ```js const p = Math.min(1, Math.max(0, -rect.top / (rect.height - innerHeig