Kaip per vakarą sukurti animuotą svetainę naudojant Claude Code

Daugiau apie darbą su modeliais skaitykite Ailoot dokumentacijoje.

Kodėl iš pirmo ekrano akivaizdu, kad svetainę sukūrė DI?#

Paprašote agento sukurti nukreipimo puslapį. Po keturiasdešimties minučių turite veikiančią svetainę: skyriai sudėti, išdėstymas pritaikytas skirtingiems ekranams, o mygtukai veikia. Ir beveik iškart apima jausmas, kad kažkur jau tai matėte.

Priežastis mechaninė. Modelis buvo mokomas naudojant milžinišką užbaigtų puslapių rinkinį, o šis rinkinys buvo stipriai šališkas. Tūkstančiai vadovėlių ir pradinio šablono projektų kopijavo tas pačias numatytąsias spalvas, iškreipdami pavyzdžių rinkinį.

Tūkstančiai mokomųjų vadovų ir pradinių šablonų nukopijavo šią spalvą, iškreipė pavyzdžių rinkinį, tad modelis išmoko, kad mygtukai būna violetiniai. Tas pats mechanizmas veikia ir šriftus, užapvalintus kampus bei šešėlius.

„DI išvaizda“ tuo tarpu pasikeitė. „Anthropic“ savo frontend-design įgūdžio dokumentacijoje dabar aprašo kitokius vaizdus.

Pagrindinė problema: „slop“ atsiranda tada, kai nėra nieko konkretaus, ką būtų galima kopijuoti, ir modelis tiesiog suvidurkina visus žiniatinklio stilius.

„Slop“ čia reiškia mašinos sugeneruotą kūrinį, suvidurkintą iki bendrinio rezultato be išskirtinio stiliaus.

Praktinė išvada tokia: agentui reikia siauros dizaino gramatikos, o ne atviros užduoties. Jei pasakysite „padaryk gražiai“, jis pasirinks vidurkį. Jei pateiksite konkrečią spalvų paletę, porą šriftų ir vieną išskirtinį vizualinį elementą, jis kurs remdamasis jais.

Judėjimas šiame vaizde yra labiausiai pastebimas požymis. Net statiškas puslapis su tobula tipografija vis tiek atrodo kaip šablonas, nes gyvos svetainės kvėpuoja: slenkant atsiranda elementai, žymeklis ką nors pakeičia, o perėjimai tarp ekranų nenutrūksta staiga.

Ko reikia norint sukurti animuotą svetainę naudojant Claude Code?#

Aptarkime įrankius po vieną, nes dėl kainų kyla daug painiavos.

GSAP yra animacijų biblioteka, naudojama nemažoje dalyje apdovanojimus pelniusių svetainių. „Webflow“ ją įsigijo 2024 m. spalį, o beveik iškart pasklido gandai, kad nuo šiol viskas nemokama. Tai nėra visiška tiesa: tuo metu „Webflow“ patvirtino, kad esamos kainos nesikeis. Biblioteka tapo nemokama 2025 m. balandžio pabaigoje, išleidus 3.13 versiją.

3.13 versijos leidimo informacijoje konkrečiai nurodyta, kad nemokami tapo ir anksčiau mokami papildiniai, tokie kaip SplitText bei MorphSVG, įskaitant komercinį naudojimą. Naujausia versija 2026 m. liepos mėn. yra gsap@3.15.0.

Tačiau nemokama nereiškia atvirojo kodo. Licencija tebėra nuosavybinė ir draudžia kurti GSAP pagrįstą vizualinį animacijų redaktorių, konkuruojantį su „Webflow“. Svetainėms, klientų projektams ar komerciniam darbui apribojimų nėra.

„Anthropic“ įgūdis frontend-design yra instrukcijų rinkinys, keičiantis tai, kaip agentas kuria sąsają. Repozitorijos apraše rašoma:

Jame aprašytas dviejų etapų metodas. Pirmiausia agentas sudaro žetonų sistemą: keturias–šešias įvardytas spalvas, bent dviejų paskirčių šriftus, teksto eskizais aprašytą maketo schemą ir vieną išskirtinį puslapio vizualinį elementą. Tada įvertina savo planą pagal užduotį. Tik po to rašo kodą.

