Näin rakennat animoidun verkkosivuston Claude Codessa yhden illan aikana

Lue lisää mallien kanssa työskentelystä Ailoot-dokumentaatiosta.

Miksi tekoälyn rakentaman verkkosivuston tunnistaa heti ensimmäisestä näkymästä?#

Pyydät agenttia kokoamaan laskeutumissivun. Neljäkymmentä minuuttia myöhemmin sinulla on toimiva sivusto: osiot ovat paikoillaan, asettelu mukautuu eri näytöille ja painikkeet toimivat. Melkein heti tulee kuitenkin tunne, että olet nähnyt tämän jossain aiemmin.

Syy on mekaaninen. Malli koulutettiin valtavalla valmiiden sivujen kokoelmalla, ja kokoelma oli vahvasti vinoutunut.

Tuhannet tutoriaalit ja aloituspohjat kopioivat tuota väriä, vääristivät otosta, ja malli oppi painikkeiden olevan violetteja. Sama mekanismi pätee fontteihin, pyöristettyihin kulmiin ja varjoihin.

”Tekoälyilme” on sittemmin muuttunut. Anthropic kuvailee nykyisin toisenlaisia ilmeitä frontend-design-taitonsa dokumentaatiossa.

Perimmäinen ongelma: sloppia syntyy, kun kopioitavaa ei ole tarpeeksi täsmällisesti, joten malli vain keskiarvoistaa kaikki verkkotyylit yhteen.

”Slop” tarkoittaa tässä koneellisesti tuotettua työtä, joka on keskiarvoistettu geneeriseksi tulokseksi ilman tunnistettavaa tyyliä.

Käytännön opetus on, että agentti tarvitsee kapean suunnittelukieliopin avoimen tehtävän sijaan. Jos sanot ”tee siitä kaunis”, se valitsee keskiarvon. Jos annat sille tietyn väripaletin, pari kirjasinperhettä ja yhden määrittävän visuaalisen keinon, se rakentaa niiden pohjalta.

Liike on tässä kuvassa huomattavin signaali. Jopa staattinen sivu, jonka typografia on täydellinen, näyttää edelleen mallipohjalta, koska elävät verkkosivustot hengittävät: elementtejä ilmestyy vieritettäessä, kohdistin saa asioita muuttumaan, eivätkä siirtymät näkymien välillä katkea äkillisesti.

Mitä tarvitset animoidun verkkosivuston rakentamiseen Claude Codessa?#

Käydään työkalut läpi yksi kerrallaan, koska hinnoittelusta on paljon epäselvyyttä.

GSAP on animaatiokirjasto, jonka taustalla on huomattava osa palkituista verkkosivustoista. Webflow osti sen lokakuussa 2024, ja huhut kaiken muuttumisesta maksuttomaksi alkoivat melkein heti. Se ei aivan pidä paikkaansa: tuolloin Webflow vahvisti, että aiempi hinnoittelu pysyisi voimassa. Kirjasto muuttui maksuttomaksi huhtikuun 2025 lopussa version 3.13 myötä.

Julkaisutiedoissa versiosta 3.13 sanotaan nimenomaan, että myös aiemmin maksulliset lisäosat, kuten SplitText ja MorphSVG, muuttuivat maksuttomiksi myös kaupallisessa käytössä. Nykyinen versio heinäkuussa 2026 on gsap@3.15.0.

Maksuton ei kuitenkaan tarkoita avoimen lähdekoodin ohjelmistoa. Lisenssi on edelleen omisteinen ja kieltää rakentamasta GSAPilla visuaalista animaatioeditoria, joka kilpailee Webflown kanssa. Verkkosivustoihin, asiakasprojekteihin tai kaupalliseen työhön ei liity rajoituksia.

Anthropicin frontend-design-taito on joukko ohjeita, jotka muuttavat sitä, miten agentti työskentelee käyttöliittymän parissa. Sen tietovaraston kuvauksessa sanotaan:

Siinä on kaksivaiheinen menetelmä. Ensin agentti kokoaa suunnittelutokenien järjestelmän: neljästä kuuteen nimettyä väriä, kirjasinperheet vähintään kahteen rooliin, asettelukaavion tekstiluonnoksina sekä yhden sivua määrittävän visuaalisen keinon. Sitten se arvioi suunnitelmansa tehtävän vaatimuksia vasten. Vasta sen jälkeen se kirjoittaa koodin.

