Motion

Video ind, scroll-styret produkt ud

Værktøjet gør én ting, som ingen af de andre gør: det tager en video og laver den om til noget, en hjemmeside kan bruge. Enten som en mindre video, eller som dét, der er hele pointen, en billedsekvens, hvor scroll-positionen bestemmer, hvilket billede der vises. Produktet drejer, når man scroller, og står stille, når man holder op.

Læg videoen ind, og værktøjet fortæller, hvad den er: længde, mål, billeder pr. sekund, antal billeder, codec og om der er lyd. Vælg et udsnit med de to skydere, vælg et forvalg, og kør. Bagefter scroller du resultatet igennem i vinduet, før du henter det.

Videoen bliver på din maskine. Den læses og skrives med browserens egen WebCodecs, som er den samme slags motor, komprimeringen bruger til billeder, og der er hverken en kø at vente i eller en fil, der skal sendes op og hjem igen. Til gengæld er det din maskine, der arbejder: en lang video i fuld opløsning tager den tid, den tager.

Billederne dækker hele tidslinjen

Ti sekunder ved 25 billeder i sekundet indeholder 250 billeder. Beder man om 10 billeder i sekundet, får man 100 billeder fordelt over de ti sekunder, og ikke de første hundrede. Det lyder selvfølgeligt og er den fejl, der oftest bliver lavet: en sekvens, hvor produktet drejer en fjerdedel og så står stille, er lavet af de første hundrede billeder. Tidspunkterne regnes derfor ud af tiden, t = start + i/fps, og varigheden er den samme bagefter.

Du kan også bede om et fast antal. Det fordeles jævnt fra første til sidste billede, begge ender med, og det er dét, en produktrotation skal bruge: 72 billeder er fem grader ad gangen hele vejen rundt.

Smart Frames

Fast frekvens behandler hele tidslinjen ens. Det er ærligt, og det er også spild: et produkt, der står stille i to sekunder og derefter drejer, får lige mange billeder til begge dele. Smart Frames ser videoen igennem først og lægger billederne, hvor der sker noget. På de otte sekunder af testvideoen blev 200 gennemsete billeder til 61, altså 70 procent færre filer, uden at bevægelsen blev en anden.

Der bliver ikke opfundet et eneste billede. Hvert billede i sekvensen er ét, videoen selv indeholder, hentet på sit eget tidspunkt, og det er med vilje: en model, der digtede mellembilleder, ville lave et produkt om, og det er præcis dét, huset ikke gør. Målingen er et lille gråt fingeraftryk pr. billede, og forskellen mellem to af dem er tallet, udvalget arbejder på.

Første og sidste billede er altid med, ellers hopper sekvensen i enderne. Der må aldrig gå længere end en fast afstand uden et billede, så en stillestående passage ikke bliver til et hop, og aldrig kortere end to nabobilleder, så en hurtig passage ikke fylder mappen med ens billeder. Tærsklen måles på indholdet selv, fordi et mørkt studieklip og en solbeskinnet optagelse har vidt forskellige tal for «meget bevægelse». Tre styrker: skånsom, balanceret og aggressiv.

Efter kørslen står regnskabet: hvor mange billeder gennemgangen så, hvor mange der blev valgt, og hvor mange procent der blev sparet, med ti søjler der viser, hvor billederne ligger hen over tidslinjen. Synes du, den hakker, så vælg fast frekvens igen. Det er det samme værktøj, og der er ikke noget, der går tabt ved at skifte.

Scroll-sandkassen

Under resultatet står en kasse, du kan scrolle i. Det er ikke en afspilningsknap, og det er med vilje: en scroll-styret animation har ingen hastighed af sig selv, den har den hastighed, brugerens finger har. Sandkassen scroller med den scroll-længde, du har valgt, i skrivebordsbredde eller mobilbredde, og den regner på præcis den samme formel som den afspiller, du får med i pakken.

Scroll-længden er, hvor langt der skal scrolles, målt i skærmhøjder: 300 vh er tre skærme. Udjævningen bestemmer, om billedet følger fingeren præcist eller glider blødt efter. Og lærredet kan klæbe fast, mens der scrolles, hvilket er dét, man plejer at ville have.

Pakken

Hent pakken, og du får en mappe med billederne i skrivebordsstørrelse, de samme i mobilstørrelse, en plakat, en reservevideo, en afspiller, et stilark, en eksempelside, et manifest og en vejledning. Den kan lægges på serveren, som den er, og eksempelsiden kan åbnes direkte fra mappen.

Afspilleren ved ingenting på forhånd. Antal billeder, navnemønster, mål, udgaver og scroll-indstillinger står i manifest.json, og afspilleren retter sig efter det. Derfor kan den samme fil køre en sekvens på tres billeder og en på tre hundrede, og en pakke, der køres igen med andre indstillinger, behøver ikke ny kode. Den tegner på ét lærred frem for hundredvis af img-elementer, henter en lille bølge af billeder omkring dét, der vises nu, viser plakaten imens, og står stille på første billede for den, der har slået bevægelse fra i sit styresystem.

Pakken kommer med koden til siden. INTEGRATION.md har den samme indlægning i ren html, i React og Next, i WordPress og i Shopify, med den her pakkes egne tal skrevet ind, plus cache-headers og en liste over det, der plejer at gå galt. CLAUDE.md er den samme opgave skrevet som et oplæg: giv den til Claude sammen med mappen, og lad den lægge det ind. Den siger også, hvad der ikke må ske, for eksempel at billederne bliver omdøbt eller antallet skrevet ind i koden, for så kan pakken ikke skiftes ud uden at nogen retter kode.

Videoen ved siden af

Der kan lægges en video i pakken. Den skrives af de samme billeder som sekvensen, med samme mål og samme varighed, i MP4 med H.264, hvor browseren kan skrive det, og ellers i WebM. Den er reserven til de steder, hvor en sekvens ikke passer, og den er også svaret, hvis det, du skulle bruge, bare var en mindre video.

Det, du skal vide

Kørslen lever i fanebladet. Lukker du siden midt i en kørsel, er den væk, og du må køre igen; til gengæld er der ikke noget, der ligger og fylder på en server bagefter. AVIF er det mindste format, men ikke alle browsere kan skrive det, og siger din nej, siger værktøjet det og foreslår WebP. Meget lange videoer og meget store mål er den ene ting, der kan få maskinen til at arbejde længe: et udsnit på fem til ti sekunder er dét, folk faktisk når at scrolle igennem.