Įraše nurodyti 75 įgūdžiai, repozitorijos apraše – 78, o šiandien failų medyje jų yra 91. Autorius apie tai atvirai įspėja: patikrinkite repozitoriją paieškos komanda, nes aprašas pasenęs.

Kaip pasiekti, kad Claude Code nebekurtų šablonų?#

Pradėkime nuo taisyklių failo, nes jis taikomas kiekvienai užklausai ir nieko nekainuoja.

Naudingas pradinis variantas – apsauginių taisyklių nuo šabloniškumo blokas. Logika paprasta: išvardykite konkrečius pasirinkimus, prie kurių modelis linkęs grįžti pagal nutylėjimą, ir aiškiai juos uždrauskite.

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

Blokas sąmoningai parašytas anglų kalba: modelis trumpų techninių instrukcijų tiksliau laikosi dokumentacijos kalba.

Animacijų eilutė įtraukta į draudimų sąrašą greta spalvų ir šešėlių ne be priežasties. Opacity pirmame ekrane tiesiogiai blogina greičio rodiklį, kaip aptarsime toliau.

Toliau – įgūdis. Oficialius „Anthropic“ įgūdžius galima įdiegti per papildinį:

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

Vienas niuansas: dizaino įgūdžių negalima įdiegti atskirai; papildinys example-skills įdiegia visus dvylika iš karto. Jei norite tik vieno, nukopijuokite aplanką rankiniu būdu – Claude Code jį aptiks nepaleidus seanso iš naujo:

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

Gali praversti ir kiti šios kolekcijos įgūdžiai: theme-factory su dešimčia paruoštų temų ir reikalavimu prieš jas taikant gauti žmogaus patvirtinimą, web-artifacts-builder skirtas kurti naudojant React ir paruoštus komponentus, o algorithmic-art – generatyvinei grafikai. Atskirame straipsnyje išsamiai paaiškinama, kaip pasirinkti užduočiai tinkamus įgūdžius: kaip pasirinkti Claude Code įgūdžius.

Taisyklės ir įgūdis veikia kartu: taisyklės draudžia netinkamus pasirinkimus, o įgūdis nustato procesą – pirmiausia sistema, tada kritika, galiausiai kodas.

Svarbiausi dalykai vyksta dar prieš pateikiant užklausą. Iš anksto į agento kontekstą įtraukiate apribojimus, pagal kuriuos jis kurs, todėl pačios užklausos formuluotė beveik nebeturi reikšmės. Šis metodas vadinamas konteksto inžinerija, o failas CLAUDE.md yra pirmasis jos elementas. Derinys DI klonas + Antrasis protas + konteksto inžinerija padeda Claude paversti įrankiu, kuris laikosi jūsų stiliaus, o ne generuoja vidutinius rezultatus.

Kur rasti paruoštų vizualinių krypčių ir animacijų užklausų?#

Joje pateikiamos šios judesio technikos: 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.

Jei neprogramuojate, jums svarbesnės paruoštos vizualinės kryptys. Vietoj miglotos užklausos „padaryk moderniai“ pasirinkite vieną iš jų ir suteikite modeliui trūkstamą siaurą gramatiką:

• clean-minimal-beige-light-mode – šviesus smėlio spalvos minimalizmas
• dark-glass-clean-layout – tamsus stiklas
• documentary-brutalist-agency – dokumentinio brutalizmo stilius
• editorial-portfolio-chapters – į skyrius, kaip žurnalas, suskirstytas darbų aplankas
• orange-clean-paper-saas – popierinio stiliaus paslaugų svetainė su oranžiniu akcentu
• solar-duotone-bold – ryškus dviejų spalvų sprendimas
• tech-green-dark-mode-modern – modernus tamsus techninis stilius su žalia spalva
• light-mode-paper-technical – šviesus techninio popieriaus stilius

Taip pat yra techninių įgūdžių 3D grafikai ir efektams: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