Postauksessa kerrotaan 75 taidosta, tietovaraston kuvauksessa luetellaan 78, ja tiedostopuussa niitä on nykyään 91. Tekijä sanoo tämän suoraan: tarkista tietovarasto hakukomennolla, sillä kuvaus on vanhentunut.

Miten saat Claude Coden lopettamaan mallipohjien tuottamisen?#

Aloitetaan sääntötiedostosta, sillä se vaikuttaa jokaiseen pyyntöön eikä maksa mitään.

Hyödyllinen lähtökohta on anti-template-suojakaiteiksi kutsuttu sääntöjoukko. Ajatus on yksinkertainen: luettele ne tarkat valinnat, joihin malli yleensä oletusarvoisesti ajautuu, ja kiellä ne nimeltä.

## 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).

Lohko on tarkoituksella englanniksi: malli noudattaa lyhyitä teknisiä ohjeita tarkemmin dokumentaation kielellä.

Animaatiorivi on kieltolistassa värien ja varjojen rinnalla syystä. Ensimmäisen näkymän opacity heikentää suoraan nopeusmittaria, kuten jäljempänä kerromme.

Seuraavaksi taito. Anthropicin viralliset taidot voi asentaa lisäosan kautta:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Yksi yksityiskohta: suunnittelutaitoja ei voi asentaa yksittäin; example-skills-lisäosa tuo kaikki kaksitoista kerralla. Jos haluat vain yhden, kopioi kansio käsin — Claude Code löytää sen ilman istunnon uudelleenkäynnistystä:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

Muut tähän kokoelmaan kuuluvat mahdollisesti hyödylliset taidot ovat theme-factory, jossa on kymmenen valmista teemaa ja vaatimus ihmisen vahvistuksesta ennen niiden käyttöönottoa, web-artifacts-builder Reactilla rakentamiseen valmiita komponentteja käyttäen sekä algorithmic-art generatiivista grafiikkaa varten. Erillisessä artikkelissa kerrotaan tarkemmin, miten tehtävään valitaan taitoja: miten valita taitoja Claude Codeen.

Säännöt ja taito toimivat yhdessä: säännöt kieltävät huonot valinnat, ja taito määrittää prosessin — ensin järjestelmä, sitten arviointi, lopuksi koodi.

Kaikki tärkeä tapahtuu tässä jo ennen pyyntöä. Lisäät agentin kontekstiin etukäteen ne rajoitteet, joiden mukaan se rakentaa, jolloin itse kehotteen sanamuodolla on tuskin enää merkitystä. Tätä lähestymistapaa kutsutaan kontekstisuunnitteluksi, ja CLAUDE.md-tiedosto on sen ensimmäinen rakennuspalikka. Tekoälyklooni + toinen aivo + kontekstisuunnittelu -yhdistelmä auttaa muuttamaan Clauden keskinkertaisen tuloksen tuottajasta työkaluksi, joka pysyy tyylissäsi.

Mistä löydät valmiita visuaalisia suuntia ja animaatiokehotteita?#

Kirjaston sisältämiä liiketekniikoita ovat: 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.

Jos et ohjelmoi, sinulle tärkeämpiä ovat valmiit visuaaliset suunnat. Epämääräisen ”tee tästä moderni” -kehotteen sijaan valitse yksi näistä ja anna mallille se kapea kielioppi, joka siltä puuttui:

• clean-minimal-beige-light-mode - vaalea beige minimalismi
• dark-glass-clean-layout - tummaa lasia
• documentary-brutalist-agency - dokumentaarinen brutalismi
• editorial-portfolio-chapters - lukuihin jaettu portfolio, kuin aikakauslehti
• orange-clean-paper-saas - paperityylinen palvelusivusto oranssilla korostuksella
• solar-duotone-bold - rohkea kaksivärinen ilme
• tech-green-dark-mode-modern - tumma tekninen tyyli vihreällä
• light-mode-paper-technical - vaalea tekninen paperi

3D-grafiikoille ja tehosteille on myös teknisiä taitoja: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

Tietovarastossa ei ole asennuskomentoa — tekijä sanoo tiekartassa suoraan, että lisää sellaisen, kun integrointitapa on päätetty. Claude Codea varten annettu ainoa ohje on:

