# Så bygger du en animerad webbplats i Claude Code på en kväll
> Regler mot malliknande design, visuella riktlinjer, GSAP, tillgänglighet och prestandatester för en animerad webbplats i Claude Code.
Source: https://ailoot.ai/blog/sv/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/sv/animated-website-claude-code/
Language: sv
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-2dc687fa7e5c3213b78123a6550abf73f4dd6ca68c05ca263221378a902c9c36
Det viktigaste
Claude Code kan bygga en animerad webbplats på en kväll, men resultatet ser generiskt ut eftersom modellen utan uttryckliga begränsningar dras mot genomsnittet i träningsdata. Tre saker löser det: regler mot mallar i `CLAUDE.md`, en färdig visuell riktning i stället för en vag prompt och aktuell dokumentation för animationsbibliotek direkt i kontexten. Den största fallgropen är att överdriva rörelserna: överdrivna animationer avslöjar generering mer än frånvaron av animationer gör, och försämrar hastigheten ovanför vecket.
Läs mer om att arbeta med modeller i [Ailoot-dokumentationen](https://ailoot.ai/docs/).
## Varför märks en AI-byggd webbplats redan på första skärmen?
Det viktigaste
En modell utan fasta gränser tar genomsnittet av allt den har sett i träningsdata. Förr gav det lila knappar och typsnittet Inter; nu har trenden skiftat till krämfärgad bakgrund med serif-typsnitt och terrakottaaccent. Anthropic beskrev tre sådana standardutseenden i dokumentationen för sin egen skill och kallade dem uttryckligen standardbeteende.
Du ber en agent sätta ihop en landningssida. Fyrtio minuter senare har du en fungerande webbplats: sektionerna är på plats, den har responsiv layout och knapparna fungerar. Och nästan genast får du känslan av att ha sett den någon annanstans.
Orsaken är mekanisk. Modellen tränades på en enorm samling färdiga sidor, och den samlingen hade en tydlig slagsida.
Tusentals handledningar och startmallar kopierade den färgen, vilket snedvred urvalet, och modellen lärde sig att knappar är lila. Samma mekanism gäller typsnitt, rundade hörn och skuggor.
”AI-utseendet” har under tiden förändrats. I dokumentationen för sin `frontend-design`-skill beskriver Anthropic numera andra utseenden.
AI-genererad design samlas nu kring tre utseenden: en varm krämfärgad bakgrund (ungefär #F4F1EA) med en kontrasterande serif-rubrik och terrakottaaccent; en nästan svart bakgrund med en enda stark syrligt grön eller cinnoberröd accent; och en bred tidningslayout med hårfina linjer, noll hörnradie och täta tidningsspalter. Alla tre passar vissa uppgifter, men det här är standardbeteende, inte ett medvetet val, och de dyker upp oavsett tema.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Grundproblemet: slop uppstår när det inte finns något specifikt att kopiera, och modellen helt enkelt tar genomsnittet av alla webbplatser. Qt ser enhetligt ut just för att det inte vet hur det ska se ut på något annat sätt.
”Slop” betyder här maskingenererat arbete som har jämnats ut till ett generiskt resultat utan tydlig stil.
Den praktiska slutsatsen är att agenten behöver en snäv designgrammatik i stället för en öppen uppgift. Säger du ”gör den vacker” tar den genomsnittet. Ger du den en specifik färgpalett, ett par typsnitt och ett utmärkande visuellt grepp bygger den utifrån det.
Rörelser är den mest märkbara signalen i den här bilden. Även en statisk sida med perfekt typografi känns fortfarande som en mall, eftersom levande webbplatser andas: element visas när du rullar, markören förändrar saker och övergångar mellan skärmar bryts inte abrupt.
## Vad behöver du för att bygga en animerad webbplats i Claude Code?
Det viktigaste
Hela verktygslådan är gratis. Du behöver själva Claude Code, animationsbiblioteket GSAP (sedan slutet av april 2025 är det helt gratis, även tidigare betalpluginer som SplitText och MorphSVG), Anthropics `frontend-design`-skill och Meng Tos bibliotek med färdiga visuella riktningar, som har MIT-licens. Dessutom behöver du någon kostnadsfri värdtjänst för publicering. Du betalar bara för agentens arbete.
Vi går igenom verktygen ett i taget, eftersom det råder stor förvirring om priserna.
**GSAP** är animationsbiblioteket bakom en betydande andel prisbelönta webbplatser. Webflow köpte det i oktober 2024, och rykten om att allt blivit gratis började nästan omedelbart. Det stämmer inte riktigt: då bekräftade Webflow att de befintliga priserna skulle gälla. Biblioteket blev gratis **i slutet av april 2025** med version 3.13.
GSAP är nu helt gratis för alla användare, tack vare Webflows stöd.
— GSAP, https://gsap.com/pricing
I version 3.13 står det särskilt att tidigare betalpluginer som SplitText och MorphSVG också blev gratis, även för kommersiell användning. Den aktuella versionen i juli 2026 är `gsap@3.15.0`.
Gratis betyder däremot inte öppen källkod. Licensen är fortsatt proprietär och förbjuder att man bygger en visuell animationsredigerare med GSAP som konkurrerar med Webflow. Det finns inga begränsningar för webbplatser, kundprojekt eller kommersiellt arbete.
**Anthropics `frontend-design`-skill** är en uppsättning instruktioner som förändrar hur agenten arbetar med ett gränssnitt. Beskrivningen i dess repository lyder:
Vägledning för distinkt, genomtänkt visuell design när ett nytt gränssnitt skapas eller ett befintligt görs om. Hjälper till med estetisk riktning, typografi och val av designlösningar som inte läses som standardmallen.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Den innehåller en metod i två pass. Först sätter agenten ihop ett tokensystem: fyra till sex namngivna färger, typsnitt för minst två roller, en layoutplan som textskisser och ett utmärkande visuellt grepp för sidan. Sedan kritiserar den sin egen plan utifrån uppgiften. Först därefter skriver den kod.
**Meng Tos bibliotek** är `''`, har MIT-licens och omkring 2 400 stjärnor. Skaparen lanserade det i ett X-inlägg den 7 juli 2026.
Inlägget säger 75 skills, repositorybeskrivningen listar 78 och det finns 91 i filträdet i dag. Författaren är tydlig med detta: kontrollera repositoryt med ett sökkommando, eftersom beskrivningen är inaktuell.
## Hur får du Claude Code att sluta producera mallar?
Det viktigaste
Två steg. Lägg först in en uppsättning förbud i `CLAUDE.md`: använd inte standardpaletten, använd inte samma typsnitt för rubriker och brödtext och animera ingenting annat än opacitet och transformeringar. Installera sedan `frontend-design`-skill, som får agenten att sätta ihop ett tokensystem och kritisera sin plan innan den skriver kod.
Vi börjar med regelfilen, eftersom den gäller för varje förfrågan och inte kostar något.
En användbar utgångspunkt är ett block med skyddsregler mot mallar. Logiken är enkel: lista de specifika val som modellen brukar dras mot som standard och förbjud dem uttryckligen.
```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).
```
Blocket är avsiktligt skrivet på engelska: modellen följer korta tekniska instruktioner mer exakt på dokumentationens språk.
Animationsraden står bland förbuden tillsammans med färger och skuggor av en anledning. Opacitet på första skärmen påverkar hastighetsmåttet direkt, vilket vi återkommer till längre fram.
Därefter skillen. Anthropics officiella skills kan installeras via pluginet:
```bash
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
En detalj: design-skills kan inte installeras individuellt; pluginet `example-skills` installerar alla tolv på en gång. Om du bara vill ha en, kopierar du mappen manuellt—Claude Code hittar den utan att sessionen behöver startas om:
```bash
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/
```
Andra skills i samlingen som kan vara användbara: `theme-factory` med tio färdiga teman och krav på mänsklig bekräftelse innan de används, `web-artifacts-builder` för att bygga i React med färdiga komponenter och `algorithmic-art` för generativ grafik. En separat artikel förklarar i detalj hur man väljer skills för en uppgift: [så väljer du skills för Claude Code](https://ailoot.ai/blog/sv/choose-claude-code-skills/).
Reglerna och skillen fungerar tillsammans: reglerna förbjuder dåliga val, och skillen inför en process—system först, kritik sedan, kod sist.
Allt viktigt här sker före förfrågan. Du lägger i förväg in begränsningarna som agenten ska bygga efter i dess kontext, och själva promptens formulering spelar knappt någon roll längre. Det här kallas kontextteknik, och `CLAUDE.md`-filen är dess första byggsten. Kombinationen av **AI-klon + Andra hjärnan + kontextteknik** hjälper till att förvandla Claude från en generator av genomsnittliga resultat till ett verktyg som håller sig till din stil.
## Var hittar du färdiga visuella riktningar och animationspromptar?
Det viktigaste
Den främsta källan är Meng Tos bibliotek med MIT-licens: 91 skills, varav 73 inom webbdesign. Där finns färdiga visuella riktningar, till exempel brutalistisk dokumentärstil eller beige minimalism, och enskilda animationstekniker. Betalda promptbibliotek finns, men står sig dåligt jämfört med det här kostnadsfria biblioteket med MIT-licens.
Det finns ingen kategori för ”rörelser” i Meng Tos bibliotek, trots att den nämns i tillkännagivandet. Animationsskillen ligger bland de övriga under `web-design`.
Rörelseteknikerna som ingår är: `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 icke-programmerare har du större nytta av de färdiga visuella riktningarna. Välj en i stället för den vaga uppmaningen ”gör den modern”, så får modellen den snäva grammatik den saknade:
- `clean-minimal-beige-light-mode` - ljus beige minimalism
- `dark-glass-clean-layout` - mörkt glas
- `documentary-brutalist-agency` - brutalistisk dokumentärstil
- `editorial-portfolio-chapters` - portfolio indelad i kapitel, som en tidskrift
- `orange-clean-paper-saas` - en tjänstewebbplats i pappersstil med orange accent
- `solar-duotone-bold` - djärv behandling med två färger
- `tech-green-dark-mode-modern` - mörk teknikstil med grönt
- `light-mode-paper-technical` - ljust tekniskt papper
Det finns också tekniska skills för 3D-grafik och effekter: `threejs`, `matterjs`, `globe-gl`, `vantajs`, `unicorn-studio`, `progressive-blur`, `beautiful-shadows`, `css-border-gradient`.
Det finns inget installationskommando i repositoryt—författaren säger öppet i färdplanen att ett läggs till när integrationsmetoden är bestämd. Den enda instruktionen för Claude Code är:
Ett installationsalternativ visas nedan. Kommandot finns inte i repositoryt; det är en installationsrekommendation:
```bash
git clone ''
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/
```
Några ord om betalda promptbibliotek, eftersom frågan dyker upp. Tjänsten motionsites.ai säljer en uppsättning färdiga promptar för sektioner: i juli 2026 kostar den 239 dollar per år eller ett kampanjpris på 349 dollar som engångsköp i stället för 759, utan månadsabonnemang. Författaren anges inte och det finns ingen ”Om”-sida. Det finns också en webbplats med nästan samma namn i singular, och det är bara där Claude Code-kompatibilitet nämns. Jämfört med Meng Tos kostnadsfria bibliotek med MIT-licens skulle jag inte rekommendera köpet, men det är bra att känna till alternativet.
## Hur ger du en agent aktuell GSAP-dokumentation på en rad?
Det viktigaste
GSAP har en fil som heter `llms.txt`—en dokumentationssammanfattning på 25 kilobyte som är gjord särskilt för språkmodeller. Ge agenten en länk till den, så kan den använda aktuella metodbeskrivningar i stället för sådant den minns från förr. Varje dokumentationssida finns också i en markdown-version. Motion-biblioteket har samma fil, och den är ännu större.
Ett vanligt problem med animationsbibliotek är att agenten minns ett inaktuellt sätt att koppla in dem. Den skriver en import från en gammal sökväg, registrerar ett plugin på samma sätt som för två år sedan och koden körs inte.
Lösningen är att själv lägga in dokumentationen i kontexten. GSAP erbjuder den i ett maskinvänligt format:
```
https://gsap.com/llms.txt
```
Filen är ungefär 25 kilobyte i dag. Varje dokumentationssida finns också i en markdown-version—lägg bara till `.md` i webbadressen.
I praktiken ser det ut så här:
```
Läs https://gsap.com/llms.txt och https://gsap.com/docs/v3/Plugins/ScrollTrigger.md
Bygg sedan en scen på startsidan: rubriken visas när du rullar genom den första skärmen,
och bilden till höger rör sig långsammare än texten.
Använd bara transformering och opacitet. Ingen transition-all.
```
Motion-biblioteket (tidigare Framer Motion) har samma fil, och den är ännu större. Motion distribueras under MIT och är fortsatt verklig öppen källkod; den aktuella versionen är `motion@12.42.2`. Om projektet använder React och bara behöver enkla visningseffekter kan du välja Motion; för komplexa rullscener använder du GSAP med pluginet ScrollTrigger.
Med ScrollTrigger kan alla skapa fantastiska rullanimationer med minimal kod.
— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger
Det finns även alternativ som bara fungerar i webbläsaren och inte använder bibliotek. Sidövergångar via View Transitions API fick baslinjestöd den 14 oktober 2025—men bara inom en enda sida; versionen mellan sidor stöds inte alls i Firefox. CSS-rullanimationer har ännu inte fått baslinjestöd: Chrome stöder dem, Safari lärde sig dem nyligen, men i Firefox måste man aktivera dem manuellt i inställningarna, så vanliga läsare får dem helt enkelt inte att fungera. Be agenten först kontrollera om webbläsaren alls stöder dem, och om inte låta standardövergången vara kvar.
## Hur gör du om en webbplats du gillar till en prompt?
Det viktigaste
Meng Tos bibliotek innehåller en skill som tar en skärminspelning av en annan webbplats, analyserar den lager för lager och skapar en detaljerad prompt. En annan skill gör samma sak med sidans källkod. Båda finns just för att frasen ”gör en liknande animation” inte betyder något för en agent.
Det vanligaste sättet att förklara vad du vill ha är att visa ett exempel. Det fungerar inte direkt med en agent: den ser inte webbplatsen, den ser text.
Skillen `video-to-superprompt` överbryggar gapet. Beskrivningen i dess repository: omvandla en videoreferens till en detaljerad prompt för att återskapa eller hämta inspiration. Inuti analyserar den inspelningen i lager: berättelse, layout, rörelser, typografi och 3D-grafik. Resultatet är en färdig prompt.
Dess huvudregel är uttryckt med eftertryck:
Den andra skillen, `html-to-interaction-prompts`, arbetar med källkod: den hittar allt som rör sig—markörreaktioner, 3D-grafik, rulleffekter, lager som rör sig med olika hastighet—och delar upp sidan i separata promptar, en för varje sektion, knapp, hovringstillstånd eller effekt. Principen är att behandla källans beteende som sanningen och inte hitta på effekter utifrån en skärmbild när koden finns tillgänglig.
Den tredje, `stitched-full-page-capture`, löser ett praktiskt problem. En vanlig helsidesskärmbild av webbplatser med lat laddning och 3D-grafik blir grå och tom eftersom skärmbilden tas innan återgivningen. Skillen rullar genom sidan skärm för skärm, väntar tills allt har stabiliserats och syr ihop resultatet.
Det finns också ett sätt utan skärminspelning: anslut agenten till ett bibliotek med liveexempel på gränssnitt via MCP. Mobbins officiella server kan installeras med ett kommando:
```bash
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
```
Öppna sedan en ny session, välj servern i listan och logga in i webbläsaren. Agenten får tillgång till skärmbilder av verkliga, fungerande appar: över 621 500 skärmar finns listade. Det här är skärmbilder av färdiga produkter, inte komponenter eller kod. Viktig reservation: Mobbin-servern fungerar inte med gratisplanen; den finns på betalplanerna (i juli 2026). Det finns en [separat artikel om Google Stitch](https://ailoot.ai/blog/sv/google-stitch-claude-code-design/) om att ansluta externa tjänster till en agent och med samma metod föra in ett designsystem i Claude Code.
## Steg för steg: en animerad webbplats på en kväll
Det viktigaste
Ordningen är: regler mot mallar, design-skill, välj en visuell riktning, bygg en statisk sida och lägg först i sista steget till en animerad scen. Lägg till rörelser sist, en effekt i taget, annars finns det ingen tydlig startpunkt när något går sönder. De sju stegen nedan tar en kväll om du inte försöker animera allt på en gång.
1. ### Skapa ett projekt
Om du inte redan har ett projekt börjar du med en tom mapp. Skapa den, öppna den i en terminal och kör `claude` där. Be i den första prompten om ett grundskelett: ”bygg ett skelett till en ensidig webbplats för mitt företag (beskriv vad det gör), vanlig HTML och CSS, inga bibliotek”. En uppsättning filer dyker upp—det är projektroten, där allt sker från och med nu.
2. ### Lägg in reglerna i CLAUDE.md
Kopiera blocket Anti-Generic Guardrails till en `CLAUDE.md`-fil i projektroten. Om det inte finns någon, be agenten skapa den. Reglerna är skrivna för Tailwind; om ditt grundskelett använder vanlig CSS säger du ”tillämpa de här principerna på vanlig CSS”—reglernas innebörd ändras inte. Se en genomgång av Karpathys fyra regler för hur själva filen fungerar och vad mer du kan lägga in i den.
3. ### Installera frontend-design-skillen
Använd pluginet `example-skills` eller kopiera mappen `frontend-design` enligt beskrivningen ovan. Kontrollera att skillen har laddats med kommandot `/doctor`.
4. ### Välj en visuell riktning
Från Meng Tos bibliotek. En, inte två eller tre. Blandar du brutalistisk dokumentärstil med beige minimalism får du precis den utjämning du försöker undvika. Mappnamnen är beskrivande, men du kan inte förhandsgranska dem visuellt: öppna `SKILL.md` i den du gillar och läs beskrivningen av färgpaletten och typsnitten—allt står där.
5. ### Bygg en statisk sida
Utan en enda animation. Typografi, mellanrum och rutnät kommer först. Be agenten starta en lokal förhandsvisning och öppna adressen den ger dig. Om du vill titta på den i mobilen säger du ”kör den så att den öppnas på andra enheter i mitt nätverk”, så ger agenten dig en adress.
6. ### Lägg till en rörelsescen
Bara en. Vanligtvis är det den första skärmen: rubriken visas och ett bakgrundslager rör sig långsammare än förgrunden. Ge agenten bibliotekets `llms.txt` och beskriv scenen konkret—vad som rör sig, var och under hur många millisekunder. Lämna opaciteten orörd på den första skärmen; ett separat avsnitt nedan förklarar varför.
7. ### Lägg till en regel för minskad rörelse
Tillämpa både CSS-regeln och JavaScript-konfigureringen för minskad rörelse i tillgänglighetsavsnittet. Kontrollera sidan med minskad rörelse aktiverad före publicering.
8. ### Publicera och kontrollera hastigheten
Publicera på någon kostnadsfri tjänst för statisk webbhotell, till exempel Vercel, Netlify eller GitHub Pages. Be agenten ”publicera det här projektet på Vercel och ge mig länken”. Kör den resulterande webbadressen genom PageSpeed Insights först efter publicering: tjänsten fungerar med offentliga webbadresser och kan inte se en lokal sida. Titta på ”Largest Contentful Paint”—tiden det tar att återge det största elementet; den gröna zonen är upp till 2,5 sekunder. Agenten kan mäta den lokala versionen före publicering: Chrome DevTools MCP öppnar den i Chrome och visar samma mått.
Steg sex är där det är lättast att förstöra arbetet från de fem föregående.
## Varför får överdrivna animationer en webbplats att se ännu mer AI-genererad ut?
Det viktigaste
Anthropic säger det rakt ut i dokumentationen för design-skillen: överdrivna rörelser förstärker intrycket av att sidan är genererad. Som standard lägger agenten till visningseffekter på varje sektion i tur och ordning, vilket skapar en sida där allt rycker och uppmärksamheten inte leds någonstans. Motsatsen fungerar: en avsiktlig scen på första skärmen och sedan återhållsamhet.
Det är här nästan alla som intresserar sig för ämnet tappar tråden: för lite animation ser billigt ut, så man måste lägga till mer.
Ibland är mindre mer, och överdrivna animationer förstärker känslan av att designen är genererad.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Det står i själva `frontend-design`-skillen som du installerade för att förbättra designen. Anthropic varnar för att överdriva i verktyget agenten använder för att dekorera sidan.
Den listar också andra standardknep: ett stort tal med en liten bildtext och gradientaccent som standardsvar på varje uppgift; numrerade block som 01 / 02 / 03, lämpliga bara när det faktiskt finns en följd.
Så här ser överdriften ut i praktiken: agenten får uppgiften ”lägg till animationer” och lägger till en rullvisning på varje sektion. Rubriken glider in, tre kort dyker upp efter varandra, kundomdömen glider in från sidan och sidfoten tonas in. Varje effekt är bra för sig. Tillsammans skapar de en sida som aldrig slutar röra sig och inte betonar någonting.
En levande webbplats fungerar annorlunda: en avsiktlig scen, oftast på första skärmen, och återhållsamhet efter det. Rörelser fungerar som betoning—det är rimligt så länge de faller på ett enda ord.
Det ger dig en regel för prompten. Formulera den så här: ”gör en scen på den första skärmen och låt allt annat vara statiskt”. Det skiljer bara några få ord från ”lägg till animationer”, men resultatet är en storleksordning bättre.
## Hur försämrar animationer webbplatsens hastighet?
Det viktigaste
Den främsta fallgropen: webbläsaren överväger inte ens ett element med noll opacitet som kandidat för Largest Contentful Paint. Standardtekniken att ”dölja sektionen och visa den vid rullning”, när den används på första skärmen, skadar nyckelmåttet för hastighet direkt. Animera dessutom bara transformeringar och opacitet—allt annat utlöser en omberäkning av layouten.
De tre mått som Google använder för att utvärdera en sida är: tid att återge det största elementet—högst 2,5 sekunder; respons på en interaktion—högst 200 millisekunder; och layoutförskjutning—högst 0,1. De mäts vid den 75:e percentilen av verkliga besök.
När webbläsaren väljer det största elementet utesluter den element med noll opacitet—de som är osynliga för användaren—från kandidaterna.
Låt oss reda ut varför det spelar roll här. Som standard bygger agenten en visningseffekt så här: den sätter en sektion till noll opacitet och tar sedan bort inställningen när sektionen kommer in i visningsområdet. Om den effekten finns på första skärmen kan bilden vara helt inläst och avkodad, men måttet räknar den ändå inte förrän återgivningen börjar. Det blir värre om ett skript tar bort opaciteten efter inläsningen—då väntar måttet på hela skriptet.
Det finns två sätt att lösa detta. Börja antingen visningseffekten med en liten opacitet större än noll i stället för noll, så räknas den första återgivningen. Eller låt opaciteten vara orörd på första skärmen och animera bara förskjutningen.
Den andra frågan gäller vad som är billigt och vad som är dyrt att animera.
Begränsa om möjligt animationer till opacitets- och transformeringsegenskaper så att de stannar i kompositeringssteget av återgivningskedjan.
— web.dev, https://web.dev/articles/animations-guide
Enkelt uttryckt sätter webbläsaren ihop bilden i lager, och ändringar av position och opacitet sker i det sista, billigaste steget. Allt annat får den att räkna om sidan. Mätningar i samma dokumentation: animation med förskjutningarna top och left tar 37 millisekunder för layout och 79 för återgivning; samma visuella effekt med transform tar noll för båda.
Och här är en motsägelse att komma ihåg: opacitet är billig att kompositera, men gör att ett element inte kvalificerar för hastighetsmåttet. En animation som är billig för webbläsaren och säker för prestandan är alltså två olika saker.
En sak till om egenskapen `will-change`, som agenter gärna strör omkring sig ”för optimering”. MDN-dokumentationen säger motsatsen:
Överdriven användning av will-change leder till överdriven minnesförbrukning och tvingar webbläsaren att göra mer komplex återgivning när den försöker förbereda sig för möjliga ändringar. Det försämrar prestandan.
— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Där står också att egenskapen är avsedd som en sista utväg för befintliga prestandaproblem. Den fungerar inte förebyggande. En rad som `will-change: transform, opacity` på femtio element är ett typiskt tecken på genererad kod.
Historien är enklare med layoutförskjutning. Googles dokumentation lägger inte skulden på animationer; tvärtom hjälper noggranna övergångar till att uppdatera innehåll utan att överraska läsaren. Receptet är detsamma: ändra skalan med transform i stället för bredd och höjd, och flytta med förskjutningar i stället för koordinater.
## Hur är det med personer som tar fysisk skada av rörelser?
Det viktigaste
Upp till 35% av vuxna över fyrtio år i USA har upplevt vestibulära störningar. För dem kan rullanimationer leda till illamående och migrän. Systeminställningen ”minska rörelse” har stötts av alla webbläsare i mer än fem år, men agenten lägger inte till den om du inte ber om det. Både CSS-regler och uttrycklig förgrening i JavaScripts animationskonfigurering behövs; att läsa inställningen ensam stoppar ingen tidslinje.
Det här avsnittet spelar roll av fler skäl än ren artighet. Målgruppen som köper av en företagare består just av personer som är fyrtio år och äldre.
För personer med vestibulära besvär kan rullningsanimationer vara obehagliga. W3C-konsortiet beskriver följderna utan förskönande omskrivningar: illamående och migrän, ibland så svåra att man måste lägga sig ner.
CSS-delen kan hanteras med följande regel; JavaScript-animationer behöver dessutom förgreningen nedan:
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
Tre saker att tänka på.
Skriv animationen som standardbeteende och inaktivera den i den här regeln—då försämras sidan säkrare än om du gör tvärtom.
Specifikationen säger ”tar bort, minskar eller ersätter”—fullständig borttagning är inte ens det första alternativet. Det fungerar bättre att ersätta en skarp inskjutning med en kort toning än att klippa bort den helt: om alla animationer inaktiveras går laddningsindikatorer och förloppsstaplar sönder.
JavaScript-styrda animationer behöver egen hantering av rörelseinställningen; en CSS-ändring av varaktigheten avbryter inte en GSAP-tidslinje. Att bara lagra `matchMedia(...).matches` i en variabel gör inget om konfigureringen inte förgrenar på värdet. Behåll elementet synligt i vanlig HTML/CSS och skapa rörelse bara när användaren tillåter den för GSAP:
```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.
```
Rubriken får inte ha någon dold eller förskjuten grundstil. Med minskad rörelse aktiverad förblir den synlig och statisk. Om inställningen ändras med sidan öppen återställer GSAP animationen när mediefrågan slutar matcha. `mm.revert()` tar också bort insamlad animation när sidan städas bort. Implementera motsvarande förgrening i Motions egen konfigurering; CSS-regeln ensam räcker inte. Se [GSAP-dokumentationen om matchMedia-livscykel och städning](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/).
Det finns också ett formellt tillgänglighetskriterium att tänka på. WCAG 2.2.2, ett kriterium på nivå A, kräver att användaren ska kunna stoppa allt som rör sig, blinkar eller rullar automatiskt, varar längre än fem sekunder och visas tillsammans med annat innehåll. Det gäller karuseller som roterar automatiskt och oändliga löpband, som agenter gärna lägger in.
## Sju ställen där det går snett
Det viktigaste
Nästan alla fel handlar om tre orsaker: första skärmen animeras, det är för mycket rörelse eller fel egenskaper animeras. Scrolljacking är ett separat problem—användbarhetsforskning visar direkt att det är skadligt. En användbar animationslängd är 100 till 400 millisekunder, medan agenter gärna använder en hel sekund som standard.
**1. Den första skärmen är dold tills den tonas in.** Ett element med noll opacitet räknas inte som kandidat till återgivningsmåttet. Det här är det dyraste misstaget eftersom det skadar ett mått som påverkar sökrankningen.
**2. Allt animeras.** Varje sektion glider in, varje kort dyker upp. Anthropic säger tydligt att detta förstärker intrycket av genererad design.
**3. Scrolljacking.** När en webbplats ersätter mushjulets normala beteende med sin egen ”filmiska” logik.
I samma studie upplevde de flesta deltagare åtminstone lätt desorientering.
**4. Layoutegenskaper animeras.** Koordinater och dimensioner i stället för transformeringar. 37 och 79 millisekunder jämfört med noll.
**5. Animationerna är för långa.** Den användbara längden är 100 till 400 millisekunder, där 400 redan är mycket långsamt och bara passar för stora rörelser. Agenter använder gärna en hel sekund som standard.
Enligt hans resultat är det användbara intervallet 100 till 400 millisekunder, där 400 redan är mycket långsamt och bara passar stora rörelser. Agenter använder gärna en hel sekund som standard.
**6. Det saknas en regel för minskad rörelse.** Agenten lägger inte till någon på egen hand.
**7. Webbplatsen blir långsammare för varje interaktion.** Detta gäller särskilt React: en animation som skapas utan referens till elementet och utan rensning mångfaldigas vid varje komponentuppdatering. Sidan börjar gradvis bli långsammare utan någon uppenbar anledning.
Det finns en åttonde fallgrop. Metoden där ”agenten tar en skärmbild och rättar det den ser” fungerar utmärkt på statiska sidor, men med animerade element fastnar agenten i en ändlös redigeringsloop: den ser en mellanbild, tror att det är ett fel, rättar det och ser en ny mellanbild. Dessutom förbrukar varje skärmbild kontext.
## Vad kostar det, och hur undviker du att förbruka en månadsgräns på en enda webbplats?
Det viktigaste
Alla verktygen i den här uppsättningen är gratis; du betalar för själva agentens arbete. Animationer förbrukar gränser snabbare än vanligt layoutarbete, eftersom du inte kan verifiera resultatet genom att läsa koden: varje ändring kräver att filer läses igen och att fler iterationer görs. Det hjälper att bygga en scen i taget, hålla `CLAUDE.md` kort och stänga av skärmbildsloopen för animerade element.
En vanlig berättelse från engelskspråkiga vibe-kodningsgrupper: någon bygger en prålig sida med en rullning genom rymden, publicerar resultatet och diskussionen visar att den enda webbplatsen förbrukade hela månadskvoten.
Det är väntat. Animationer kostar mer än vanligt layoutarbete av flera skäl samtidigt. Du kan inte verifiera resultatet genom att läsa koden; det krävs iterationer. Varje ändring innebär att filer måste läsas igen. Och en skärmbildsloop på rörliga element lägger till onödiga omgångar.
Det här hjälper:
Bygg en scen i taget och lås resultatet. En engångsbegäran om att ”lägga till animationer på hela webbplatsen” garanterar överdriven förbrukning. Du kan stänga av skärmbildsverifiering på animerade element och inspektera dem visuellt själv. Håll `CLAUDE.md` kort så att reglerna inte förbrukar kontext vid varje begäran. Ge agenten bibliotekets `llms.txt` i förväg, annars hittar den på en inaktuell kopplingsmetod och felsöker sedan sin egen uppfinning.
Artikeln [varför Claude Code läser om hela projektet](https://ailoot.ai/blog/sv/claude-code-rereads-project/) förklarar vart token tar vägen när man arbetar med ett projekt; artikeln [så undviker du att förbruka Claude Code-gränserna](https://ailoot.ai/blog/sv/claude-code-token-limits-saving/) beskriver hur användningen kan hållas under kontroll.
## Vad händer härnäst?
Det viktigaste
Metoden fungerar: regler mot mallar, en visuell riktning, en rörelsescen, en hastighetskontroll och respekt för läsarens inställningar. Det svåra är att lägga rätt information i agentens kontext i förväg, så att den har något att bygga vidare på. Själva animationerna är den enklaste delen av arbetet.
Bygg din första sida med de åtta stegen. Välj en visuell riktning, skapa en scen på första skärmen och kontrollera hastigheten.
### Källor
- [anthropics/skills](https://github.com/anthropics/skills) - officiella Anthropic-skills, inklusive frontend-design
- [GSAP: Priser](https://gsap.com/pricing) - bekräftelse på att det är gratis
- [GSAP 3.13-versionen](https://gsap.com/blog/3-13) - vad som blev gratis i slutet av april 2025
- [GSAP: llms.txt](https://gsap.com/llms.txt) - dokumentation för språkmodeller
- [GSAP: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - plugin för rullanimationer
- [Motion](https://motion.dev/) - MIT-alternativ med öppen källkod
- [web.dev: Animationsguide](https://web.dev/articles/animations-guide) - vilka egenskaper som ska animeras
- [MDN: will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - varför den inte ska ställas in i förväg
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - inställning för minskad rörelse
- [WCAG 2.2.2: Pausa, stoppa, dölj](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - tillgänglighetskriterium
- [W3C: Animation från interaktioner](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - effekter på vestibulära störningar
- [Mobbin MCP](https://mobbin.com/mcp) - bibliotek med gränssnittsreferenser för agenter
För dina nästa steg—[Ailoot](https://ailoot.ai/).
## Frågor om den här guiden: Så bygger du en animerad webbplats i Claude Code på en kväll
### Varför lämnar en CSS-regel för minskad rörelse GSAP-animationen igång?
Ändrad CSS-varaktighet avbryter inte en JavaScript-tidslinje. Skapa GSAP-animationen i en matchMedia-gren för no-preference och håll grundelementet synligt så att minskad rörelse lämnar en statisk sida.
### Hur stoppar jag animationer från att samlas efter navigering?
Anropa städfunktionen som animationskonfigureringen returnerar när sidan eller komponenten tas bort. I exemplet återställer mm.revert() stilar och tar bort animationer som samlats av den matchMedia-instansen.
## Ailoot · Företaget och dess projektportfölj
Ailoot bygger på etablerad driftserfarenhet, en stor kundbas, stabil service och löpande KPI-kontroll.
Företaget och dess projektportfölj: miljontals kunder; månatlig försäljning för miljarder.
Ailoot använder denna driftserfarenhet för API-åtkomst till AI-funktioner i kundernas produkter, agenter, applikationer och automatiseringar.