Repozitorijoje nėra diegimo komandos – autorius veiksmų plane tiesiai sako, kad ją pridės, kai nusistovės integravimo metodas. Vienintelė instrukcija Claude Code yra tokia:

Toliau pateikiamas vienas diegimo būdas. Šios komandos nėra repozitorijoje; tai diegimo rekomendacija:

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

Kaip vienoje eilutėje pateikti agentui naujausią GSAP dokumentaciją?#

Dažna animacijų bibliotekų problema – agentas prisimena pasenusį jų prijungimo būdą. Jis įrašo importą iš seno kelio, užregistruoja papildinį taip, kaip buvo daroma prieš dvejus metus, ir kodas neveikia.

Sprendimas – pačiam įtraukti dokumentaciją į kontekstą. GSAP ją pateikia mašinoms patogiu formatu:

https://gsap.com/llms.txt

Šiandien failas yra maždaug 25 kilobaitų. Kiekvienas dokumentacijos puslapis taip pat prieinamas Markdown formatu – prie URL tereikia pridėti .md.

Praktiškai tai atrodo taip:

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 biblioteka (anksčiau „Framer Motion“) turi tokį pat failą, tik jis dar didesnis. Motion platinama pagal MIT licenciją ir iš tiesų lieka atvirojo kodo; naujausia versija yra motion@12.42.2. Jei projektas sukurtas naudojant React ir reikia tik paprasto elementų pasirodymo, galite rinktis Motion; sudėtingoms slinkimo scenoms naudokite GSAP su ScrollTrigger papildiniu.

Yra ir tik naršyklėje veikiančių galimybių, kurioms nereikia bibliotekų. Puslapio būsenų perėjimai naudojant View Transitions API gavo „baseline“ palaikymą 2025 m. spalio 14 d., tačiau tik viename puslapyje; kelių puslapių versija „Firefox“ visai nepalaikoma. CSS slinkimo animacijos dar negavo „baseline“ palaikymo: „Chrome“ jas palaiko, „Safari“ išmoko jas palaikyti visai neseniai, o „Firefox“ jas reikia įjungti nustatymuose rankiniu būdu, todėl įprastiems skaitytojams jos tiesiog neveiks. Paprašykite agento pirmiausia patikrinti, ar naršyklė jas apskritai palaiko, o jei ne – palikti standartinį perėjimą.

Kaip patinkančią svetainę paversti užklausa?#

Dažniausias būdas paaiškinti, ko norite, yra parodyti pavyzdį. Su agentu tai neveikia tiesiogiai: jis nemato svetainės, mato tekstą.

Įgūdis video-to-superprompt užpildo šią spragą. Repozitorijos aprašas: paversti vaizdo įrašo pavyzdį išsamia užklausa, skirta atkurti arba įkvėpimui. Viduje įrašas analizuojamas sluoksniais: naratyvas, maketas, judesys, tipografija ir 3D grafika. Rezultatas – viena paruošta naudoti užklausa.

Pagrindinė jo taisyklė suformuluota griežtai:

Antrasis įgūdis html-to-interaction-prompts veikia su šaltinio kodu: randa viską, kas juda – reakcijas į žymeklį, 3D grafiką, slinkimo efektus, skirtingu greičiu judančius sluoksnius – ir suskaido puslapį į atskiras užklausas, po vieną kiekvienam skyriui, mygtukui, užvedimo būsenai ar efektui. Jo principas – šaltinio elgesį laikyti tikrove ir nekurti efektų pagal ekrano nuotrauką, jei prieinamas kodas.

Trečiasis įgūdis stitched-full-page-capture sprendžia praktinę problemą. Įprasta viso puslapio ekrano nuotrauka iš svetainių su tingiuoju įkėlimu ir 3D grafika būna pilka ir tuščia, nes užfiksuojama dar prieš atvaizdavimą. Įgūdis slenka puslapiu po vieną ekraną, laukia, kol viskas nusistovės, ir sujungia rezultatą.

Galima apsieiti ir be ekrano įrašo: per MCP prijungti agentą prie veikiančių sąsajų pavyzdžių bibliotekos. Oficialų „Mobbin“ serverį galima įdiegti viena komanda:

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