Yksi asennusvaihtoehto näkyy alla. Tämä komento ei ole tietovarastossa; se on asennussuositus:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Lyhyesti maksullisista kehotekokoelmista, koska asiasta kysytään. motionsites.ai-palvelu myy valmiita kehotejoukkoja sivuosioille: heinäkuussa 2026 hinta on 239 dollaria vuodessa tai kertaluonteinen 349 dollarin kampanjahinta 759 dollarin sijaan. Kuukausipakettia ei ole. Tekijää ei mainita, eikä sivustolla ole ”Tietoja”-sivua. Lisäksi lähes samanniminen palvelu käyttää nimeä yksikössä, ja maininta Claude Code -yhteensopivuudesta löytyy vain siltä sivustolta. En suosittelisi ostosta, mutta vaihtoehdosta on hyvä tietää.

Miten annat agentille tuoreet GSAP-dokumentit yhdellä rivillä?#

Animaatiokirjastojen yleinen ongelma on, että agentti muistaa vanhentuneen tavan liittää ne yhteen. Se kirjoittaa importin vanhasta polusta, rekisteröi lisäosan kaksi vuotta sitten käytetyllä tavalla, eikä koodi toimi.

Ratkaisu on lisätä dokumentaatio itse kontekstiin. GSAP tarjoaa sen koneystävällisessä muodossa:

https://gsap.com/llms.txt

Tiedosto on nykyään noin 25 kilotavua. Jokaisesta dokumentaatiosivusta on myös markdown-versio — lisää vain .md URL-osoitteeseen.

Käytännössä se näyttää tältä:

Lue https://gsap.com/llms.txt ja https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Rakenna sitten yksi näkymä etusivulle: otsikko ilmestyy, kun vierität
ensimmäisen näkymän läpi, ja oikealla oleva kuva siirtyy hitaammin kuin teksti.
Käytä vain transform- ja opacity-ominaisuuksia. Ei transition-all-ominaisuutta.

Motion-kirjastossa (aiemmin Framer Motion) on sama tiedosto, ja se on vielä suurempi. Motion julkaistaan MIT-lisenssillä ja se on edelleen aidosti avoimen lähdekoodin ohjelmisto; nykyinen versio on motion@12.42.2. Jos projekti käyttää Reactia ja tarvitsee vain yksinkertaisia paljastuksia, voit valita Motionin; monimutkaisiin vieritysnäkymiin käytä GSAPia ja ScrollTrigger-lisäosaa.

On myös vain selaimessa toimivia vaihtoehtoja, joissa ei käytetä kirjastoja. View Transitions API:n sivutilasiirtymät tulivat perustason tuen piiriin 14. lokakuuta 2025 — mutta vain yhden sivun sisällä; sivujen välistä versiota ei tueta Firefoxissa lainkaan. CSS-vieritysanimaatiot eivät vielä ole saavuttaneet perustason tukea: Chrome tukee niitä, Safari oppi ne hiljattain, mutta Firefoxissa ne täytyy ottaa asetuksista käsin käyttöön, joten tavallisilla lukijoilla ne eivät yksinkertaisesti toimi. Pyydä agenttia tarkistamaan ensin, tukeeko selain niitä lainkaan, ja jos ei tue, jätä tavallinen siirtymä käyttöön.

Miten muutat mieleisesi verkkosivuston kehotteeksi?#

Tavallisin tapa selittää, mitä haluat, on näyttää esimerkki. Se ei toimi suoraan agentin kanssa: se ei näe verkkosivustoa, vaan tekstiä.

video-to-superprompt-taito kuroa umpeen tämän kuilun. Sen tietovaraston kuvauksen mukaan se muuntaa videoviitteen yksityiskohtaiseksi kehotteeksi uudelleenluomista tai inspiraatiota varten. Sisällä se analysoi tallenteen kerroksittain: kerronta, asettelu, liike, typografia ja 3D-grafiikka. Tuloksena on yksi valmis kehote.

Sen pääsääntö ilmaistaan painokkaasti:

