# Opgave: læg en scroll-styret billedsekvens ind på siden

Giv den her fil til Claude sammen med mappen, eller peg på begge dele i en
prompt. Alt, opgaven kræver, står her.

## Det, du har fået

Mappen `primo-pakke/` fra SqueezeIT Motion. Den indeholder:

- `frames-desktop/`, `frames-mobile/`: billedsekvensen, 94 filer pr. udgave,
  navngivet efter mønsteret `frame-{index:4}.webp` (`{index:N}` er
  løbenummeret med nul foran, ét-baseret).
- `fallback/`: plakat.
- `scroll-animation.js`: afspilleren. Ren javascript, ingen afhængigheder,
  ingen byggetrin. Den finder selv alle `[data-motion]` i dokumentet.
- `scroll-animation.css`: det mindst mulige stilark. Klæbende lærred,
  midterstilling og en regel for `prefers-reduced-motion`.
- `manifest.json`: kontrakten. Antal billeder, navnemønster, filtype, mål,
  udgaver og scroll-indstillinger. Afspilleren læser den og har intet skrevet
  ind på forhånd.

## Sådan virker den

Scroll-positionen regnes om til et tal mellem 0 og 1, og tallet peger på ét
billede: `index = round(progress × (frameCount − 1))`. Billederne tegnes på ét
lærred i `requestAnimationFrame`, ikke som 94 img-elementer,
og der hentes en lille bølge omkring det, der vises nu.

## Opgaven

1. Læg mappen, hvor siden serverer statiske filer fra. Bevar mappe- og
   filnavne præcis som de er.
2. Hent `scroll-animation.css` og `scroll-animation.js` på den side, hvor
   animationen skal stå. Scriptet skal køre, efter elementet findes i
   dokumentet (`defer`, bunden af `<body>`, eller i en effekt i et framework).
3. Sæt `<div data-motion="STI/TIL/MAPPEN/"></div>` ind, hvor animationen skal
   være. Stien skal pege på mappen med `manifest.json` og slutte med `/`.
4. Giv elementet en label: `data-motion-label="primo-pakke"`. Den bliver
   lærredets `aria-label`.
5. Sæt cache-headers: billederne uforanderlige og længe (`max-age=31536000,
   immutable`), `manifest.json` kort (`max-age=300`).
6. Kontrollér på en telefonbredde, at kun mobiludgaven hentes (`frames-mobile` under 768 px).

## Det, du ikke skal gøre

- Omdøb ikke billederne, og skriv ikke antallet ind i koden. Begge dele står i
  manifestet, og en pakke, der køres igen med andre indstillinger, skal kunne
  erstatte den her uden at nogen retter kode.
- Byg ikke afspilleren om til 94 `<img>`-elementer eller en
  gif. Det er dét, lærredet er til for.
- Læs ikke scroll-positionen i en `scroll`-hændelse og tegn derfra. Tegningen
  hører hjemme i `requestAnimationFrame`.
- Fjern ikke reglen for `prefers-reduced-motion`. Den, der har slået bevægelse
  fra, skal have første billede og en side, der stadig giver mening.
- Lad være med at komprimere billederne igen. De er allerede skrevet i
  image/webp ved den kvalitet, der blev valgt.

## Færdig, når

- Animationen kører fra sidens egen scroll, første til sidste billede.
- Der hentes ikke alle 94 filer på én gang ved indlæsning.
- På en skærm under 768 px hentes den lille udgave.
- Med bevægelse slået fra står produktet stille på første billede, og siden
  kan læses.
- Der står ingen `data-motion-error` på elementet, og konsollen er tom.

## Mål, hvis du skal bruge dem

- Billeder: 94
- Største udgave: 1280 × 720 px
- Filtype: image/webp
- Scroll-længde: 300 vh, udjævning 0.16
- Kilde: 1600 × 900 px, 12.44 s, 25.0 fps