Po to atidarykite naują seansą, pasirinkite serverį iš sąrašo ir prisijunkite naršyklėje. Agentas gaus prieigą prie tikrų veikiančių programėlių ekrano nuotraukų: pateikiama daugiau nei 621 500 ekranų. Tai užbaigtų produktų, o ne komponentų ar kodo ekrano nuotraukos. Svarbi išlyga: „Mobbin“ serveris neveikia nemokamame plane; jis prieinamas mokamuose planuose (2026 m. liepos mėn. duomenimis). Atskirame straipsnyje apie Google Stitch aiškinama, kaip prijungti išorines paslaugas prie agento ir tuo pačiu būdu perkelti dizaino sistemą į Claude Code.

Žingsnis po žingsnio: animuota svetainė per vakarą#

1. Paruoškite projektą

   Jei dar neturite projekto, pradėkite nuo tuščio aplanko. Sukurkite jį, atidarykite terminale ir paleiskite jame claude. Pirmiausia paprašykite paruošti karkasą: „sukurk vieno puslapio svetainės karkasą mano verslui (aprašyk, kuo jis užsiima), naudok paprastą HTML ir CSS, be bibliotekų“. Atsiras failų rinkinys – tai projekto šakninis aplankas, kuriame nuo šiol vyks visas darbas.

2. Įrašykite taisykles į CLAUDE.md

   Nukopijuokite bloką Anti-Generic Guardrails į projekto šakniniame aplanke esantį failą CLAUDE.md. Jei jo nėra, paprašykite agento jį sukurti. Taisyklės skirtos Tailwind; jei pradiniame karkase naudojamas paprastas CSS, pasakykite agentui „taikyk šiuos principus įprastam CSS“ – taisyklių prasmė nesikeičia. Straipsnyje aptariamos keturios CLAUDE.md taisyklės paaiškinama, kaip veikia pats failas ir ką dar į jį įtraukti.

3. Įdiekite įgūdį frontend-design

   Naudokite papildinį example-skills arba nukopijuokite aplanką frontend-design, kaip aprašyta pirmiau. Ar įgūdis įkeltas, galite patikrinti komanda /doctor.

4. Pasirinkite vieną vizualinę kryptį

   Vieną, ne dvi ar tris. Sumaišius dokumentinio brutalizmo stilių su smėlio spalvos minimalizmu gausite būtent tą suvidurkinimą, kurio stengiatės išvengti. Aplankų pavadinimai aprašomieji, bet peržiūrėti juos vizualiai negalite: atverkite patinkančio aplanko failą SKILL.md ir perskaitykite spalvų paletės bei šriftų aprašą – viskas išdėstyta aiškiai.

5. Sukurkite statinį puslapį

   Be jokios animacijos. Pirmiausia – tipografija, tarpai ir tinklelis. Paprašykite agento paleisti vietinę peržiūrą ir atidarykite jo pateiktą adresą. Jei norite peržiūrėti telefone, pasakykite „paleisk ją taip, kad ji atsidarytų ir kituose mano tinklo įrenginiuose“, ir agentas pateiks adresą.

6. Pridėkite vieną judesio sceną

   Tik vieną. Paprastai tai pirmasis ekranas: pasirodo antraštė, o fono sluoksnis juda lėčiau nei priekinis planas. Pateikite agentui bibliotekos llms.txt failą ir konkrečiai aprašykite sceną – kas juda, kur ir kiek milisekundžių. Pirmajame ekrane nelieskite opacity; atskiroje tolesnėje dalyje paaiškinta kodėl.

7. Pridėkite sumažinto judesio taisyklę

   Pritaikykite prieinamumo skyriaus CSS taisyklę ir JavaScript sumažinto judesio sąranką. Prieš paskelbdami patikrinkite puslapį su įjungtu sumažintu judesiu.