Toinen taito, html-to-interaction-prompts, käsittelee lähdekoodia: se löytää kaiken liikkuvan — kohdistimen reaktiot, 3D-grafiikat, vieritysefektit ja eri nopeuksilla liikkuvat kerrokset — ja jakaa sivun erillisiksi kehotteiksi, yhden kutakin osiota, painiketta, hover-tilaa tai tehostetta kohti. Sen periaatteena on pitää lähteen käyttäytymistä totuutena eikä keksiä ruutukaappaukseen perustuvia tehosteita silloin, kun koodi on saatavilla.

Kolmas, stitched-full-page-capture, ratkaisee käytännön ongelman. Tavallinen koko sivun ruutukaappaus laiskaa latausta ja 3D-grafiikkaa käyttävistä verkkosivustoista näyttää harmaalta ja tyhjältä, koska kaappaus tehdään ennen renderöintiä. Taito vierittää sivua ruutu kerrallaan, odottaa kaiken asettumista ja kokoaa tuloksen yhteen.

On myös tapa, jossa ei tarvita ruudunkaappausta: yhdistä agentti live-käyttöliittymäesimerkkien kirjastoon MCP:n kautta. Mobbinin virallisen palvelimen voi asentaa yhdellä komennolla:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Avaa sen jälkeen uusi istunto, valitse palvelin luettelosta ja kirjaudu sisään selaimessa. Agentti saa käyttöönsä oikeiden, toimivien sovellusten ruutukaappauksia: luettelossa on yli 621 500 ruutua. Nämä ovat valmiiden tuotteiden ruutukaappauksia, eivät komponentteja tai koodia. Tärkeä huomio: Mobbin-palvelin ei toimi ilmaisversiossa; se on saatavilla maksullisilla tilauksilla (heinäkuussa 2026). Erillisessä Google Stitchiä käsittelevässä artikkelissa kerrotaan ulkoisten palvelujen yhdistämisestä agenttiin samalla tavalla niin, että Claude Codeen tuodaan suunnittelujärjestelmä.

Vaihe vaiheelta: animoitu verkkosivusto yhden illan aikana#

1. Luo projekti

   Jos sinulla ei vielä ole projektia, aloita tyhjästä kansiosta. Luo se, avaa se terminaalissa ja suorita siellä claude. Pyydä ensimmäisessä kehotteessa pohjaa: ”rakenna yritykselleni yhden sivun verkkosivuston runko (kuvaile, mistä siinä on kyse), pelkkää HTML:ää ja CSS:ää, ei kirjastoja”. Tiedostojoukko ilmestyy — se on projektin juuri, jossa kaikki tästä eteenpäin tapahtuu.

2. Lisää säännöt tiedostoon CLAUDE.md

   Kopioi Anti-Generic Guardrails -lohko projektin juureen CLAUDE.md-tiedostoon. Jos sellaista ei ole, pyydä agenttia luomaan se. Säännöt on kirjoitettu Tailwindia varten; jos pohjassa käytetään tavallista CSS:ää, sano agentille: ”sovella nämä periaatteet tavalliseen CSS:ään” — sääntöjen merkitys ei muutu. Katso selitys neljästä CLAUDE.md-säännöstä, niin opit, miten itse tiedosto toimii ja mitä muuta siihen kannattaa lisätä.

3. Asenna frontend-design-taito

   Käytä example-skills-lisäosaa tai kopioi frontend-design-kansio, kuten edellä kuvattiin. Voit tarkistaa /doctor-komennolla, latautuiko taito.

4. Valitse yksi visuaalinen suunta

5. Rakenna staattinen sivu

   Ilman ainuttakaan animaatiota. Typografia, välistys ja ruudukko tulevat ensin. Pyydä agenttia käynnistämään paikallinen esikatselu ja avaa sen antama osoite. Jos haluat katsoa sivua puhelimellasi, sano: ”käynnistä se niin, että se avautuu muilla laitteilla verkossani”, niin agentti antaa sinulle osoitteen.

6. Lisää yksi liikekohtaus

   Vain yksi. Yleensä se on ensimmäinen näkymä: otsikko ilmestyy, ja taustataso liikkuu etualaa hitaammin. Anna agentille kirjaston llms.txt ja kuvaile kohtaus konkreettisesti — mikä liikkuu, missä ja kuinka monen millisekunnin aikana. Jätä opacity ensimmäisessä näkymässä ennalleen; jäljempänä on erillinen osio siitä, miksi.

7. Lisää vähennetyn liikkeen sääntö

   Käytä esteettömyysosion CSS-sääntöä ja JavaScriptin vähennetyn liikkeen alustusta. Tarkista sivu vähennetty liike käytössä ennen julkaisua.

