# Slik lager du et animert nettsted i Claude Code på én kveld
> Regler mot malpreget design, visuelle retninger, GSAP, tilgjengelighet og ytelsestesting for et animert nettsted i Claude Code.
Source: https://ailoot.ai/blog/nb/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/nb/animated-website-claude-code/
Language: nb
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-2c46f7d323f33237be84b47b86fdaaae6bf291d934e72d67aeef71917030e2b3
Viktigste punkter
Claude Code kan lage et animert nettsted på én kveld, men resultatet ser generisk ut fordi modellen uten tydelige rammer trekkes mot gjennomsnittet i treningsdataene. Tre ting løser dette: regler mot malpreg i `CLAUDE.md`, en ferdig visuell retning i stedet for en vag prompt, og oppdatert dokumentasjon for animasjonsbiblioteket rett i konteksten. Den største fallgruven underveis er å overdrive bevegelsene: for mye animasjon røper generering tydeligere enn fraværet av animasjon, og svekker hastigheten på det som ligger over bretten.
Les mer om arbeid med modeller i [Ailoot-dokumentasjonen](https://ailoot.ai/docs/).
## Hvorfor er det åpenbart fra første skjermbilde at et nettsted er laget med KI?
Viktigste punkter
En modell uten fastsatte grenser tar gjennomsnittet av alt den har sett i treningsdataene. Før ga dette lilla knapper og skrifttypen Inter; trenden har nå skiftet til kremfarget bakgrunn med seriffer og terrakottafarget aksent. Anthropic beskrev tre slike standarduttrykk i dokumentasjonen for sin egen skill og kalte dem uttrykkelig standardatferd.
Du ber en agent sette sammen en landingsside. Førti minutter senere har du et fungerende nettsted: seksjonene er på plass, det har responsivt oppsett, og knappene virker. Og nesten umiddelbart får du følelsen av at du har sett det et sted før.
Årsaken er mekanisk. Modellen ble trent på en enorm samling ferdige sider, og samlingen var tydelig skjev. Tusenvis av veiledninger og startmaler kopierte de samme standardfargene, noe som skjevfordelte eksemplene.
Tusenvis av veiledninger og startmaler kopierte fargen, skjevfordelte utvalget, og modellen lærte at knapper er lilla. Det samme gjelder skrifttyper, avrundede hjørner og skygger.
«KI-uttrykket» har endret seg siden den gang. I dokumentasjonen for skillen `frontend-design` beskriver Anthropic andre uttrykk nå.
KI-generert design samler seg nå rundt tre uttrykk: en varm kremfarget bakgrunn (omtrent #F4F1EA) med en kontrasterende serifoverskrift og terrakottafarget aksent; en nesten svart bakgrunn med én lys syregrønn eller vermilionfarget aksent; og et bredt avissideoppsett med hårfine linjer, null hjørneradius og tette avisspalter. Alle tre passer til enkelte oppgaver, men dette er standardatferd, ikke et bevisst valg, og uttrykkene dukker opp uavhengig av temaet.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Grunnproblemet er at slop oppstår når det ikke finnes noe spesifikt å kopiere, og modellen bare tar gjennomsnittet av alle nettstiler. Qt fremstår som helhetlig nettopp fordi det ikke vet hvordan det kan se ut på noen annen måte.
«Slop» betyr her maskingenerert arbeid som er jevnet ut til et generisk resultat uten en særpreget stil.
Den praktiske lærdommen er at agenten trenger en avgrenset designgrammatikk i stedet for en åpen oppgave. Hvis du sier «gjør det vakkert», tar den gjennomsnittet. Hvis du gir den en bestemt palett, et par skrifttyper og ett definerende visuelt virkemiddel, bygger den ut fra dette.
Bevegelse er det mest merkbare signalet i dette bildet. Selv en statisk side med perfekt typografi ser fortsatt ut som en mal, fordi levende nettsteder puster: elementer dukker opp mens du ruller, markøren endrer ting, og overganger mellom skjermer avbrytes ikke brått.
## Hva trenger du for å lage et animert nettsted i Claude Code?
Viktigste punkter
Hele verktøykassen er gratis. Du trenger Claude Code, animasjonsbiblioteket GSAP (helt gratis siden slutten av april 2025, også tidligere betalingsbelagte programtillegg som SplitText og MorphSVG), Anthropic-skillen `frontend-design` og Meng Tos bibliotek med ferdige visuelle retninger, under MIT-lisensen. I tillegg trenger du en gratis vertstjeneste for publisering. Du betaler bare for agentens arbeid.
La oss gå gjennom verktøyene ett for ett, for det er mye forvirring rundt prisene.
**GSAP** er animasjonsbiblioteket bak en betydelig andel prisbelønte nettsteder. Webflow kjøpte det i oktober 2024, og ryktene om at alt var blitt gratis, begynte nesten umiddelbart. Det stemmer ikke helt: På det tidspunktet bekreftet Webflow at de eksisterende prisene ville gjelde videre. Biblioteket ble gratis **i slutten av april 2025** med versjon 3.13.
GSAP er nå helt gratis for alle brukere, takket være støtten fra Webflow.
— GSAP, https://gsap.com/pricing
I versjon 3.13 står det uttrykkelig at tidligere betalingsbelagte programtillegg som SplitText og MorphSVG også ble gratis, inkludert for kommersiell bruk. Gjeldende versjon per juli 2026 er `gsap@3.15.0`.
Gratis betyr likevel ikke åpen kildekode. Lisensen er fortsatt proprietær og forbyr å bygge en visuell animasjonsredigerer på GSAP som konkurrerer med Webflow. Det er ingen begrensninger på nettsteder, kundeprosjekter eller kommersielt arbeid.
**Anthropics skill `frontend-design`** er et sett med instruksjoner som endrer hvordan agenten arbeider med et grensesnitt. Beskrivelsen av repositoriet sier:
Veiledning for særpreget, gjennomtenkt visuell design når du lager et nytt grensesnitt eller omarbeider et eksisterende. Hjelper med estetisk retning, typografi og valg av designløsninger som ikke fremstår som standardmalen.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Innholdet følger en metode i to omganger. Først setter agenten sammen et tokensystem: fire til seks navngitte farger, skrifttyper for minst to roller, et oppsett skissert med tekst og ett definerende visuelt virkemiddel for siden. Deretter vurderer den sin egen plan opp mot oppgaven. Først etter dette skriver den kode.
**Meng Tos bibliotek** er `''`, MIT-lisensiert, med omtrent 2,400 stjerner. Skaperen lanserte det i et X-innlegg 7. juli 2026.
Innlegget sier 75 skills, repositoriebeskrivelsen oppgir 78, og filstrukturen inneholder 91 i dag. Forfatteren er åpen om dette: Søk i repositoriet, for beskrivelsen er utdatert.
## Hvordan får du Claude Code til å slutte å lage maler?
Viktigste punkter
To trinn. Først legger du inn en liste med forbud i `CLAUDE.md`: ikke bruk standardpaletten, ikke bruk én skrifttype til både overskrifter og brødtekst, og ikke animer noe annet enn opacity og transforms. Installer deretter skillen `frontend-design`, som får agenten til å sette sammen et tokensystem og vurdere planen sin før den skriver kode.
Vi begynner med regelfilen, for den gjelder for hver forespørsel og koster ingenting.
Et nyttig utgangspunkt er en blokk med anti-mal-vaktregler. Logikken er enkel: List opp de bestemte valgene modellen pleier å falle tilbake på som standard, og forby dem ved navn.
```markdown
## Anti-Generic Guardrails
- Colors: Never use default Tailwind palette (indigo-500, blue-600).
Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
with a clean sans. Apply tight tracking (-0.03em) on large headings,
generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).
```
Blokken er bevisst skrevet på engelsk: Modellen følger korte tekniske instruksjoner mer presist på dokumentasjonens språk.
Animasjonsregelen står sammen med forbudene mot farger og skygger av en grunn. Opacity på det første skjermbildet svekker hastighetsmålet direkte, som vi kommer tilbake til nedenfor.
Deretter skillen. Anthropics offisielle skills kan installeres gjennom programtillegget:
```bash
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
En detalj: designskills kan ikke installeres enkeltvis; `example-skills`-programtillegget installerer alle tolv samtidig. Hvis du bare vil ha én, kopierer du mappen manuelt—Claude Code tar den i bruk uten at du må starte økten på nytt:
```bash
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/
```
Andre skills i denne samlingen som kan være nyttige: `theme-factory` med ti ferdige temaer og et krav om menneskelig bekreftelse før de tas i bruk, `web-artifacts-builder` for bygging i React med ferdige komponenter, og `algorithmic-art` for generativ grafikk. En egen artikkel forklarer i detalj hvordan du velger skills til en oppgave: [slik velger du skills for Claude Code](https://ailoot.ai/blog/nb/choose-claude-code-skills/).
Reglene og skillen fungerer sammen: Reglene forbyr dårlige valg, og skillen innfører en arbeidsprosess—først systemet, deretter kritikken, til slutt koden.
Alt viktig her skjer før forespørselen. Du legger begrensningene agenten skal bygge innenfor inn i konteksten på forhånd, og da betyr selve formuleringen av prompten nesten ingenting. Denne tilnærmingen kalles kontekstutvikling, og filen `CLAUDE.md` er den første byggesteinen.
## Hvor finner du ferdige visuelle retninger og animasjonsprompter?
Viktigste punkter
Hovedkilden er Meng Tos MIT-lisensierte bibliotek: 91 skills, hvorav 73 i kategorien webdesign. Det inneholder ferdige visuelle retninger, som brutalistisk dokumentarstil eller beige minimalisme, samt enkeltstående animasjonsteknikker. Betalte promptbiblioteker finnes, men de kommer dårlig ut sammenlignet med dette gratis MIT-lisensierte biblioteket.
Det finnes ingen kategori «motion» i Meng Tos bibliotek, selv om den nevnes i kunngjøringen. Animasjonsskillene er blandet inn blant de andre under `web-design`.
Bevegelsesteknikkene biblioteket inneholder er: `animation-on-scroll`, `gsap`, `gsap-scrolltrigger-storytelling`, `cinematic-gsap-lenis-motion-system`, `cinematic-scroll-storytelling`, `marquee-loop`, `masked-reveal`, `staggered-word-reveal`, `reveal-hover-effect`, `scroll-progress-timeline`, `scroll-scrubbed-visual-sequence`, `scroll-scrubbed-word-reveal`, `scroll-world-storytelling`.
Som ikke-programmerer har du mer nytte av de ferdige visuelle retningene. I stedet for det vage «gjør det moderne» kan du velge en av disse og gi modellen den avgrensede grammatikken den manglet:
- `clean-minimal-beige-light-mode` - lys beige minimalisme
- `dark-glass-clean-layout` - mørkt glass
- `documentary-brutalist-agency` - brutalistisk dokumentarstil
- `editorial-portfolio-chapters` - portefølje delt inn i kapitler, som et magasin
- `orange-clean-paper-saas` - en papirinspirert tjenesteside med oransje aksent
- `solar-duotone-bold` - kraftig tofargebehandling
- `tech-green-dark-mode-modern` - mørk teknologistil med grønt
- `light-mode-paper-technical` - lyst teknisk papir
Det finnes også tekniske skills for 3D-grafikk og effekter: `threejs`, `matterjs`, `globe-gl`, `vantajs`, `unicorn-studio`, `progressive-blur`, `beautiful-shadows`, `css-border-gradient`.
Repositoriet har ingen installasjonskommando—forfatteren sier tydelig i veikartet at en slik kommer når integrasjonsmetoden er fastlagt. Den eneste instruksjonen for Claude Code er:
Nedenfor vises ett installasjonsalternativ. Denne kommandoen finnes ikke i repositoriet; det er en installasjonsanbefaling:
```bash
git clone ''
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/
```
Kort om betalte promptbiblioteker, siden spørsmålet dukker opp. Tjenesten motionsites.ai selger et sett med ferdige prompter for seksjoner: per juli 2026 koster det 239 dollar i året eller en engangs kampanjepris på 349 dollar i stedet for 759, uten månedsabonnement. Forfatteren er ikke oppført, og det finnes ingen «About»-side. Det finnes også et nettsted med nesten samme navn i entall, og omtale av kompatibilitet med Claude Code finnes bare på det nettstedet. Sammenlignet med Meng Tos gratis MIT-lisensierte bibliotek vil jeg ikke anbefale kjøpet, men det er greit å kjenne til muligheten.
## Hvordan gir du en agent oppdatert GSAP-dokumentasjon på én linje?
Viktigste punkter
GSAP har en `llms.txt`-fil—en dokumentasjonsoppsummering på 25 kilobyte laget spesielt for språkmodeller. Gi agenten en lenke til den, så kan den bruke oppdaterte metodebeskrivelser i stedet for å støtte seg på det den husker fra tidligere. Hver dokumentasjonsside finnes også i en markdownversjon. Motion-biblioteket har samme fil, og den er enda større.
Et vanlig problem med animasjonsbiblioteker er at agenten husker en utdatert måte å koble dem sammen på. Den skriver en import fra en gammel sti, registrerer et programtillegg slik det ble gjort for to år siden, og koden kjører ikke.
Løsningen er å legge dokumentasjonen inn i konteksten selv. GSAP tilbyr den i et maskinvennlig format:
```
https://gsap.com/llms.txt
```
Filen er omtrent 25 kilobyte per i dag. Hver dokumentasjonsside finnes også i en markdownversjon—legg bare `.md` til URL-en.
I praksis ser det slik ut:
```
Les https://gsap.com/llms.txt og https://gsap.com/docs/v3/Plugins/ScrollTrigger.md
Lag deretter én scene på hjemmesiden: overskriften dukker opp mens du ruller
forbi det første skjermbildet, og bildet til høyre flytter seg saktere enn teksten.
Bruk bare transform og opacity. Ingen transition-all.
```
Motion-biblioteket (tidligere Framer Motion) har samme fil, og den er enda større. Motion distribueres under MIT og er fortsatt virkelig åpen kildekode; gjeldende versjon er `motion@12.42.2`. Hvis prosjektet bruker React og bare trenger enkle avsløringer, kan du velge Motion; bruk GSAP med programtillegget ScrollTrigger for komplekse scrollscener.
ScrollTrigger lar hvem som helst lage imponerende scrollanimasjoner med minimal kode.
— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger
Det finnes også alternativer som bare bruker nettleseren og ikke trenger biblioteker. Sideoverganger med View Transitions API fikk baseline-støtte 14. oktober 2025—men bare innenfor én side; versjonen på tvers av sider støttes ikke i det hele tatt i Firefox. CSS-scrollanimasjoner har ennå ikke fått baseline-støtte: Chrome støtter dem, Safari lærte dem nylig, men i Firefox må du aktivere dem manuelt i innstillingene, så de virker rett og slett ikke for vanlige lesere. Be agenten først sjekke om nettleseren støtter dem, og la standardovergangen være på plass hvis den ikke gjør det.
## Hvordan gjør du et nettsted du liker om til en prompt?
Viktigste punkter
Meng Tos bibliotek har en skill som tar opp skjermen mens du viser et annet nettsted, analyserer det lag for lag og lager én detaljert prompt. En annen skill gjør det samme med sidens kildekode. Begge finnes nettopp fordi uttrykket «lag en lignende animasjon» er meningsløst for en agent.
Den vanligste måten å forklare hva du vil ha på, er å vise et eksempel. Det fungerer ikke direkte med en agent: Den ser ikke nettstedet, bare tekst.
Skillen `video-to-superprompt` bygger bro over dette gapet. Beskrivelsen i repositoriet: Gjør en videoreferanse om til en detaljert prompt for gjenskaping eller inspirasjon. Skillen analyserer opptaket i lag: fortelling, layout, bevegelse, typografi og 3D-grafikk. Resultatet er én prompt som er klar til bruk.
Hovedregelen uttrykkes tydelig:
Den andre skillen, `html-to-interaction-prompts`, arbeider med kildekode: Den finner alt som beveger seg—reaksjoner på markøren, 3D-grafikk, scrolleffekter, lag som beveger seg med ulik hastighet—og deler siden opp i separate prompter, én for hver seksjon, knapp, hovertilstand eller effekt. Prinsippet er å behandle kildens oppførsel som fasiten og ikke finne på effekter ut fra et skjermbilde når koden er tilgjengelig.
Den tredje skillen, `stitched-full-page-capture`, løser et praktisk problem. Et vanlig helsides skjermbilde av nettsteder med lazy loading og 3D-grafikk blir grått og tomt fordi opptaket skjer før gjengivelsen. Skillen ruller gjennom siden skjerm for skjerm, venter på at alt skal stabilisere seg og setter resultatet sammen.
Det finnes også en måte uten skjermopptak: Koble agenten via MCP til et bibliotek med levende grensesnitteeksempler. Den offisielle serveren til Mobbin kan installeres med én kommando:
```bash
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
```
Deretter åpner du en ny økt, velger serveren fra listen og logger inn i nettleseren. Agenten får tilgang til skjermbilder av ekte, fungerende apper: det er oppført mer enn 621,500 skjermer. Dette er skjermbilder av ferdige produkter, ikke komponenter eller kode. Viktig forbehold: Mobbin-serveren fungerer ikke med gratisabonnementet; den er tilgjengelig på betalte abonnementer (per juli 2026). Det finnes en [egen artikkel om Google Stitch](https://ailoot.ai/blog/nb/google-stitch-claude-code-design/) om å koble eksterne tjenester til en agent, der samme metode brukes for å hente et designsystem inn i Claude Code.
## Steg for steg: Et animert nettsted på én kveld
Viktigste punkter
Rekkefølgen er: regler mot malpreg, designskill, velg én visuell retning, bygg en statisk side, og legg først til én animert scene i det siste trinnet. Legg til bevegelse til slutt, én effekt av gangen; ellers vet du ikke hvor du skal begynne når noe går galt. De sju trinnene nedenfor tar en kveld hvis du ikke prøver å animere alt samtidig.
1. ### Sett opp et prosjekt
Hvis du ikke har et prosjekt ennå, begynner du med en tom mappe. Opprett den, åpne den i en terminal og kjør `claude` der. Be først om et grunnskjelett: «bygg et skjelett for et nettsted på én side for virksomheten min (beskriv hva den driver med), vanlig HTML og CSS, ingen biblioteker.» Det dukker opp en samling filer—det er prosjektroten, der alt arbeid foregår fra nå av.
2. ### Legg reglene i CLAUDE.md
Kopier blokken Anti-Generic Guardrails til en fil kalt `CLAUDE.md` i prosjektroten. Hvis den ikke finnes, ber du agenten opprette den. Reglene er skrevet for Tailwind; hvis grunnstrukturen bruker vanlig CSS, sier du til agenten: «bruk disse prinsippene på vanlig CSS»—betydningen av reglene endres ikke. Se en gjennomgang av Karpathys fire regler for å forstå hvordan selve filen fungerer og hva mer du kan legge i den.
3. ### Installer skillen frontend-design
Bruk `example-skills`-programtillegget eller kopier mappen `frontend-design`, som beskrevet ovenfor. Du kan kontrollere at skillen er lastet inn med kommandoen `/doctor`.
4. ### Velg én visuell retning
Fra Meng Tos bibliotek. Én, ikke to eller tre. Å blande brutalistisk dokumentarstil med beige minimalisme gir deg akkurat den utjevningen du prøver å unngå. Mappenavnene er beskrivende, men du kan ikke forhåndsvise dem visuelt: Åpne `SKILL.md` i mappen du liker, og les beskrivelsen av paletten og skrifttypene—alt står der.
5. ### Bygg en statisk side
Uten en eneste animasjon. Begynn med typografi, avstand og rutenett. Be agenten starte en lokal forhåndsvisning og åpne adressen den gir deg. Hvis du vil se siden på telefonen, sier du «kjør den slik at den åpnes på andre enheter i nettverket mitt», så gir agenten deg en adresse.
6. ### Legg til én bevegelsesscene
Bare én. Som regel er det det første skjermbildet: Overskriften dukker opp, og et bakgrunnslag beveger seg saktere enn forgrunnen. Gi agenten bibliotekets `llms.txt` og beskriv scenen konkret—hva som beveger seg, hvor og over hvor mange millisekunder. La opacity være urørt på det første skjermbildet; det finnes en egen seksjon nedenfor om hvorfor.
7. ### Legg til en regel for redusert bevegelse
Bruk CSS-regelen og JavaScript-oppsettet for redusert bevegelse fra tilgjengelighetsdelen. Kontroller siden med redusert bevegelse aktivert før publisering.
8. ### Publiser og sjekk hastigheten
Publiser på en gratis statisk vertstjeneste—Vercel, Netlify eller GitHub Pages. Be agenten: «publiser dette prosjektet på Vercel og gi meg lenken.» Først etter publisering kjører du den resulterende URL-en gjennom PageSpeed Insights: Tjenesten fungerer med offentlige URL-er og kan ikke se en lokal side. Se på «Largest Contentful Paint»—tiden det tar å vise det største elementet; den grønne sonen er opptil 2.5 sekunder. Agenten kan måle den lokale versjonen før publisering: Chrome DevTools MCP åpner den i Chrome og viser samme måltall.
Det er i trinn seks det er lettest å ødelegge arbeidet fra de fem foregående.
## Hvorfor får for mye animasjon et nettsted til å se enda mer KI-generert ut?
Viktigste punkter
Anthropic sier det tydelig i dokumentasjonen for designskillen: For mye bevegelse forsterker inntrykket av at en side er generert. Som standard legger agenten til avsløringseffekter på hver seksjon etter tur, slik at alt på siden rykker til og oppmerksomheten ikke ledes noe sted. Det motsatte fungerer: én bevisst scene på det første skjermbildet, og deretter måtehold.
Her bryter tenkningen til nesten alle som tar opp temaet sammen: For lite animasjon ser billig ut, så du må legge til mer.
Noen ganger er mindre mer, og for mye animasjon bidrar til følelsen av at designet er generert.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Dette står i selve skillen `frontend-design` som du installerte for å forbedre designet. Anthropic advarer mot å overdrive i verktøyet agenten bruker for å pynte på siden.
Den lister også opp andre standardgrep: et stort tall med en liten bildetekst og fargeovergang som standardsvar på enhver oppgave; nummererte blokker som 01 / 02 / 03, som bare passer når det faktisk finnes en rekkefølge.
Slik ser det ut når man overdriver i praksis: Agenten får oppgaven «legg til animasjoner» og legger inn en scrolleffekt på hver seksjon. Overskriften glir inn, tre kort dukker opp ett etter ett, uttalelser glir inn fra siden, og bunnteksten toner inn. Hver effekt fungerer isolert sett. Samlet lager de en side som aldri slutter å bevege seg og ikke fremhever noe.
Et levende nettsted fungerer annerledes: én bevisst scene, vanligvis på det første skjermbildet, og deretter måtehold. Bevegelse fungerer som fremheving—den gir mening så lenge den treffer ett enkelt ord.
Det gir deg en regel for prompten. Formuler den slik: «lag én scene på det første skjermbildet, og la alt annet være statisk.» Det er bare noen få ord mer enn «legg til animasjoner», men resultatet er en størrelsesorden bedre.
## Hvordan svekker animasjoner hastigheten på nettsteder?
Viktigste punkter
Den største fallgruven: En nettleser regner ikke engang et element med opacity null som kandidat for Largest Contentful Paint. Standardteknikken «skjul seksjonen og vis den ved rulling» svekker det viktigste hastighetsmålet direkte når den brukes på det første skjermbildet. Animer dessuten bare transforms og opacity—alt annet utløser en ny beregning av layouten.
De tre målene Google bruker til å vurdere en side, er: tiden det tar å vise det største elementet—høyst 2.5 sekunder; respons på en interaksjon—høyst 200 millisekunder; og layoutforskyvning—høyst 0.1. De måles ved 75-persentilen av reelle besøk.
Når nettleseren velger det største elementet, utelukker den elementer med opacity null—de som er usynlige for brukeren.
La oss se på hvorfor dette er viktig her. Som standard lager agenten en avsløring på denne måten: Den setter en seksjon til opacity null og fjerner innstillingen når seksjonen kommer inn i visningsområdet. Hvis avsløringen ligger på det første skjermbildet, kan bildet være fullstendig lastet og dekodet, men målet teller det fortsatt ikke før gjengivelsen begynner. Det er enda verre hvis et skript fjerner opacity etter lasting—da venter målingen på hele skriptet.
Det finnes to måter å løse dette på. Enten lar du avsløringen starte med en liten opacity-verdi som ikke er null, slik at den første gjengivelsen teller. Eller så lar du opacity være urørt på det første skjermbildet og animerer bare forskyvningen.
Det andre problemet handler om hva som er billig og dyrt å animere.
Begrens animasjoner til egenskapene opacity og transform der det er mulig, slik at de forblir på komposisjonsstadiet i gjengivelsespipelinen.
— web.dev, https://web.dev/articles/animations-guide
Med vanlige ord: Nettleseren setter sammen bildet i lag, og endringer i posisjon og opacity skjer i det siste og billigste trinnet. Alt annet tvinger den til å beregne siden på nytt. Målinger fra den samme dokumentasjonen: Animasjon med top- og left-forskyvninger tar 37 millisekunder til layout og 79 til gjengivelse; den samme visuelle effekten med transform tar null for begge.
Og her er en motsetning det er verdt å huske: Opacity er billig å komposere, men gjør at et element ikke kvalifiserer for hastighetsmålet. En animasjon som er billig for nettleseren, og en som er trygg for ytelsen, er altså to forskjellige ting.
En ting til om egenskapen `will-change`, som agenter gjerne strør rundt seg med «for optimalisering». MDN-dokumentasjonen sier det motsatte:
Overdreven bruk av will-change fører til for stort minneforbruk og tvinger nettleseren til mer kompleks gjengivelse når den prøver å forberede seg på mulige endringer. Dette svekker ytelsen.
— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Det står også at egenskapen er ment som siste utvei for eksisterende ytelsesproblemer. Den fungerer ikke forebyggende. En linje som `will-change: transform, opacity` på femti elementer er et typisk tegn på generert kode.
Historien er enklere når det gjelder layoutforskyvning. Googles dokumentasjon gir ikke animasjoner skylden; tvert imot bidrar nøye overganger til å oppdatere innhold uten å skremme leseren. Oppskriften er den samme: Endre skala med transform i stedet for width og height, og flytt med forskyvninger i stedet for koordinater.
## Hva med mennesker som blir fysisk skadet av bevegelse?
Viktigste punkter
Opptil 35% av voksne over førti år i USA har opplevd vestibulære lidelser. For dem kan rulleanimasjon ende med kvalme og migrene. Systeminnstillingen «reduser bevegelse» har vært støttet av alle nettlesere i mer enn fem år, men agenten legger den ikke til med mindre du ber om det. Både CSS-regler og eksplisitt forgrening i JavaScript-animasjonsoppsettet trengs. Avlesing av preferansen alene stopper ikke en tidslinje.
Denne delen handler om mer enn bare høflighet. Målgruppen som kjøper fra en bedriftseier, er nettopp personer fra førti år og oppover.
For personer med vestibulære lidelser kan rulleanimasjoner gi kvalme og migrene, noen ganger så alvorlig at man må legge seg ned.
Dette kan håndteres med tre stilregler:
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
Husk på tre ting.
Skriv animasjonen som standardatferd og slå den av innenfor denne regelen—da svekkes siden tryggere enn om du gjør det motsatte.
Spesifikasjonen sier «fjerner, reduserer eller erstatter»—fullstendig fjerning er ikke engang det første alternativet. Å bytte ut en brå innskyving med en kort toning fungerer bedre enn å kutte den helt: Deaktivering av alle animasjoner ødelegger lasteindikatorer og fremdriftslinjer.
JavaScript-styrt animasjon trenger egen preferansehåndtering. Overstyring av CSS-varighet avbryter ikke en GSAP-tidslinje. Å lagre `matchMedia(...).matches` i en variabel gjør ingenting med mindre oppsettet forgrenes på den. For GSAP holder du elementet synlig i vanlig HTML/CSS og oppretter bevegelse bare når brukeren tillater det:
```js
// Run after GSAP and the page elements have loaded.
function mountMotion() {
const mm = gsap.matchMedia();
mm.add('(prefers-reduced-motion: no-preference)', () => {
gsap.from('.hero-title', { y: 24, duration: 0.35 });
});
return () => mm.revert();
}
const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.
```
Tittelen må ikke ha skjult eller forskjøvet grunnstil. Med redusert bevegelse forblir den synlig og statisk. Hvis preferansen endres mens siden er åpen, tilbakestiller GSAP animasjonen når spørringen ikke lenger matcher. `mm.revert()` fjerner også samlet animasjon ved nedmontering. Implementer tilsvarende forgrening i Motions eget oppsett. CSS-regelen alene er utilstrekkelig. Se [GSAP-dokumentasjonen om matchMedia-livssyklus og opprydding](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/).
Det finnes også et formelt tilgjengelighetskriterium å huske på. WCAG 2.2.2, et kriterium på nivå A, krever at brukeren må kunne stoppe innhold som automatisk beveger seg, blinker eller ruller, varer i mer enn fem sekunder og vises sammen med annet innhold. Dette gjelder karuseller som roterer automatisk og endeløse rullende tekstbånd, som agenter gjerne legger inn.
## Sju steder det går galt
Viktigste punkter
Nesten alle feilene skyldes tre ting: Det første skjermbildet animeres, det er for mye bevegelse, eller feil egenskaper animeres. Scrolljacking er et eget problem—brukerundersøkelser viser at det er skadelig. En nyttig animasjonsvarighet er 100 til 400 millisekunder, mens agenter gjerne bruker ett helt sekund som standard.
**1. Det første skjermbildet er skjult til det tones inn.** Et element med opacity null teller ikke som kandidat for gjengivelsesmålet. Dette er den dyreste feilen, fordi den rammer et mål som påvirker søkerangeringen.
**2. Alt animeres.** Hver seksjon glir inn, hvert kort dukker opp. Anthropic sier rett ut at dette øker inntrykket av generert design.
**3. Scrolljacking.** Når et nettsted erstatter den vanlige musehjuloppførselen med sin egen «filmiske» logikk.
I den samme studien opplevde de fleste deltakerne minst en mild grad av desorientering.
**4. Layoutegenskaper animeres.** Koordinater og størrelser i stedet for transforms. 37 og 79 millisekunder mot null.
**5. Animasjonene varer for lenge.** Det nyttige tidsrommet er 100 til 400 millisekunder, der 400 allerede er svært langsomt og bare egner seg for store bevegelser. Agenter bruker gjerne ett helt sekund som standard.
Ifølge funnene hans er et nyttig intervall 100 til 400 millisekunder, der 400 allerede er svært langsomt og bare passer for store bevegelser. Agenter bruker gjerne ett helt sekund som standard.
**6. Det mangler en regel for redusert bevegelse.** Agenten legger den ikke til på egen hånd.
**7. Nettstedet blir langsommere for hver interaksjon.** Dette gjelder spesielt React: En animasjon som opprettes uten en referanse til elementet og uten opprydding, blir mangedoblet ved hver komponentoppdatering. Etter hvert begynner siden å bli tregere uten noen åpenbar grunn.
Det finnes en åttende fallgruve. Metoden der «agenten tar et skjermbilde og retter det den ser», fungerer utmerket på statiske sider, men med animerte elementer låser den agenten fast i en endeløs redigeringssløyfe: Den ser et mellomliggende bilde, tror det er en feil, retter den og ser enda et mellomliggende bilde. I tillegg bruker hvert skjermbilde opp kontekst.
## Hva koster det, og hvordan unngår du å bruke opp en månedsgrense på ett nettsted?
Viktigste punkter
Alle verktøyene i dette oppsettet er gratis; du betaler for agentens eget arbeid. Animasjon bruker opp grenser raskere enn vanlig layoutarbeid, fordi du ikke kan kontrollere resultatet ved å lese koden: Hver endring krever at filer leses på nytt og flere iterasjoner. Det hjelper å bygge én scene om gangen, holde `CLAUDE.md` kort og slå av skjermbildeløkken for animerte elementer.
En typisk historie fra engelskspråklige vibe-coding-miljøer: Noen bygger en prangende side med en rulletur gjennom verdensrommet, legger ut resultatet, og diskusjonen avslører at dette ene nettstedet brukte opp hele månedsgrensen.
Det er å forvente. Animasjoner koster mer enn vanlig layoutarbeid av flere grunner samtidig. Du kan ikke kontrollere resultatet ved å lese koden; det krever iterasjoner. Hver endring betyr at filene må leses på nytt. Og en skjermbildeløkke på elementer i bevegelse legger til unødvendige runder.
Dette hjelper:
Bygg én scene om gangen og lås resultatet. En engangsforespørsel om å «legge til animasjoner over hele nettstedet» garanterer at du bruker for mye. Du kan slå av skjermbildekontroll for animerte elementer og inspisere dem visuelt selv. Hold `CLAUDE.md` kort, så reglene ikke bruker opp kontekst ved hver forespørsel. Og gi agenten bibliotekets `llms.txt` på forhånd, ellers finner den på en utdatert tilkoblingsmetode og feilsøker deretter sitt eget oppspinn.
Artikkelen [hvorfor Claude Code leser gjennom hele prosjektet på nytt](https://ailoot.ai/blog/nb/claude-code-rereads-project/) forklarer hvor tokens brukes når du arbeider med et prosjekt; artikkelen [slik unngår du å bruke opp Claude Code-grensene](https://ailoot.ai/blog/nb/claude-code-token-limits-saving/) handler om hvordan du holder bruken under kontroll.
## Hva nå?
Viktigste punkter
Tilnærmingen fungerer: regler mot malpreg, én visuell retning, én bevegelsesscene, en hastighetskontroll og respekt for leserens innstillinger. Det vanskelige er å legge riktig informasjon inn i agentens kontekst på forhånd, slik at den har noe å bygge videre på. Selve animasjonene er den enkleste delen av arbeidet.
Bygg din første side ved å følge de åtte trinnene. Velg én visuell retning, lag én scene på det første skjermbildet og kjør en hastighetskontroll.
### Kilder
- [anthropics/skills](https://github.com/anthropics/skills) - offisielle Anthropic-skills, inkludert frontend-design
- [GSAP: Priser](https://gsap.com/pricing) - bekreftelse på at det er gratis
- [GSAP 3.13-utgivelsen](https://gsap.com/blog/3-13) - hva som ble gratis i slutten av april 2025
- [GSAP: llms.txt](https://gsap.com/llms.txt) - dokumentasjon for språkmodeller
- [GSAP: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - programtillegg for rulleanimasjon
- [Motion](https://motion.dev/) - åpen MIT-lisensiert løsning
- [web.dev: Veiledning for animasjoner](https://web.dev/articles/animations-guide) - hvilke egenskaper som bør animeres
- [MDN: will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - hvorfor du ikke bør angi den på forhånd
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - innstilling for redusert bevegelse
- [WCAG 2.2.2: Pause, stopp, skjul](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - tilgjengelighetskriterium
- [W3C: Animasjon fra interaksjoner](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - virkninger på vestibulære lidelser
- [Mobbin MCP](https://mobbin.com/mcp) - bibliotek med grensesnittreferanser for agenter
For de neste stegene dine—[Ailoot](https://ailoot.ai/).
## Spørsmål om denne veiledningen: Slik lager du et animert nettsted i Claude Code på én kveld
### Hvorfor lar en CSS-regel for redusert bevegelse GSAP-animasjonen fortsette?
Overstyring av CSS-varighet avbryter ikke en JavaScript-tidslinje. Opprett GSAP-animasjonen i en matchMedia-gren for no-preference og hold grunnelementet synlig, slik at redusert bevegelse gir en statisk side.
### Hvordan stopper jeg opphoping av animasjoner etter navigasjon?
Kall oppryddingen returnert av animasjonsoppsettet når siden eller komponenten fjernes. I eksemplet gjenoppretter mm.revert() stiler og fjerner animasjoner samlet av matchMedia-instansen.
## Ailoot · Selskapet og dets prosjektportefølje
Ailoot bygger på etablert driftserfaring, en stor kundebase, stabil tjeneste og løpende KPI-kontroll.
Selskapet og dets prosjektportefølje: millioner av kunder; månedlig salg for milliarder.
Ailoot bruker denne driftserfaringen til API-tilgang til AI-funksjoner i kundenes produkter, agenter, applikasjoner og automatiseringer.