8. Paskelbkite svetainę ir patikrinkite greitį

   Paskelbkite ją bet kurioje nemokamoje statinio turinio prieglobos paslaugoje – Vercel, Netlify arba GitHub Pages. Paprašykite agento: „paskelbk šį projektą Vercel platformoje ir pateik nuorodą“. Tik paskelbę įveskite gautą URL į PageSpeed Insights: ši paslauga veikia su viešais URL ir nemato vietinio puslapio. Pažiūrėkite į „Largest Contentful Paint“ – laiką, per kurį atvaizduojamas didžiausias elementas; žalia zona yra iki 2,5 sekundės. Vietinę versiją agentas gali išmatuoti dar prieš paskelbimą: Chrome DevTools MCP atidarys ją Chrome naršyklėje ir parodys tą pačią metriką.

Šeštame žingsnyje lengviausia sugadinti penkių ankstesnių žingsnių darbą.

Kodėl dėl animacijų pertekliaus svetainė atrodo dar labiau DI sugeneruota?#

Būtent čia subliūkšta beveik visų, besidominčių šia tema, samprotavimas: per mažai animacijos atrodo pigiai, todėl reikia pridėti daugiau.

Tai parašyta tame pačiame frontend-design įgūdyje, kurį įdiegėte norėdami pagerinti dizainą. „Anthropic“ perspėja nepersistengti būtent įrankyje, kurį agentas naudoja puslapiui papuošti.

Jame taip pat išvardyti kiti standartiniai triukai: didelis skaičius su mažu užrašu ir gradientiniu akcentu kaip numatytasis atsakymas į bet kokią užduotį; sunumeruoti blokai, pavyzdžiui, 01 / 02 / 03, tinkami tik tada, kai iš tikrųjų pateikiama seka.

Kaip persistengimas atrodo praktiškai: agentas gauna užduotį „pridėk animacijų“ ir kiekviename skyriuje sukuria atsiradimo slenkant efektą. Antraštė įslenka, trys kortelės viena po kitos iššoka, atsiliepimai įslenka iš šono, o poraštė pamažu išryškėja. Kiekvienas efektas atskirai yra geras. Visi kartu sukuria puslapį, kuris nenustoja judėti ir nieko neišryškina.

Gyva svetainė veikia kitaip: viena apgalvota scena, paprastai pirmajame ekrane, o vėliau – santūrumas. Judesys veikia kaip akcentas – jis prasmingas, kol tenka vienam žodžiui.

Iš to kyla užklausos taisyklė. Suformuluokite ją taip: „sukurk vieną sceną pirmame ekrane, o visa kita palik statiška“. Nuo „pridėk animacijų“ skiriasi vos keliais žodžiais, bet rezultatas yra visa eile geresnis.

Kaip animacijos žudo svetainės spartą?#

Trys metrikos, kuriomis „Google“ vertina puslapį: didžiausio elemento atvaizdavimo laikas – ne daugiau kaip 2,5 sekundės; reakcija į sąveiką – ne daugiau kaip 200 milisekundžių; ir maketo poslinkis – ne daugiau kaip 0,1. Jos matuojamos pagal 75-ąjį realių apsilankymų procentilį.

Išsiaiškinkime, kodėl tai svarbu. Pagal numatytuosius nustatymus agentas sukuria atsiradimo efektą taip: nustato skyriaus opacity į nulį, o kai skyrius patenka į peržiūros sritį, šį nustatymą pašalina. Jei toks efektas taikomas pirmajam ekranui, vaizdas gali būti visiškai įkeltas ir dekoduotas, tačiau metrika jo neįskaičiuos, kol neprasidės atvaizdavimas. Dar blogiau, jei scenarijus pašalina opacity tik po įkėlimo – tada metrika laukia, kol bus įvykdytas visas scenarijus.

Tai galima išspręsti dviem būdais. Pradėkite atsiradimo efektą nuo mažos, bet neneulinės opacity, o ne nuo nulio, kad pradinis atvaizdavimas būtų įskaičiuotas. Arba palikite opacity nepakeistą pirmame ekrane ir animuokite tik poslinkį.

Antroji problema – ką animuoti pigu, o ką brangu.