8. Julkaise ja tarkista nopeus

   Julkaise millä tahansa maksuttomalla staattisella hosting-palvelulla — Vercelissä, Netlifyssä tai GitHub Pagesissa. Pyydä agenttia: ”julkaise tämä projekti Vercelissä ja anna minulle linkki”. Vasta julkaisun jälkeen syötä tuloksena saatu URL PageSpeed Insightsiin: palvelu toimii julkisilla URL-osoitteilla eikä näe paikallista sivua. Katso ”Largest Contentful Paint” -mittaria — suurimman elementin piirtymiseen kuluvaa aikaa; vihreä alue on enintään 2,5 sekuntia. Agentti voi mitata paikallisen version ennen julkaisua: Chrome DevTools MCP avaa sivun Chromessa ja näyttää saman mittarin.

Kuudes vaihe on se, jossa edellisten viiden työn pilaaminen on helpointa.

Miksi liiallinen animointi saa verkkosivuston näyttämään entistä enemmän tekoälyn luomalta?#

Tässä vaiheessa melkein kaikkien aiheeseen perehtyvien ajattelu pettää: liian vähäinen animointi näyttää halvalta, joten sitä pitää lisätä.

Tämä sanotaan juuri siinä frontend-design-taidossa, jonka asensit suunnittelun parantamiseksi. Anthropic varoittaa liioittelusta työkalussa, jolla agentti koristaa sivun.

Siinä luetellaan myös muita valmiita tekniikoita: suuri numero, pieni kuvateksti ja liukuvärikorostus oletusratkaisuna mihin tahansa tehtävään; numeroidut lohkot kuten 01 / 02 / 03, jotka sopivat vain silloin, kun kyseessä todella on järjestys.

Miltä liioittelu käytännössä näyttää: agentti saa tehtävän ”lisää animaatioita” ja lisää vierityspaljastuksen jokaiseen osioon. Otsikko liukuu sisään, kolme korttia ponnahtaa esiin yksi toisensa jälkeen, asiakaskommentit liukuvat sivulta ja alatunniste häipyy näkyviin. Jokainen tehoste on yksinään hyvä. Yhdessä ne saavat sivun liikkumaan taukoamatta, eikä mikään korostu.

Elävä verkkosivusto toimii toisin: yksi harkittu kohtaus, yleensä ensimmäisessä näkymässä, ja sen jälkeen pidättyväisyys. Liike toimii korostuksena — siinä on järkeä, kun se kohdistuu yhteen sanaan.

Tästä syntyy ohje kehotteeseen. Muotoile se näin: ”tee yksi kohtaus ensimmäiseen näkymään ja jätä kaikki muu staattiseksi”. Muutama sana muuttuu verrattuna kehotteeseen ”lisää animaatioita”, mutta tulos on kertaluokkaa parempi.

Miten animaatiot tappavat verkkosivuston nopeuden?#

Googlen sivun arviointiin käyttämät kolme mittaria ovat: suurimman elementin piirtymisaika — enintään 2,5 sekuntia; vuorovaikutukseen reagointi — enintään 200 millisekuntia; sekä asettelun siirtymä — enintään 0,1. Ne mitataan todellisten käyntien 75. persentiilissä.

Puretaan, miksi tällä on tässä merkitystä. Oletuksena agentti rakentaa paljastuksen näin: se asettaa osion opacity-arvoksi nolla ja poistaa sitten asetuksen, kun osio tulee näkymään. Jos paljastus on ensimmäisessä näkymässä, kuva voi olla täysin ladattu ja dekoodattu, mutta mittari ei laske sitä ennen kuin piirtäminen alkaa. Vielä pahempaa on, jos skripti poistaa opacity-arvon latauksen jälkeen — silloin mittari odottaa koko skriptin valmistumista.

Tämän voi korjata kahdella tavalla. Aloita paljastus pienellä nollasta poikkeavalla opacity-arvolla nollan sijaan, jotta alkupiirto lasketaan mukaan. Tai jätä opacity ensimmäisessä näkymässä ennalleen ja animoi vain siirtymää.

Toinen kysymys on se, minkä animointi on halpaa ja minkä kallista.

