# Sådan bygger du et animeret website i Claude Code på en aften > Regler mod skabelonpræget design, visuelle retninger, GSAP, tilgængelighed og ydelsestest af et animeret website i Claude Code. Source: https://ailoot.ai/blog/da/animated-website-claude-code/ Canonical: https://ailoot.ai/blog/da/animated-website-claude-code/ Language: da Publisher: Ailoot (https://ailoot.ai/) Translation: guide-007 Revision: sha256-d4cabc1460a83269451faef73d3a7be24f88ed60d78a2b04243fe8d45f59756d
Vigtigste pointer Claude Code kan bygge et animeret website på en aften, men resultatet ser generisk ud, fordi modellen uden eksplicitte begrænsninger glider i retning af gennemsnittet i sine træningsdata. Tre ting retter op på det: regler mod skabeloner i `CLAUDE.md`, en færdig visuel retning i stedet for en vag ledetekst og opdateret dokumentation for animationsbiblioteket direkte i konteksten. Den største fælde undervejs er at overdrive bevægelserne: For mange animationer afslører, at siden er genereret, tydeligere end manglen på dem, og forringer hastigheden i det synlige område øverst på siden.
Læs mere om arbejdet med modeller i [Ailoot-dokumentationen](https://ailoot.ai/docs/). ## Hvorfor kan man se med det samme, at et website er bygget af AI?
Vigtigste pointer En model uden fastlagte grænser tager gennemsnittet af alt, den har set i sine træningsdata. Tidligere førte det til lilla knapper og skrifttypen Inter; tendensen er nu skiftet til en cremefarvet baggrund med serifskrift og en terrakottafarvet accent. Anthropic beskrev tre sådanne standardudtryk i dokumentationen til sin egen skill og kaldte dem direkte standardadfærd.
Du beder en agent om at sætte en landingsside sammen. Fyrre minutter senere har du et fungerende website: sektionerne er på plads, layoutet tilpasser sig forskellige skærme, og knapperne virker. Og næsten med det samme får du en fornemmelse af, at du har set det et sted før. Årsagen er mekanisk. Modellen blev trænet på en enorm samling færdige sider, og samlingen var stærkt skæv. Tusindvis af vejledninger og startskabeloner kopierede den farve, hvilket skævvred datagrundlaget, og modellen lærte, at knapper er lilla. Den samme mekanisme gælder skrifttyper, afrundede hjørner og skygger. ”AI-udtrykket” har ændret sig siden. I dokumentationen til sin `frontend-design`-skill beskriver Anthropic nu andre udtryk.

AI-genereret design samler sig nu om tre udtryk: en varm cremefarvet baggrund (omkring #F4F1EA) med en kontrasterende serifoverskrift og terrakottaaccent; en næsten sort baggrund med én lys syregrøn eller cinnoberrød accent; og et bredt avislayout med hårfine streger, nul hjørneradius og tætte aviskolonner. Alle tre passer til nogle opgaver, men det er standardadfærd, ikke et bevidst valg, og de dukker op uanset temaet.

— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Grundproblemet er, at slop opstår, når der ikke er noget konkret at kopiere, og modellen blot tager gennemsnittet af alle webstile. Qt ser sammenhængende ud, netop fordi det ikke ved, hvordan det kan se ud på andre måder. ”Slop” betyder her maskinskabt arbejde, der er blevet gennemsnittet til et generisk resultat uden en tydelig stil. Den praktiske lære er, at agenten har brug for en snæver designgrammatik i stedet for en åben opgave. Hvis du siger ”gør det smukt”, tager den gennemsnittet. Hvis du giver den en bestemt farvepalet, et par skrifttyper og ét definerende visuelt greb, bygger den ud fra det. Bevægelse er det mest iøjnefaldende signal i dette billede. Selv en statisk side med perfekt typografi ligner stadig en skabelon, fordi levende websites ånder: elementer dukker op, mens du ruller, markøren ændrer ting, og overgange mellem skærmbilleder sker ikke brat. ## Hvad skal du bruge for at bygge et animeret website i Claude Code?
Vigtigste pointer Hele værktøjskassen er gratis. Du skal bruge selve Claude Code, animationsbiblioteket GSAP (siden slutningen af april 2025 har det været helt gratis, også pluginer, der tidligere kostede penge, som SplitText og MorphSVG), Anthropics `frontend-design`-skill og Meng Tos bibliotek med færdige visuelle retninger under MIT-licensen. Derudover skal du bruge en gratis hostingtjeneste til udgivelsen. Du betaler kun for agentens arbejde.
Lad os gennemgå værktøjerne ét ad gangen, for der er en del forvirring om priserne. **GSAP** er animationsbiblioteket bag en betydelig andel af prisvindende websites. Webflow købte det i oktober 2024, og rygterne om, at alt var blevet gratis, begyndte næsten med det samme. Det er ikke helt rigtigt: På det tidspunkt bekræftede Webflow, at de eksisterende priser ville forblive gældende. Biblioteket blev gratis **i slutningen af april 2025** med version 3.13.

GSAP er nu helt gratis for alle brugere takket være Webflows støtte.

— GSAP, https://gsap.com/pricing
I 3.13-udgivelsen står der specifikt, at pluginer, der tidligere kostede penge, som SplitText og MorphSVG, også blev gratis, herunder til kommerciel brug. Den aktuelle version pr. juli 2026 er `gsap@3.15.0`. Gratis betyder dog ikke open source. Licensen er stadig proprietær og forbyder at bygge en visuel animationseditor på GSAP, der konkurrerer med Webflow. Der er ingen begrænsninger på websites, kundeprojekter eller kommercielt arbejde. **Anthropics `frontend-design`-skill** er et sæt instruktioner, der ændrer agentens måde at arbejde med en brugerflade på. Beskrivelsen i repositoriet siger:

Vejledning til et særpræget, gennemtænkt visuelt design, når du skaber en ny brugerflade eller omarbejder en eksisterende. Hjælper med æstetisk retning, typografi og valg af designløsninger, der ikke fremstår som standardskabelonen.

— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Metoden består af to gennemgange. Først sammensætter agenten et tokensystem: fire til seks navngivne farver, skrifttyper til mindst to roller, et layoutskema i tekstskitser og ét definerende visuelt greb til siden. Derefter vurderer den sin egen plan i forhold til opgaven. Først derefter skriver den kode. **Meng Tos bibliotek** er `''`, udgivet under MIT-licensen og med omkring 2.400 stjerner. Skaberen lancerede det i et X-opslag den 7. juli 2026. Opslaget siger 75 skills, beskrivelsen af repositoriet angiver 78, og der er 91 i filtræet i dag. Forfatteren er åben om det: Tjek repositoriet med en søgekommando, for beskrivelsen er forældet. ## Hvordan får du Claude Code til at holde op med at lave skabeloner?
Vigtigste pointer To trin. Først skriver du en række forbud ind i `CLAUDE.md`: Brug ikke standardfarvepaletten, brug ikke den samme skrifttype til overskrifter og brødtekst, og animér ikke andet end opacity og transforms. Derefter installerer du `frontend-design`-skillen, som får agenten til at sammensætte et tokensystem og kritisere sin plan, inden den skriver kode.
Lad os begynde med regelfilen, for den gælder for hver eneste forespørgsel og koster ingenting. Et nyttigt udgangspunkt er et sæt værn mod skabeloner. Logikken er enkel: Skriv de konkrete valg op, som modellen plejer at glide over mod som standard, og forbyd 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 bevidst skrevet på engelsk: Modellen følger korte tekniske instruktioner mere præcist på dokumentationens sprog. Animationslinjen står af en grund på listen over forbud sammen med farver og skygger. Opacity på den første skærm forringer hastighedsmålingen direkte, som vi kommer ind på nedenfor. Dernæst skillen. Anthropics officielle skills kan installeres via pluginet: ```bash /plugin marketplace add anthropics/skills /plugin install example-skills@anthropic-agent-skills ``` En detalje: Design-skills kan ikke installeres enkeltvis; pluginet `example-skills` installerer alle tolv på én gang. Hvis du kun vil have én, kan du kopiere mappen manuelt—Claude Code finder den uden at skulle genstarte sessionen: ```bash git clone https://github.com/anthropics/skills.git cp -r skills/skills/frontend-design ~/.claude/skills/ ``` Andre skills i samlingen, der kan være nyttige: `theme-factory` med ti færdige temaer og krav om menneskelig bekræftelse, før de anvendes, `web-artifacts-builder` til at bygge i React med færdige komponenter og `algorithmic-art` til generativ grafik. En separat artikel forklarer i detaljer, hvordan man vælger skills til en opgave: [sådan vælger du skills til Claude Code](https://ailoot.ai/blog/da/choose-claude-code-skills/). Reglerne og skillen arbejder sammen: Reglerne forbyder dårlige valg, og skillen indfører en proces—system først, kritik dernæst, kode til sidst. Alt det vigtige sker her, før du sender forespørgslen. Du lægger de begrænsninger, agenten skal bygge ud fra, ind i dens kontekst på forhånd, og selve ledetekstens formulering betyder næsten ikke noget længere. Tilgangen kaldes kontekstteknik, og `CLAUDE.md`-filen er dens første byggesten. Kombinationen af **AI-klon + Second Brain + Context Engineering** hjælper med at gøre Claude til et værktøj, der holder sig til din stil i stedet for blot at generere gennemsnitlige resultater. ## Hvor finder du færdige visuelle retninger og animationsprompter?
Vigtigste pointer Hovedkilden er Meng Tos bibliotek under MIT-licensen: 91 skills, hvoraf 73 er i kategorien webdesign. Det indeholder færdige visuelle retninger, som brutalistisk dokumentarstil eller beige minimalisme, samt enkelte animationsteknikker. Der findes betalte promptbiblioteker, men de står svagt i sammenligning med dette gratis bibliotek under MIT-licensen.
Der er ingen kategori for ”motion” i Meng Tos bibliotek, selvom den nævnes i annonceringen. Animationsskillsene er blandet sammen med resten under `web-design`. De bevægelsesteknikker, det indeholder, 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-programmør er de færdige visuelle retninger vigtigere for dig. I stedet for det vage ”gør det moderne” kan du vælge en af disse og give modellen den snævre grammatik, den manglede: - `clean-minimal-beige-light-mode` - lys beige minimalisme - `dark-glass-clean-layout` - mørkt glas - `documentary-brutalist-agency` - brutalistisk dokumentarstil - `editorial-portfolio-chapters` - portfolio opdelt i kapitler som et magasin - `orange-clean-paper-saas` - et website for en papirinspireret tjeneste med orange accent - `solar-duotone-bold` - markant behandling med to farver - `tech-green-dark-mode-modern` - mørk teknologistil med grøn - `light-mode-paper-technical` - lyst teknisk papir Der findes også tekniske skills til 3D-grafik og effekter: `threejs`, `matterjs`, `globe-gl`, `vantajs`, `unicorn-studio`, `progressive-blur`, `beautiful-shadows`, `css-border-gradient`. Der er ingen installationskommando i repositoriet—forfatteren siger direkte i køreplanen, at en sådan bliver tilføjet, når integrationsmetoden er fastlagt. Den eneste instruktion til Claude Code er: En installationsmulighed vises nedenfor. Denne kommando står ikke i repositoriet; det er en installationsanbefaling: ```bash git clone '' cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/ ``` Kort om betalte promptbiblioteker, fordi spørgsmålet dukker op. Tjenesten motionsites.ai sælger en pakke færdige prompts til sektioner: Pr. juli 2026 koster den 239 dollar om året eller en kampagnepris på 349 dollar som engangsbeløb i stedet for 759, uden månedligt abonnement. Forfatteren er ikke angivet, og der er ingen ”Om”-side. Der findes også et website med næsten samme navn i ental, og omtalen af Claude Code-kompatibilitet findes kun på det website. Sammenlignet med Meng Tos gratis bibliotek under MIT-licensen vil jeg ikke anbefale købet, men det er værd at kende til muligheden. ## Hvordan giver du en agent opdateret GSAP-dokumentation på én linje?
Vigtigste pointer GSAP har en `llms.txt`-fil—et dokumentsammendrag på 25 kilobyte, som er lavet specifikt til sprogmodeller. Giv agenten et link til den, så kan den bruge opdaterede beskrivelser af metoder i stedet for det, den husker fra tidligere. Hver dokumentationsside findes også i en markdown-version. Motion-biblioteket har den samme fil, og den er endnu større.
Et almindeligt problem med animationsbiblioteker er, at agenten husker en forældet måde at forbinde dem på. Den skriver et import fra en gammel sti, registrerer et plugin på den måde, man brugte for to år siden, og koden kører ikke. Løsningen er selv at lægge dokumentationen ind i konteksten. GSAP stiller den til rådighed i et maskinvenligt format: ``` https://gsap.com/llms.txt ``` Filen er cirka 25 kilobyte på nuværende tidspunkt. Hver dokumentationsside findes også i en markdown-version—tilføj blot `.md` til URL'en. I praksis ser det sådan ud: ``` Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md Then build one scene on the home page: the headline appears as you scroll through the first screen, and the image on the right shifts more slowly than the text. Use only transform and opacity. No transition-all. ``` Motion-biblioteket (tidligere Framer Motion) har den samme fil, og den er endnu større. Motion distribueres under MIT-licensen og er fortsat ægte open source; den aktuelle version er `motion@12.42.2`. Hvis projektet er i React og kun skal bruge enkle fremvisninger, kan du vælge Motion; til komplekse scrollscener skal du bruge GSAP med pluginet ScrollTrigger.

ScrollTrigger gør det muligt for alle at skabe fantastiske scrollanimationer med minimal kode.

— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger
Der findes også browserbaserede muligheder, som ikke bruger biblioteker. Overgange mellem sidetilstande via View Transitions API kom med i baseline-understøttelsen den 14. oktober 2025—men kun på én enkelt side; versionen på tværs af sider understøttes slet ikke i Firefox. CSS-scrollanimationer er endnu ikke kommet med i baseline-understøttelsen: Chrome understøtter dem, Safari lærte dem for nylig, men i Firefox skal du aktivere dem manuelt i indstillingerne, så de virker ganske enkelt ikke for almindelige læsere. Bed agenten først om at tjekke, om browseren overhovedet understøtter dem, og lad den ellers beholde standardovergangen. ## Hvordan laver du en hjemmeside, du kan lide, om til en ledetekst?
Vigtigste pointer Meng Tos bibliotek har en skill, der tager en skærmoptagelse af et andet website, analyserer det lag for lag og udarbejder én detaljeret ledetekst. En anden skill gør det samme med sidens kildekode. Begge findes, netop fordi udtrykket ”lav en lignende animation” er meningsløst for en agent.
Den mest almindelige måde at forklare, hvad du ønsker, er at vise et eksempel. Det virker ikke direkte med en agent: Den ser ikke websitet, den ser tekst. `video-to-superprompt`-skillen udfylder hullet. Beskrivelsen i repositoriet lyder: Gør en videoreference til en detaljeret ledetekst til genskabelse eller inspiration. Den analyserer optagelsen i lag: fortælling, layout, bevægelse, typografi og 3D-grafik. Resultatet er én prompt, der er klar til brug. Dens hovedregel er formuleret eftertrykkeligt: Den anden skill, `html-to-interaction-prompts`, arbejder med kildekode: Den finder alt, der bevæger sig—reaktioner på markøren, 3D-grafik, scroll-effekter og lag, der bevæger sig med forskellige hastigheder—og opdeler siden i separate prompts, én til hver sektion, knap, hovertilstand eller effekt. Dens princip er at betragte kildens adfærd som sandheden og ikke opfinde effekter ud fra et skærmbillede, når koden er tilgængelig. Den tredje, `stitched-full-page-capture`, løser et praktisk problem. Et normalt skærmbillede af en hel side med lazy loading og 3D-grafik bliver gråt og tomt, fordi optagelsen sker før gengivelsen. Skillen ruller gennem siden skærmbillede for skærmbillede, venter på, at alt falder til ro, og sammensætter resultatet. Der er også en mulighed uden skærmoptagelse: Tilslut agenten til et bibliotek med direkte eksempler på brugerflader via MCP. Mobbins officielle server kan installeres med én kommando: ```bash claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp ``` Åbn derefter en ny session, vælg serveren på listen, og log ind i browseren. Agenten får adgang til skærmbilleder af rigtige, fungerende apps: Der er angivet mere end 621.500 skærmbilleder. Det er skærmbilleder af færdige produkter, ikke komponenter eller kode. Vigtig bemærkning: Mobbins server virker ikke med gratisabonnementet; den er tilgængelig på betalte abonnementer (pr. juli 2026). Der er en [separat artikel om Google Stitch](https://ailoot.ai/blog/da/google-stitch-claude-code-design/) om at forbinde eksterne tjenester til en agent og bruge samme metode til at hente et designsystem ind i Claude Code. ## Trin for trin: Et animeret website på en aften
Vigtigste pointer Rækkefølgen er: regler mod skabeloner, design-skill, vælg én visuel retning, byg en statisk side, og tilføj først til sidst én animeret scene. Tilføj bevægelse til sidst, én effekt ad gangen, ellers ved du ikke, hvor du skal begynde, når noget går i stykker. De syv trin nedenfor tager en aften, hvis du ikke prøver at animere alting på én gang.
1. ### Opsæt et projekt Hvis du ikke har et projekt endnu, skal du starte med en tom mappe. Opret den, åbn den i en terminal, og kør `claude` der. Bed i din første prompt om et skelet: ”Byg en enkeltsidet hjemmesidestruktur til min virksomhed (beskriv, hvad den er), ren HTML og CSS, ingen biblioteker.” Der dukker en række filer op—det er projektets rodmappe, hvor alt fra nu af foregår. 2. ### Skriv reglerne i CLAUDE.md Kopiér blokken Anti-Generic Guardrails ind i en fil med navnet `CLAUDE.md` i projektets rodmappe. Hvis den ikke findes, skal du bede agenten om at oprette den. Reglerne er skrevet til Tailwind; hvis dit skelet bruger ren CSS, skal du sige til agenten: ”Anvend disse principper på almindelig CSS”—reglernes betydning ændrer sig ikke. Se en gennemgang af Karpathys fire regler for at forstå, hvordan selve filen fungerer, og hvad du ellers kan skrive i den. 3. ### Installér frontend-design-skillen Brug pluginet `example-skills`, eller kopiér mappen `frontend-design` som beskrevet ovenfor. Du kan kontrollere, om skillen er indlæst, med kommandoen `/doctor`. 4. ### Vælg én visuel retning Fra Meng Tos bibliotek. Én, ikke to eller tre. Blander du brutalistisk dokumentarstil med beige minimalisme, får du netop det gennemsnit, du prøver at undgå. Mappenavnene er beskrivende, men du kan ikke få en visuel forhåndsvisning af dem: Åbn `SKILL.md` i den, du bedst kan lide, og læs beskrivelsen af farvepaletten og skrifttyperne—det hele står der. 5. ### Byg en statisk side Uden en eneste animation. Begynd med typografi, afstande og gitter. Bed agenten om at starte en lokal forhåndsvisning, og åbn adressen, den giver dig. Hvis du vil se siden på din telefon, så sig: ”Kør den, så den åbnes på andre enheder på mit netværk,” så giver agenten dig en adresse. 6. ### Tilføj én bevægelsesscene Kun én. Som regel er det den første skærm: Overskriften dukker op, og et baggrundslag bevæger sig langsommere end forgrunden. Giv agenten bibliotekets `llms.txt`, og beskriv scenen konkret—hvad der bevæger sig, hvor, og over hvor mange millisekunder. Lad opacity være i fred på den første skærm; der er et særskilt afsnit nedenfor om hvorfor. 7. ### Tilføj en regel for reduceret bevægelse Anvend CSS-reglen og JavaScript-opsætningen til reduceret bevægelse fra tilgængelighedsafsnittet. Kontrollér siden med reduceret bevægelse aktiveret før udgivelse. 8. ### Udgiv, og kontrollér hastigheden Udgiv på en vilkårlig gratis statisk hostingtjeneste—Vercel, Netlify eller GitHub Pages. Bed agenten: ”Udgiv dette projekt på Vercel, og giv mig linket.” Først efter udgivelsen skal du køre den resulterende URL gennem PageSpeed Insights: Tjenesten fungerer med offentlige URL'er og kan ikke se en lokal side. Se på ”Largest Contentful Paint”—tiden det tager at gengive det største element; den grønne zone er op til 2,5 sekunder. Agenten kan måle den lokale version før udgivelse: Chrome DevTools MCP åbner den i Chrome og viser den samme måling. Det er i trin seks, det er lettest at ødelægge arbejdet fra de foregående fem. ## Hvorfor får for mange animationer et website til at se endnu mere AI-genereret ud?
Vigtigste pointer Anthropic siger det direkte i dokumentationen til design-skillen: For mange bevægelser forstærker indtrykket af, at en side er genereret. Som standard tilføjer agenten afsløringseffekter til hver sektion efter tur, så resultatet bliver en side, hvor alting sitrer, og hvor opmærksomheden ikke ledes nogen steder hen. Det modsatte virker: én velovervejet scene på den første skærm og derefter mådehold.
Det er her, næsten alle, der begynder at beskæftige sig med emnet, tænker forkert: For lidt animation ser billigt ud, så man må tilføje mere.

Nogle gange er mindre mere, og for mange animationer bidrager til følelsen af, at designet er genereret.

— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Det står i selve den `frontend-design`-skill, du installerede for at forbedre designet. Anthropic advarer mod at overdrive i det værktøj, agenten bruger til at dekorere siden. Den nævner også andre standardgreb: et stort tal med en lille billedtekst og en gradientaccent som standardsvar på enhver opgave; nummererede blokke som 01 / 02 / 03, der kun passer, når der faktisk er tale om en rækkefølge. Sådan ser det ud i praksis, når man overdriver: Agenten får opgaven ”tilføj animationer” og lægger en scrollfremvisning på hver sektion. Overskriften glider ind, tre kort popper op efter hinanden, kundeudtalelser glider ind fra siden, og sidefoden toner frem. Hver effekt fungerer fint i sig selv. Tilsammen skaber de en side, der aldrig holder op med at bevæge sig, og hvor intet bliver fremhævet. Et levende website fungerer anderledes: én velovervejet scene, som regel på den første skærm, og mådehold derefter. Bevægelse fungerer som fremhævelse—det giver mening, så længe den falder på et enkelt ord. Det giver dig en regel for ledeteksten. Formulér den sådan: ”Lav én scene på den første skærm, og lad alt andet være statisk.” Det er kun nogle få ord anderledes end ”tilføj animationer”, men resultatet er en størrelsesorden bedre. ## Hvordan ødelægger animationer websitets hastighed?
Vigtigste pointer Den største fælde: En browser betragter slet ikke et element med nul opacity som kandidat til Largest Contentful Paint. Standardmetoden ”skjul sektionen, og vis den igen ved scroll”, anvendt på den første skærm, forringer den vigtigste hastighedsmåling direkte. Animér også kun transforms og opacity—alt andet udløser en genberegning af layoutet.
De tre målinger, Google bruger til at evaluere en side, er: tiden det tager at gengive det største element—højst 2,5 sekunder; reaktionsevnen ved en interaktion—højst 200 millisekunder; og layoutskift—højst 0,1. De måles ved den 75. percentil af virkelige besøg. Lad os udfolde, hvorfor det har betydning her. Som standard laver agenten en afsløring sådan her: Den sætter en sektion til nul opacity og fjerner derefter indstillingen, når sektionen kommer ind i visningsområdet. Hvis den effekt bruges på den første skærm, kan billedet være fuldt indlæst og dekodet, men målingen tæller det stadig ikke med, før gengivelsen begynder. Det er værre, hvis et script fjerner opacity efter indlæsning—så venter målingen på hele scriptet. Der er to måder at rette det på. Du kan enten starte afsløringen fra en lille opacity-værdi over nul i stedet for nul, så den indledende gengivelse tæller med. Eller lade opacity være i fred på den første skærm og kun animere forskydningen. Det andet spørgsmål er, hvad der er billigt at animere, og hvad der er dyrt.

Begræns så vidt muligt animationer til opacity- og transformegenskaber, så de forbliver på kompositionsstadiet i gengivelsespipelinen.

— web.dev, https://web.dev/articles/animations-guide
Kort fortalt: Browseren sammensætter billedet i lag, og ændringer af position og opacity sker i det sidste og billigste trin. Alt andet får den til at genberegne siden. Målinger fra den samme dokumentation: Animation med top- og left-forskydninger tager 37 millisekunder til layout og 79 til gengivelse; den samme visuelle effekt med transform tager nul for begge. Og her er en modsætning, der er værd at huske: Opacity er billig at kompositere, men gør et element uegnet til hastighedsmålingen. Animationer, der er billige for browseren, og animationer, der er sikre for ydeevnen, er altså to forskellige ting. En ting mere om egenskaben `will-change`, som agenter elsker at drysse ud ”for at optimere”. MDN-dokumentationen siger det modsatte:

Overdreven brug af will-change fører til et for stort hukommelsesforbrug og tvinger browseren til mere kompleks gengivelse, når den forsøger at forberede sig på mulige ændringer. Det forringer ydeevnen.

— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Dokumentationen siger også, at egenskaben er tænkt som sidste udvej ved eksisterende ydelsesproblemer. Den virker ikke forebyggende. En linje som `will-change: transform, opacity` på halvtreds elementer er et typisk afslørende tegn på genereret kode. Forklaringen er enklere, når det gælder layoutskift. Googles dokumentation giver ikke animationer skylden; tværtimod hjælper omhyggelige overgange med at opdatere indhold uden at overrumple læseren. Opskriften er den samme: Skift størrelse med transform i stedet for width og height, og flyt med forskydninger i stedet for koordinater. ## Hvad med mennesker, der tager fysisk skade af bevægelser?
Vigtigste pointer Op til 35% af voksne over fyrre år i USA har oplevet vestibulære lidelser. For dem kan scrollanimationer ende med kvalme og migræne. Systemets indstilling ”reducer bevægelse” har været understøttet af alle browsere i mere end fem år, men agenten tilføjer den ikke, medmindre du beder om det. Der kræves både CSS-regler og en udtrykkelig forgrening i JavaScript-animationens opsætning; læsning af præferencen alene stopper ikke en tidslinje.
Dette afsnit handler om mere end høflighed. Målgruppen, der køber fra en virksomhedsejer, er netop mennesker på fyrre år og derover. For personer med vestibulære lidelser kan scroll-animation give kvalme og migræne, nogle gange så alvorligt, at man må lægge sig ned. W3C-konsortiet beskriver konsekvenserne uden at mildne dem: Kvalme og migræne, nogle gange så alvorligt, at man må lægge sig ned. Du kan håndtere det med tre linjer styles: ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } ``` Tre ting at huske på. Skriv animationen som standardadfærd, og slå den fra inde i denne regel—så fungerer siden mere sikkert, end hvis du gør det modsatte. Specifikationen siger ”fjerner, reducerer eller erstatter”—fuldstændig fjernelse er ikke engang førstevalget. Det fungerer bedre at erstatte en brat indflyvning med en kort indtoning end at afbryde den helt: Hvis du deaktiverer alle animationer, går indlæsningsindikatorer og statusbjælker i stykker. JavaScript-drevne animationer kræver egen præferencehåndtering; en CSS-overstyring af varighed annullerer ikke en GSAP-tidslinje. Lagring af `matchMedia(...).matches` i en variabel gør intet, medmindre opsætningen forgrener på den. Behold elementet synligt i almindelig HTML/CSS til GSAP, og opret kun bevægelse, når brugeren tillader 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. ``` Overskriften må ikke have en skjult eller forskudt grundstil. Med reduceret bevægelse forbliver den synlig og statisk. Hvis præferencen ændres, mens siden er åben, tilbagefører GSAP animationen, når forespørgslen ikke længere matcher. `mm.revert()` fjerner også den indsamlede animation ved afmontering. Implementér tilsvarende forgrening i Motions opsætning; CSS-reglen alene er utilstrækkelig. Se [GSAP-dokumentationen for matchMedia-livscyklus og oprydning](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/). Der er også et formelt tilgængelighedskriterium at huske. WCAG 2.2.2, et kriterium på niveau A, kræver, at brugeren kan stoppe noget, der bevæger sig, blinker eller ruller automatisk, hvis det varer mere end fem sekunder og vises sammen med andet indhold. Det gælder automatisk roterende karuseller og uendelige løbebånd, som agenter gerne indsætter. ## Syv steder, hvor det går galt
Vigtigste pointer Næsten alle fejl skyldes tre ting: Den første skærm animeres, der er for meget bevægelse, eller de forkerte egenskaber animeres. Scrolljacking er et særskilt problem—brugbarhedsforskning kalder det direkte skadeligt. En nyttig animation varer 100 til 400 millisekunder, mens agenter gerne bruger et helt sekund som standard.
**1. Den første skærm er skjult, indtil den toner frem.** Et element med nul opacity tæller ikke som kandidat til målingen af gengivelsestiden. Det er den dyreste fejl, fordi den skader en måling, der påvirker søgerangeringer. **2. Alt animeres.** Hver sektion glider ind, hvert kort popper op. Anthropic siger direkte, at det forstærker indtrykket af et genereret design. **3. Scrolljacking.** Når et website erstatter musehjulets normale funktion med sin egen ”filmiske” logik. I den samme undersøgelse oplevede de fleste deltagere mindst en let desorientering. **4. Layoutegenskaber animeres.** Koordinater og dimensioner i stedet for transforms. 37 og 79 millisekunder sammenlignet med nul. **5. Animationerne er for lange.** Det nyttige interval er 100 til 400 millisekunder, hvor 400 allerede er meget langsomt og kun egner sig til store bevægelser. Agenter bruger gerne et helt sekund som standard. Ifølge hans resultater er det nyttige interval 100 til 400 millisekunder, hvor 400 allerede er meget langsomt og kun egner sig til store bevægelser. Agenter bruger gerne et helt sekund som standard. **6. Der er ingen regel for reduceret bevægelse.** Agenten tilføjer den ikke af sig selv. **7. Websitet bliver langsommere for hver interaktion.** Dette gælder specifikt React: En animation, der oprettes uden en reference til elementet og uden oprydning, mangedobles ved hver opdatering af komponenten. Siden begynder gradvist at blive langsommere uden nogen tilsyneladende grund. Der er en ottende fælde. Tilgangen, hvor ”agenten tager et skærmbillede og retter det, den ser”, fungerer fint på statiske sider, men med animerede elementer fanger den agenten i en endeløs redigeringssløjfe: Den ser et mellemstadie, tror, det er en fejl, retter det og ser et andet mellemstadie. Desuden sluger hvert skærmbillede kontekst. ## Hvad koster det, og hvordan undgår du at bruge en hel måneds kvote på ét website?
Vigtigste pointer Alle værktøjerne i denne opsætning er gratis; du betaler for selve agentens arbejde. Animationer bruger kvoten hurtigere end almindeligt layoutarbejde, fordi du ikke kan kontrollere resultatet ved at læse koden: Hver rettelse kræver, at filerne læses igen, og at der foretages yderligere gennemgange. Det hjælper at bygge én scene ad gangen, holde `CLAUDE.md` kort og deaktivere skærmbilledsløjfen for animerede elementer.
En typisk historie fra engelsksprogede vibe-coding-fællesskaber: Nogen bygger en prangende side med en rulletur gennem rummet, lægger resultatet op, og diskussionen afslører, at det ene website brugte hele vedkommendes månedlige kvote. Det er forventeligt. Animationer koster mere end almindeligt layoutarbejde af flere grunde på én gang. Du kan ikke kontrollere resultatet ved at læse koden; det kræver flere gennemgange. Hver rettelse betyder, at filerne skal læses igen. Og en skærmbilledsløjfe på elementer i bevægelse tilføjer unødvendige gennemløb. Det, der hjælper: Byg én scene ad gangen, og fastlås resultatet. En enkelt forespørgsel om at ”tilføje animationer på hele websitet” garanterer overforbrug. Du kan slå skærmbilledkontrol fra for animerede elementer og selv inspicere dem visuelt. Hold `CLAUDE.md` kort, så reglerne ikke bruger kontekst ved hver forespørgsel. Og giv agenten bibliotekets `llms.txt` på forhånd, ellers opfinder den en forældet forbindelsesmetode og fejlsøger derefter sin egen opfindelse. Artiklen [hvorfor Claude Code genlæser hele projektet](https://ailoot.ai/blog/da/claude-code-rereads-project/) forklarer, hvor tokens bruges under arbejdet med et projekt; artiklen [sådan undgår du at bruge hele din Claude Code-kvote](https://ailoot.ai/blog/da/claude-code-token-limits-saving/) gennemgår måder at holde forbruget i skak på. ## Hvad nu?
Vigtigste pointer Tilgangen virker: regler mod skabeloner, én visuel retning, én bevægelsesscene, en hastighedskontrol og respekt for læserens indstillinger. Det svære er at lægge de rigtige oplysninger ind i agentens kontekst på forhånd, så den har et grundlag at bygge videre på. Selve animationerne er den letteste del af arbejdet.
Byg din første side med de otte trin. Vælg én visuel retning, lav én scene på den første skærm, og kontrollér hastigheden.
### Kilder - [anthropics/skills](https://github.com/anthropics/skills) - officielle Anthropic-skills, herunder frontend-design - [GSAP: Priser](https://gsap.com/pricing) - bekræftelse af, at det er gratis - [GSAP 3.13-udgivelsen](https://gsap.com/blog/3-13) - hvad der blev gratis i slutningen af april 2025 - [GSAP: llms.txt](https://gsap.com/llms.txt) - dokumentation til sprogmodeller - [GSAP: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - plugin til scrollanimationer - [Motion](https://motion.dev/) - open source-alternativ under MIT-licensen - [web.dev: Animationsvejledning](https://web.dev/articles/animations-guide) - hvilke egenskaber der skal animeres - [MDN: will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - hvorfor man ikke skal indstille den på forhånd - [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - indstilling for reduceret bevægelse - [WCAG 2.2.2: Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - tilgængelighedskriterium - [W3C: Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - påvirkning af vestibulære lidelser - [Mobbin MCP](https://mobbin.com/mcp) - bibliotek med brugerfladereferencer til agenter
Til dine næste skridt—[Ailoot](https://ailoot.ai/). ## Spørgsmål og svar ### Hvorfor fortsætter GSAP-animationen trods en CSS-regel om reduceret bevægelse? CSS-overstyring af varighed annullerer ikke en JavaScript-tidslinje. Opret GSAP-animationen i en matchMedia-forgrening med no-preference, og behold grundelementet synligt, så reduceret bevægelse giver en statisk side. ### Hvordan stopper jeg ophobning af animationer efter navigation? Kald oprydningsfunktionen fra animationsopsætningen, når siden eller komponenten fjernes. I eksemplet gendanner mm.revert() stilarterne og fjerner animationer indsamlet af denne matchMedia-instans. ## Ailoot · Virksomheden og dens projektportefølje Ailoot bygger på solid driftserfaring, en stor kundebase, stabil service og løbende kontrol af KPI. Virksomheden og dens projektportefølje: millioner af kunder; månedligt salg for milliarder. Ailoot bruger denne driftserfaring til API-adgang til AI-funktioner i kundernes produkter, agenter, applikationer og automatiseringer.