Paprastai tariant, naršyklė sudeda vaizdą iš sluoksnių, o padėties ir opacity pakeitimai atliekami paskutiniame, pigiausiame etape. Visa kita priverčia ją perskaičiuoti puslapį. Tos pačios dokumentacijos matavimai: animuojant top ir left poslinkius, maketo skaičiavimas trunka 37 milisekundes, o atvaizdavimas – 79; tą patį vaizdinį efektą pasiekus per transform, abiem etapams prireikia nulio.

Štai dar vienas prieštaravimas, kurį verta prisiminti: opacity kompozicijos požiūriu yra pigi, bet dėl jos elementas neįtraukiamas į greičio metriką. Taigi naršyklei pigi animacija ir našumui saugi animacija yra du skirtingi dalykai.

Dar vienas dalykas apie savybę will-change, kurią agentai mėgsta visur prikaišioti „optimizavimo tikslais“. MDN dokumentacijoje teigiama priešingai:

Taip pat teigiama, kad ši savybė skirta kaip paskutinė priemonė jau esamoms našumo problemoms spręsti. Ji nėra prevencinė. Eilutė will-change: transform, opacity penkiasdešimtyje elementų yra tipiškas generuoto kodo požymis.

Su maketo poslinkiu paprasčiau. „Google“ dokumentacijoje animacijos nekaltinamos; priešingai, apgalvoti perėjimai padeda atnaujinti turinį neišgąsdinant skaitytojo. Receptas tas pats: keiskite mastelį naudodami transform, o ne plotį ir aukštį, ir judinkite naudodami poslinkius, o ne koordinates.

O kaip žmonės, kuriems judesys sukelia fizinę žalą?#

Šis skyrius svarbus ne vien iš mandagumo. Įmonės savininko klientai yra būtent keturiasdešimties ir vyresni žmonės.

W3C konsorciumas pasekmes apibūdina tiesiai: pykinimas ir migrena, kartais tokia stipri, kad tenka atsigulti.

CSS yra viena sumažinto judesio dalis; JavaScript animacijoms taip pat reikia toliau parodyto sąrankos išsišakojimo:

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

Turėkite omenyje tris dalykus.

Animaciją aprašykite kaip numatytąjį elgesį, o šioje taisyklėje ją išjunkite – taip puslapis bus saugiau pritaikomas negu darant atvirkščiai.

Specifikacijoje sakoma „pašalina, sumažina arba pakeičia“ – visiškai pašalinti nėra net pirmasis variantas. Staigų įslinkimą geriau pakeisti trumpu išnyrimu nei visiškai jį nutraukti: išjungus visas animacijas sugenda įkėlimo indikatoriai ir eigos juostos.

JavaScript valdomoms animacijoms reikia atskiro nuostatos apdorojimo; CSS trukmės perrašymas neatšaukia GSAP laiko juostos. Vien matchMedia(...).matches reikšmės įrašymas į kintamąjį nieko nedaro, jei sąranka pagal jį neišsišakoja. GSAP atveju elementą palikite matomą įprastame HTML/CSS, o judesį kurkite tik kai naudotojas jį leidžia:

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

Antraštė neturi turėti paslėptos ar pastumtos bazinės būsenos. Įjungus sumažintą judesį ji lieka matoma ir statiška. Jei nuostata pasikeičia atvertame puslapyje, užklausai nebeatitinkant GSAP atkuria animacijos būseną. mm.revert() pašalina surinktą animaciją ir užbaigiant komponentą. Motion sąrankoje įgyvendinkite atitinkamą išsišakojimą; vien CSS taisyklės nepakanka. Žr. GSAP matchMedia gyvavimo ciklo ir valymo dokumentaciją.

Taip pat verta turėti omenyje oficialų prieinamumo kriterijų. A lygio kriterijus WCAG 2.2.2 reikalauja, kad naudotojas galėtų sustabdyti bet kokį automatiškai judantį, mirksintį arba slenkantį turinį, kuris trunka ilgiau nei penkias sekundes ir rodomas kartu su kitu turiniu. Tai taikoma automatiškai besisukantiems karuselės blokams ir begalinėms juostoms, kurias agentai noriai įterpia.

Septynios vietos, kur viskas sugenda#