Selkokielellä: selain kokoaa kuvan kerroksista, ja sijainnin sekä opacity-arvon muutokset tapahtuvat viimeisessä, halvimmassa vaiheessa. Kaikki muu saa sen laskemaan sivun uudelleen. Saman dokumentaation mittaukset: top- ja left-siirtymien animointi vie asetteluun 37 millisekuntia ja renderöintiin 79 millisekuntia; sama visuaalinen tehoste transformilla vie molempiin nolla millisekuntia.

Ja tässä on muistamisen arvoinen ristiriita: opacityn kompositointi on halpaa, mutta se hylkää elementin nopeusmittarista. Siksi selaimelle halpa animaatio ja suorituskyvyn kannalta turvallinen animaatio ovat eri asioita.

Vielä yksi asia will-change-ominaisuudesta, jota agentit rakastavat ripotella kaikkialle ”optimointia varten”. MDN:n dokumentaatio sanoo päinvastoin:

Siinä sanotaan myös, että ominaisuus on tarkoitettu viimeiseksi keinoksi olemassa oleviin suorituskykyongelmiin. Se ei toimi ennaltaehkäisynä. Rivi will-change: transform, opacity viidessäkymmenessä elementissä on tyypillinen merkki generoidusta koodista.

Asettelun siirtymien osalta tarina on yksinkertaisempi. Googlen dokumentaatio ei syytä animaatioita; päinvastoin huolelliset siirtymät auttavat päivittämään sisältöä säikäyttämättä lukijaa. Ohje on sama: muuta mittakaavaa transformilla leveyden ja korkeuden sijaan ja siirrä offseteilla koordinaattien sijaan.

Entä ihmiset, joille liike aiheuttaa fyysistä haittaa?#

Tämä osio on tärkeä muustakin syystä kuin kohteliaisuudesta. Yrityksen omistajalta ostava yleisö koostuu juuri 40-vuotiaista ja sitä vanhemmista.

Tähän voi varautua kolmella tyylirivillä:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Kolme muistettavaa seikkaa.

Kirjoita animaatio oletustoiminnaksi ja poista se käytöstä tämän säännön sisällä — näin sivu vikasietoutuu paremmin kuin tekemällä toisinpäin.

Määritys sanoo ”poistaa, vähentää tai korvaa” — täydellinen poistaminen ei edes ole ensimmäinen vaihtoehto. Terävän sisääntulon korvaaminen lyhyellä häivytyksellä toimii paremmin kuin sen katkaiseminen kokonaan: kaikkien animaatioiden poistaminen rikkoo latausilmaisimet ja etenemispalkit.

JavaScript-ohjatut animaatiot tarvitsevat oman asetuskäsittelynsä. CSS-keston ohitus ei peru GSAP-aikajanaa. Pelkän matchMedia(...).matches-arvon tallentaminen muuttujaan ei tee mitään, ellei alustus haarautu sen mukaan. Pidä GSAPissa elementti näkyvänä tavallisessa HTML/CSS-tilassa ja luo liike vain käyttäjän salliessa sen:

// 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.

Otsikolla ei saa olla piilotettua tai siirrettyä perustyyliä. Vähennetty liike pitää sen näkyvänä ja paikallaan. Jos asetus muuttuu sivun ollessa auki, GSAP palauttaa animaation mediakyselyn lakatessa täsmäämästä. Myös mm.revert() poistaa kerätyn animaation sivun purussa. Toteuta Motionissa vastaava haara sen omassa alustuksessa. Pelkkä CSS-sääntö ei riitä. Katso GSAP matchMedian elinkaari- ja siivousohje.

Lisäksi on hyvä pitää mielessä muodollinen esteettömyyskriteeri. WCAG 2.2.2, tason A kriteeri, edellyttää, että jos jokin liikkuu, vilkkuu tai vierii automaattisesti yli viiden sekunnin ajan ja näkyy muun sisällön rinnalla, käyttäjän on voitava pysäyttää se. Tämä koskee automaattisesti vaihtuvia karuselleja ja loputtomia juoksevia tekstinauhoja, joita agentit lisäävät mielellään.

Seitsemän paikkaa, joissa kaikki hajoaa#

1. Ensimmäinen näkymä piilotetaan, kunnes se häivytetään näkyviin. Nolla-opacity-arvon elementti ei kelpaa ehdokkaaksi piirtymismittariin. Tämä on kallein virhe, sillä se heikentää hakusijoituksiin vaikuttavaa mittaria.

2. Kaikkea animoidaan. Jokainen osio liukuu sisään, jokainen kortti ponnahtaa esiin. Anthropic sanoo suoraan, että tämä vahvistaa vaikutelmaa generoidusta suunnittelusta.

3. Vierityksen kaappaus. Sivusto korvaa hiiren vierityspyörän tavallisen toiminnan omalla ”elokuvallisella” logiikallaan.

Samassa tutkimuksessa useimmat osallistujat kokivat ainakin lievää hämmennystä.

4. Asettelun ominaisuuksia animoidaan. Koordinaatteja ja mittoja transformien sijaan. 37 ja 79 millisekuntia verrattuna nollaan.

5. Animaatiot kestävät liian kauan. Hyödyllinen kesto on 100–400 millisekuntia, ja 400 millisekuntia on jo hyvin pitkä aika, joka sopii vain suuriin liikkeisiin. Agentit käyttävät oletuksena mielellään kokonaista sekuntia.

Hänen havaintojensa mukaan hyödyllinen vaihteluväli on 100–400 millisekuntia. Jo 400 millisekuntia on hyvin hidasta ja sopii vain suuriin liikkeisiin. Agentit käyttävät oletuksena mielellään kokonaisen sekunnin.

6. Vähennetyn liikkeen sääntö puuttuu. Agentti ei lisää sitä itse.

7. Verkkosivusto hidastuu jokaisella vuorovaikutuksella. Tämä koskee erityisesti Reactia: animaatio, joka luodaan ilman viitettä elementtiin ja ilman siivousta, moninkertaistuu komponentin jokaisen päivityksen yhteydessä. Sivu alkaa vähitellen hidastua ilman selvää syytä.

Kahdeksas sudenkuoppa: menetelmä, jossa ”agentti ottaa ruutukaappauksen ja korjaa näkemänsä”, toimii hienosti staattisilla sivuilla, mutta animoitujen elementtien kanssa se vangitsee agentin loputtomaan muokkaussilmukkaan: se näkee välivaiheen ruudun, luulee sitä virheeksi, korjaa sen ja näkee uuden välivaiheen ruudun. Lisäksi jokainen ruutukaappaus syö kontekstia.

Paljonko se maksaa, ja miten välttää kuukausirajan polttaminen yhteen verkkosivustoon?#

Tyypillinen kertomus englanninkielisissä vibe-koodausyhteisöissä: joku rakentaa näyttävän sivun, jossa vieritetään avaruuden halki, julkaisee tuloksen, ja keskustelusta käy ilmi, että yksi sivusto kulutti koko kuukausikiintiön.

Tämä on odotettavissa. Animaatiot maksavat tavallista asettelutyötä enemmän useasta syystä. Tulosta ei voi tarkistaa koodia lukemalla, vaan siihen tarvitaan iteraatioita. Jokainen muokkaus edellyttää tiedostojen uudelleenlukemista. Liikkuvien elementtien ruutukaappaussilmukka lisää tarpeettomia kierroksia.

Mikä auttaa:

Rakenna yksi kohtaus kerrallaan ja viimeistele sen tulos. Yhden pyynnön ohje ”lisää animaatioita koko sivustolle” takaa ylikulutuksen. Voit kytkeä ruutukaappausvarmennuksen pois päältä animoitujen elementtien osalta ja tarkastella niitä itse visuaalisesti. Pidä CLAUDE.md lyhyenä, jotta säännöt eivät vie kontekstia jokaisessa pyynnössä. Anna agentille kirjaston llms.txt etukäteen, tai se keksii vanhentuneen liittämistavan ja ryhtyy sitten korjaamaan omaa keksintöään.

Artikkelissa miksi Claude Code lukee koko projektin uudelleen selitetään, mihin projektityöskentelyn tokenit kuluvat; artikkelissa miten välttää Claude Code -rajojen loppuminen käsitellään käytön rajoittamista.

Mitä seuraavaksi?#

Rakenna ensimmäinen sivusi kahdeksan vaiheen avulla. Valitse yksi visuaalinen suunta, luo yksi kohtaus ensimmäiseen näkymään ja tarkista nopeus.

Seuraavia askeleitasi varten — Ailoot.