1. Pirmasis ekranas paslėptas, kol pamažu išryškėja. Elementas, kurio opacity lygi nuliui, neįtraukiamas į atvaizdavimo metrikos kandidatus. Tai brangiausia klaida, nes blogina rodiklį, turintį įtakos paieškos rezultatų pozicijoms.

2. Animuojama viskas. Kiekvienas skyrius įslenka, kiekviena kortelė iššoka. „Anthropic“ aiškiai teigia, kad dėl to stiprėja generuoto dizaino įspūdis.

3. Scrolljacking. Svetainė įprastą pelės ratuko veikimą pakeičia sava „kinematografine“ logika.

Tame pačiame tyrime dauguma dalyvių patyrė bent lengvą dezorientaciją.

4. Animuojamos maketo savybės. Koordinatės ir matmenys vietoj transformacijų. 37 ir 79 milisekundės, palyginti su nuliu.

5. Animacijos per ilgos. Naudinga jų trukmė – nuo 100 iki 400 milisekundžių; 400 milisekundžių jau labai ilgai, todėl tokia trukmė tinka tik dideliems judesiams. Agentai pagal numatytuosius nustatymus mėgsta naudoti visą sekundę.

Jo išvadomis, tinkama trukmė yra nuo 100 iki 400 milisekundžių; 400 milisekundžių jau labai lėtai, todėl tinka tik dideliems judesiams. Agentai pagal numatytuosius nustatymus mėgsta naudoti visą sekundę.

6. Nėra sumažinto judesio taisyklės. Agentas jos pats nepridės.

7. Su kiekviena sąveika svetainė lėtėja. Tai specifinė React problema: animacija, sukurta nenurodžius nuorodos į elementą ir neatliekant išvalymo, su kiekvienu komponento atnaujinimu dauginasi. Puslapis pamažu pradeda lėtėti be akivaizdžios priežasties.

Metodas „agentas padaro ekrano nuotrauką ir ištaiso tai, ką mato“ puikiai veikia statiniuose puslapiuose, tačiau animuotų elementų atveju įtraukia agentą į nesibaigiančią taisymų kilpą: jis pamato tarpinį kadrą, palaiko jį klaida, pataiso ir pamato kitą tarpinį kadrą. Be to, kiekviena ekrano nuotrauka naudoja konteksto dalį.

Kiek tai kainuoja ir kaip neišnaudoti mėnesio limito vienai svetainei?#

Tipiška istorija iš anglakalbių vibe coding bendruomenių: kas nors sukuria efektingą puslapį, kuriame slenkama per kosmosą, paskelbia rezultatą, o diskusijoje paaiškėja, kad viena svetainė sunaudojo visą mėnesio limitą.

To ir galima tikėtis. Animacijos kainuoja daugiau nei įprasti maketo darbai dėl kelių priežasčių vienu metu. Rezultato negalima patikrinti skaitant kodą – reikia iteracijų. Po kiekvieno pakeitimo failus tenka skaityti iš naujo. O ekrano nuotraukų ciklas judantiems elementams prideda nereikalingų etapų.

Kas padeda:

Kurkite po vieną sceną ir užfiksuokite rezultatą. Vienkartinė užklausa „pridėk animacijų visoje svetainėje“ garantuoja perteklines išlaidas. Galite išjungti animuotų elementų tikrinimą ekrano nuotraukomis ir patys apžiūrėti juos vizualiai. CLAUDE.md laikykite trumpą, kad taisyklės nenaudotų konteksto kiekvienoje užklausoje. Iš anksto pateikite agentui bibliotekos llms.txt, antraip jis išgalvos pasenusį prijungimo būdą ir tada derins savo paties prasimanymą.

Straipsnyje kodėl Claude Code iš naujo skaito visą projektą paaiškinama, kur dirbant su projektu sunaudojami žetonai; straipsnyje kaip neišnaudoti Claude Code limitų aprašoma, kaip kontroliuoti jų naudojimą.

Kas toliau?#

Sukurkite pirmąjį puslapį pagal aštuonis žingsnius. Pasirinkite vieną vizualinę kryptį, sukurkite vieną sceną pirmajame ekrane ir patikrinkite greitį.

Kitas žingsnis – Ailoot.