# Hogyan készíts animált webhelyet Claude Code-dal egyetlen este alatt
> A sablonos dizájn elleni szabályok, a vizuális irányok, a GSAP, a hozzáférhetőség és a teljesítménytesztelés szabályai egy Claude Code-ban készülő animált webhelyhez.
Source: https://ailoot.ai/blog/hu/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/hu/animated-website-claude-code/
Language: hu
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-53aa77f758d5158ab1d0fb7a850a4502096b51c096ff50160555cbd5d80a5539
Főbb tanulságok
A Claude Code egyetlen este alatt képes animált webhelyet készíteni, de az eredmény sablonosnak hat, mert kifejezett megkötések nélkül a modell a tanítóadataiban szereplő átlag felé sodródik. Három dolog segít ezen: sablonellenes szabályok a `CLAUDE.md` fájlban, egy kész vizuális irány a homályos prompt helyett, valamint a naprakész animációskönyvtár-dokumentáció közvetlenül a kontextusban. A legnagyobb csapda a túlzásba vitt mozgás: a túl sok animáció jobban elárulja, hogy a munkát AI készítette, mint az animáció hiánya, és rontja az első képernyő betöltési sebességét.
A modellekkel való munkáról bővebben az [Ailoot dokumentációjában](https://ailoot.ai/docs/) olvashatsz.
## Miért egyértelmű már az első képernyőn, ha egy webhelyet AI készített?
Főbb tanulságok
A megadott korlátok nélküli modell átlagolja mindazt, amit a tanítóadataiban látott. Régebben ebből lila gombok és az Inter betűtípus születtek; mostanra a trend a krémszínű háttér, a talpas betűk és a terrakotta kiemelés felé tolódott. Az Anthropic a saját skilljének dokumentációjában három ilyen megszokott megjelenést írt le, és kifejezetten alapértelmezett viselkedésnek nevezte őket.
Megkérsz egy ügynököt, hogy rakjon össze egy landing oldalt. Negyven perccel később már van egy működő webhelyed: a szakaszok a helyükön vannak, a tördelés reszponzív, a gombok működnek. Szinte azonnal mégis az az érzésed támad, hogy ezt már láttad valahol.
Több ezer oktatóanyag és kezdősablon másolta ezt a színt, eltorzítva a mintát, a modell pedig megtanulta, hogy a gombok lilák. Ugyanez a mechanizmus érvényes a betűtípusokra, a lekerekített sarkokra és az árnyékokra is.
Közben megváltozott az „AI-os megjelenés”. Az Anthropic a `frontend-design` skill dokumentációjában most más megjelenéseket ír le.
Az AI által generált dizájn most három megjelenés köré csoportosul: meleg, krémszínű háttér (körülbelül #F4F1EA), kontrasztos talpas címsorral és terrakotta kiemeléssel; majdnem fekete háttér egyetlen élénk savzöld vagy cinóber kiemeléssel; illetve széles újságoldal-elrendezés hajszálvékony vonalakkal, nulla saroklekerekítéssel és sűrű újságoszlopokkal. Mindhárom illik bizonyos feladatokhoz, de ez alapértelmezett viselkedés, nem tudatos választás, és témától függetlenül megjelenik.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
A webes elrendezésekben megjelenő „slop” alapvető problémája: akkor keletkezik, ha nincs semmi konkrét, amit másolni lehetne, ezért a modell egyszerűen átlagolja az összes webes stílust. A Qt éppen azért egységes, mert nem tud másképp kinézni.
A „slop” itt olyan gép által generált munkát jelent, amelyet a modell egy jellegzetes stílus nélküli, általános eredménnyé átlagol.
A gyakorlati tanulság az, hogy az ügynöknek szűk dizájnrendszerre van szüksége a nyitott végű feladat helyett. Ha azt mondod, „legyen szép”, az átlagot választja. Ha konkrét palettát, néhány betűtípust és egy meghatározó vizuális elemet adsz neki, azokból építkezik.
Ebben a képben a mozgás a legfeltűnőbb jel. Még egy tökéletes tipográfiájú statikus oldal is sablonosnak hat, mert az élő webhelyek lélegeznek: görgetés közben elemek jelennek meg, a kurzor változásokat vált ki, és a képernyők közötti átmenetek nem szakadnak meg hirtelen.
## Mire van szükséged animált webhely készítéséhez Claude Code-ban?
Vegyük sorra az eszközöket, mert sok a félreértés az árakkal kapcsolatban.
A **GSAP** az animációs könyvtár, amely számos díjnyertes webhely mögött áll. A Webflow 2024 októberében vásárolta meg, és szinte azonnal elterjedtek a hírek arról, hogy minden ingyenessé vált. Ez nem teljesen igaz: a Webflow akkor megerősítette, hogy a meglévő árak érvényben maradnak. A könyvtár csak **2025. április végén**, a 3.13-as verzióval vált ingyenessé.
A GSAP mostantól minden felhasználó számára teljesen ingyenes a Webflow támogatásának köszönhetően.
— GSAP, https://gsap.com/pricing
A 3.13-as kiadás kifejezetten kimondja, hogy a korábban fizetős bővítmények, például a SplitText és a MorphSVG is ingyenessé váltak, kereskedelmi használatra is. A jelenlegi verzió 2026 júliusában: `gsap@3.15.0`.
Az ingyenesség azonban nem jelent nyílt forráskódot. A licenc továbbra is saját tulajdonú, és tiltja, hogy a GSAP-re építve a Webflow-val versengő vizuális animációszerkesztőt készítsenek. A webhelyekre, ügyfélprojektekre és kereskedelmi munkára nincs korlátozás.
Az **Anthropic `frontend-design` skillje** olyan utasításgyűjtemény, amely megváltoztatja, hogyan dolgozik az ügynök a felületen. A tároló leírása szerint:
Útmutató egyedi, átgondolt vizuális tervezéshez új felület létrehozásakor vagy meglévő átdolgozásakor. Segít az esztétikai irány meghatározásában, a tipográfiában és olyan dizájnmegoldások választásában, amelyek nem hatnak alapértelmezett sablonnak.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
A skill egy kétlépéses módszert tartalmaz. Először az ügynök összeállít egy tokenrendszert: négy-hat elnevezett színt, legalább két szerepkörhöz betűtípust, szöveges vázlatokkal leírt elrendezési tervet és egy meghatározó vizuális elemet az oldalhoz. Ezután a feladat alapján bírálja el a saját tervét. Csak ezután ír kódot.
A bejegyzés 75 skillt említ, a tároló leírása 78-at sorol fel, a fában pedig ma 91 található. A szerző ezt nyíltan jelzi: keress rá a tárolóban, mert a leírás elavult.
## Hogyan veheted rá a Claude Code-ot, hogy ne készítsen több sablont?
Főbb tanulságok
Két lépés. Először tegyél tiltásokat a `CLAUDE.md` fájlba: ne használd a szokásos palettát, ne használj egy betűtípust a címsorokhoz és a törzsszöveghez is, és az áttetszőségen és transzformációkon kívül semmit ne animálj. Ezután telepítsd a `frontend-design` skillt, amely arra készteti az ügynököt, hogy állítson össze egy tokenrendszert, és még a kódírás előtt bírálja el a tervét.
Kezdjük a szabályfájllal, mert minden kérésnél érvényesül, és semmibe sem kerül.
Hasznos kiindulópont lehet egy sablonellenes korlátokat tartalmazó blokk. Az elv egyszerű: sorold fel név szerint azokat a konkrét választásokat, amelyek felé a modell alapértelmezés szerint hajlamos sodródni, és tiltsd meg őket.
```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).
```
A blokk szándékosan angolul íródott: a modell pontosabban követi a rövid műszaki utasításokat a dokumentáció nyelvén.
Nem véletlen, hogy az animációs sor a színek és az árnyékok mellett szerepel a tiltások között. Az első képernyő áttetszősége közvetlenül rontja a sebességmutatót, ahogy alább látni fogjuk.
Következzen a skill. Az Anthropic hivatalos skilljei a bővítményen keresztül telepíthetők:
```bash
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
Egy részlet: a dizájnskillek külön-külön nem telepíthetők; az `example-skills` bővítmény mind a tizenkettőt egyszerre hozza. Ha csak egyet szeretnél, másold át kézzel a mappát—a Claude Code újraindítás nélkül is felismeri:
```bash
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/
```
A gyűjtemény további hasznos skilljei: a `theme-factory` tíz kész témával és azok alkalmazása előtt kötelező emberi jóváhagyással; a `web-artifacts-builder` React-fejlesztéshez kész komponensekkel; valamint az `algorithmic-art` generatív grafikákhoz. Egy külön cikk részletesen elmagyarázza, hogyan válassz skillt egy feladathoz: [hogyan válassz skillt Claude Code-hoz](https://ailoot.ai/blog/hu/choose-claude-code-skills/).
A szabályok és a skill együtt működnek: a szabályok tiltják a rossz választásokat, a skill pedig folyamatot ír elő—először a rendszer, utána a kritika, végül a kód.
Minden fontos dolog még a kérés előtt történik. Előre beteszed a kontextusba azokat a korlátokat, amelyek alapján az ügynök építkezni fog, így maga a prompt megfogalmazása alig számít. Ezt a megközelítést kontextusmérnökségnek hívják, a `CLAUDE.md` fájl pedig az első építőeleme. Az **AI-klón + Második agy + Kontextusmérnökség** kombinációja segít az átlagos kimeneteket gyártó Claude-ot olyan eszközzé alakítani, amely tartja magát a stílusodhoz.
## Hol találsz kész vizuális irányokat és animációs promptokat?
A benne található mozgástechnikák: `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`.
Ha nem vagy programozó, számodra inkább a kész vizuális irányok a fontosak. A homályos „legyen modern” helyett válassz egyet ezek közül, és add meg a modellnek azt a szűk rendszert, ami eddig hiányzott:
- `clean-minimal-beige-light-mode` - világos bézs minimalizmus
- `dark-glass-clean-layout` - sötét üveg
- `documentary-brutalist-agency` - dokumentarista brutalizmus
- `editorial-portfolio-chapters` - magazinszerűen fejezetekre osztott portfólió
- `orange-clean-paper-saas` - papírszerű szolgáltatási webhely narancssárga kiemeléssel
- `solar-duotone-bold` - merész, kétszínű megjelenés
- `tech-green-dark-mode-modern` - sötét, zöld technológiai stílus
- `light-mode-paper-technical` - világos, technikai papír
A 3D grafikához és effektekhez technikai skillek is vannak: `threejs`, `matterjs`, `globe-gl`, `vantajs`, `unicorn-studio`, `progressive-blur`, `beautiful-shadows`, `css-border-gradient`.
A tárolóban nincs telepítőparancs—a szerző az ütemtervben egyértelműen azt írja, hogy akkor ad hozzá ilyet, ha eldőlt az integráció módja. A Claude Code-nak szóló egyetlen utasítás ez:
Az alábbiakban egy telepítési lehetőség szerepel. Ez a parancs nincs benne a tárolóban; telepítési javaslat:
```bash
git clone ''
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/
```
## Hogyan adj friss GSAP-dokumentációt az ügynöknek egy sorban?
Főbb tanulságok
A GSAP-nek van egy `llms.txt` fájlja—egy 25 kilobájtos dokumentációs összefoglaló, amely kifejezetten nyelvi modellek számára készült. Add meg az ügynöknek a hivatkozását, és a korábbi emlékei helyett naprakész metódusleírásokból dolgozhat. Minden dokumentációs oldal markdown-változatban is elérhető. A Motion könyvtárnak is van ilyen fájlja, ráadásul még nagyobb.
Az animációs könyvtárakkal gyakran az a probléma, hogy az ügynök elavult módon emlékszik az összekapcsolásukra. Egy régi útvonalról importál, két éve használt módon regisztrál egy bővítményt, és a kód nem fut.
A megoldás az, hogy te magad teszed a dokumentációt a kontextusba. A GSAP géppel jól feldolgozható formátumban biztosítja:
```
https://gsap.com/llms.txt
```
A fájl a mai napon körülbelül 25 kilobájtos. Minden dokumentációs oldal markdown-változatban is elérhető—csak add hozzá a `.md` kiterjesztést az URL-hez.
A gyakorlatban így néz ki:
```
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.
```
A Motion könyvtárnak (korábban Framer Motion) is van ilyen fájlja, és az még nagyobb. A Motion MIT-licenc alatt érhető el, és valóban nyílt forráskódú marad; a jelenlegi verzió `motion@12.42.2`. Ha a projekt Reactet használ, és csak egyszerű felfedő animációkra van szüksége, választhatod a Motiont; összetett görgetési jelenetekhez a ScrollTrigger bővítménnyel használd a GSAP-et.
A ScrollTriggerrel bárki lenyűgöző görgetési animációkat készíthet minimális kóddal.
— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger
Vannak olyan, kizárólag böngészőben használható lehetőségek is, amelyekhez nem kell könyvtár. A View Transitions API-val végzett oldalállapot-átmenetek 2025. október 14-én váltak széles körben támogatottá—de csak egyetlen oldalon belül; az oldalak közötti változatot a Firefox egyáltalán nem támogatja. A CSS-es görgetési animációk még nem kaptak széles körű támogatást: a Chrome támogatja őket, a Safari nemrég tanulta meg, a Firefoxban viszont kézzel kell bekapcsolni őket a beállításokban, így átlagos olvasóknál egyszerűen nem működnek. Kérd meg az ügynököt, hogy előbb ellenőrizze a böngészőtámogatást; ha nincs támogatás, hagyja meg a szokásos átmenetet.
## Hogyan alakíthatsz egy neked tetsző webhelyet prompttá?
A leggyakoribb módja annak, hogy elmagyarázd, mit szeretnél, ha mutatsz egy példát. Egy ügynöknél ez közvetlenül nem működik: nem látja a webhelyet, csak a szöveget.
A `video-to-superprompt` skill áthidalja ezt a szakadékot. A tároló leírása szerint videós referenciából részletes promptot készít újraalkotáshoz vagy inspirációként. Rétegenként elemzi a felvételt: narratíva, elrendezés, mozgás, tipográfia, 3D grafika. A kimenet egy azonnal használható prompt.
A fő szabályát nyomatékosan fogalmazza meg:
A második skill, a `html-to-interaction-prompts` a forráskóddal dolgozik: megkeres mindent, ami mozog—kurzorreakciókat, 3D grafikát, görgetési effekteket, eltérő sebességgel mozgó rétegeket—, majd külön promptokra bontja az oldalt, szakaszonként, gombonként, hover állapotonként vagy effektusonként egyre. Elve szerint a forrás viselkedése az igazság, és ha rendelkezésre áll a kód, nem szabad képernyőképből kitalálni az effekteket.
A harmadik, a `stitched-full-page-capture` egy gyakorlati problémát old meg. A lusta betöltést és 3D grafikát használó webhelyek szokásos teljes oldalas képernyőképe szürke és üres lesz, mert a felvétel a renderelés előtt készül. A skill képernyőről képernyőre végiggörget az oldalon, megvárja, amíg minden elrendeződik, majd összefűzi az eredményt.
Képernyőfelvétel nélkül is van megoldás: MCP-n keresztül élő felületi példák könyvtárához kapcsolhatod az ügynököt. A Mobbin hivatalos szervere egy paranccsal telepíthető:
```bash
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
```
Ezután nyiss új munkamenetet, válaszd ki a szervert a listából, és jelentkezz be a böngészőben. Az ügynök valódi, működő alkalmazások képernyőképeihez fér hozzá: több mint 621,500 képernyő szerepel a listán. Ezek kész termékekről készült képernyőképek, nem komponensek vagy kód. Fontos megjegyzés: a Mobbin szervere az ingyenes csomagban nem működik; csak fizetős csomagokban érhető el (2026 júliusában). Egy [külön cikk a Google Stitchről](https://ailoot.ai/blog/hu/google-stitch-claude-code-design/) ugyanilyen módszerrel mutatja be, hogyan kapcsolhatsz külső szolgáltatásokat egy ügynökhöz, és hozhatsz be egy dizájnrendszert a Claude Code-ba.
## Lépésről lépésre: animált webhely egyetlen este alatt
Főbb tanulságok
A sorrend: sablonellenes szabályok, dizájns skill, egy vizuális irány kiválasztása, statikus oldal készítése, és csak az utolsó lépésben egy animált jelenet hozzáadása. A mozgást a végén, egyesével add hozzá; különben hiba esetén nem lesz világos, hol kezdd a keresést. Az alábbi hét lépés egy estét vesz igénybe, ha nem próbálsz mindent egyszerre animálni.
1. ### Projekt beállítása
Ha még nincs projekted, kezdd egy üres mappával. Hozd létre, nyisd meg terminálban, majd futtasd benne a `claude` parancsot. Első promptként kérj egy vázat: „készíts egyszerű, egyoldalas webhelyvázat a vállalkozásomhoz (írd le, mivel foglalkozik), sima HTML-lel és CSS-sel, könyvtárak nélkül.” Megjelenik néhány fájl—ez a projekt gyökérkönyvtára, innentől itt történik minden.
2. ### A szabályok elhelyezése a CLAUDE.md fájlban
Másold be az Anti-Generic Guardrails blokkot a projekt gyökérkönyvtárában lévő `CLAUDE.md` fájlba. Ha nincs ilyen fájl, kérd meg az ügynököt, hogy hozza létre. A szabályok Tailwindhez készültek; ha a váz sima CSS-t használ, mondd az ügynöknek: „alkalmazd ezeket az elveket a hagyományos CSS-re”—a szabályok jelentése nem változik. Lásd a CLAUDE.md négy szabályának áttekintését, amely bemutatja, hogyan működik maga a fájl, és mi kerüljön még bele.
3. ### A frontend-design skill telepítése
Használd az `example-skills` bővítményt, vagy másold át a `frontend-design` mappát a fent leírtak szerint. A `/doctor` paranccsal ellenőrizheted, hogy betöltődött-e a skill.
4. ### Egy vizuális irány kiválasztása
Egyet válassz, ne kettőt vagy hármat. A dokumentarista brutalizmus bézs minimalizmussal való keverése pontosan azt az átlagolást eredményezi, amit el akarsz kerülni.
5. ### Statikus oldal készítése
Egyetlen animáció nélkül. Először a tipográfia, a térközök és a rács következzen. Kérd meg az ügynököt, hogy indítson helyi előnézetet, majd nyisd meg a megadott címet. Ha telefonon szeretnéd megnézni, mondd: „úgy futtasd, hogy a hálózatom más eszközein is meg lehessen nyitni”, és az ügynök megad egy címet.
6. ### Egy mozgásjelenet hozzáadása
Csak egyet. Ez általában az első képernyő: megjelenik a címsor, a háttérréteg pedig lassabban mozdul, mint az előtér. Add meg az ügynöknek a könyvtár `llms.txt` fájlját, és írd le pontosan a jelenetet—mi mozog, hol és hány milliszekundum alatt. Az első képernyőn hagyd érintetlenül az áttetszőséget; alább külön rész magyarázza el, miért.
7. ### A csökkentett mozgásra vonatkozó szabály hozzáadása
Alkalmazd a hozzáférhetőségi rész CSS-szabályát és JavaScript reduced-motion beállítását. Közzététel előtt csökkentett mozgással is ellenőrizd az oldalt.
8. ### Közzététel és sebességellenőrzés
Tedd közzé bármelyik ingyenes statikus tárhelyszolgáltatáson—Vercelen, Netlifyon vagy GitHub Pagesen. Kérd meg az ügynököt: „tedd közzé ezt a projektet Vercelen, és add meg a linket.” A kapott URL-t csak a közzététel után futtasd le a PageSpeed Insightson: a szolgáltatás nyilvános URL-ekkel működik, helyi oldalt nem lát. Nézd meg a „Largest Contentful Paint” mutatót—azt az időt, amíg a legnagyobb elem megjelenik; a zöld tartomány felső határa 2.5 másodperc. Az ügynök közzététel előtt a helyi verziót is meg tudja mérni: a Chrome DevTools MCP megnyitja Chrome-ban, és megjeleníti ugyanezt a mutatót.
A hatodik lépésben a legkönnyebb tönkretenni az előző öt munkáját.
## Miért hat egy webhely még inkább AI által generáltnak, ha túl sok rajta az animáció?
Főbb tanulságok
Az Anthropic ezt egyértelműen kimondja a dizájns skill dokumentációjában: a túlzott mozgás erősíti azt a benyomást, hogy az oldalt generálták. Alapértelmezés szerint az ügynök egymás után minden szakaszra felfedő effektust tesz, így olyan oldal jön létre, ahol minden rángatózik, és semmi sem irányítja a figyelmet. Ennek az ellenkezője működik: egyetlen tudatosan megtervezett jelenet az első képernyőn, utána visszafogottság.
Itt hibázik szinte mindenki gondolkodása, aki a témával foglalkozik: a túl kevés animáció olcsónak hat, ezért többet kell hozzáadni.
Néha a kevesebb több, és a túl sok animáció erősíti azt az érzést, hogy a dizájnt generálták.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Ez éppen abban a `frontend-design` skillben szerepel, amelyet a dizájn javítása érdekében telepítettél. Az Anthropic abban az eszközben figyelmeztet a túlzásba vitt animációra, amelyet az ügynök az oldal díszítésére használ.
Más sablonos megoldásokat is felsorol: egy nagy számot apró felirattal és színátmenetes kiemeléssel, mint minden feladatra adott szokásos választ; illetve a 01 / 02 / 03 jellegű számozott blokkokat, amelyek csak valódi sorrend esetén indokoltak.
A gyakorlatban a túlzás így néz ki: az ügynök azt a feladatot kapja, hogy „adj hozzá animációkat”, és minden szakaszhoz görgetésre megjelenő effektust tesz. A címsor becsúszik, három kártya egymás után felugrik, az ajánlások oldalról beúsznak, a lábléc pedig elhalványulva megjelenik. Külön-külön minden effektus rendben van. Együtt olyan oldalt alkotnak, amely sosem áll le, és semmit sem emel ki.
Egy élő webhely másképp működik: egy tudatosan kialakított jelenet—általában az első képernyőn—utána pedig visszafogottság. A mozgás olyan, mint a kiemelés: akkor van értelme, ha egyetlen szóra esik.
Ez egy szabályt ad a prompthoz. Így fogalmazz: „készíts egy jelenetet az első képernyőn, minden más maradjon statikus.” Ez csupán néhány szóval tér el az „adj hozzá animációkat” kéréstől, de az eredmény egy nagyságrenddel jobb.
## Hogyan rontják az animációk a webhely sebességét?
Főbb tanulságok
A fő csapda: a böngésző még csak nem is tekinti a nulla áttetszőségű elemet a Largest Contentful Paint jelöltjének. Az „rejtsd el a szakaszt, majd görgetéskor jelenítsd meg” szokásos technikája az első képernyőn közvetlenül rontja a fő sebességmutatót. Emellett csak transzformációkat és áttetszőséget animálj—minden más újratördelést vált ki.
A Google három mutatóval értékeli az oldalt: a legnagyobb elem megjelenési ideje legfeljebb 2.5 másodperc; egy műveletre adott válasz legfeljebb 200 milliszekundum; az elrendezés elmozdulása pedig legfeljebb 0.1 lehet. Ezeket a valódi látogatások 75. percentilisén mérik.
Nézzük meg, miért számít ez itt. Az ügynök alapértelmezés szerint így készít felfedő effektust: nullára állítja egy szakasz áttetszőségét, majd eltávolítja ezt a beállítást, amikor a szakasz belép a látható területre. Ha az effektus az első képernyőn van, a kép már teljesen betöltődhetett és dekódolódhatott, a mutató mégsem számolja, amíg el nem kezdődik a renderelése. Még rosszabb, ha egy szkript a betöltés után távolítja el az áttetszőséget—ilyenkor a mutató a teljes szkriptre vár.
Kétféleképpen lehet ezt megoldani. Vagy kis, nem nulla áttetszőségről indítod a felfedő effektust, így a kezdeti renderelés is beleszámít. Vagy az első képernyőn érintetlenül hagyod az áttetszőséget, és csak az elmozdulást animálod.
A másik kérdés az, mi animálható olcsón és mi kerül sokba.
Amikor csak lehet, korlátozd az animációkat az áttetszőség és a transform tulajdonságokra, hogy a renderelési folyamat kompozitálási szakaszában maradjanak.
— web.dev, https://web.dev/articles/animations-guide
Egyszerűen fogalmazva: a böngésző rétegekből állítja össze a képet, a pozíció és az áttetszőség változása pedig az utolsó, legolcsóbb lépésben történik. Minden más arra kényszeríti, hogy újraszámolja az oldalt. Ugyanennek a dokumentációnak a mérései szerint: a top és left eltolással végzett animáció 37 milliszekundumot igényel az elrendezéshez és 79-et a rendereléshez; ugyanez a vizuális hatás transformmal mindkét esetben nullát vesz igénybe.
És itt egy fontos ellentmondás: az áttetszőség olcsón kompozitálható, de kizárja az elemet a sebességmutató méréséből. Ezért nem ugyanaz, ha egy animáció olcsó a böngészőnek, vagy biztonságos a teljesítmény szempontjából.
Még egy dolog a `will-change` tulajdonságról, amelyet az ügynökök előszeretettel szórnak szét „optimalizálásként”. Az MDN dokumentációja ennek ellenkezőjét mondja:
A will-change túlzott használata túl nagy memóriafogyasztáshoz vezet, és bonyolultabb renderelésre kényszeríti a böngészőt, miközben megpróbál felkészülni a lehetséges változásokra. Ez rontja a teljesítményt.
— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Azt is írja, hogy ezt a tulajdonságot meglévő teljesítményproblémák utolsó megoldásaként kell használni. Megelőzésre nem alkalmas. A `will-change: transform, opacity` sor ötven elemen tipikus árulkodó jele a generált kódnak.
Az elrendezés elmozdulása egyszerűbb eset. A Google dokumentációja nem az animációkat hibáztatja; éppen ellenkezőleg, a gondos átmenetek segítenek úgy frissíteni a tartalmat, hogy ne ijesszék meg az olvasót. Ugyanaz a recept: transzformációval változtasd a méretarányt szélesség és magasság helyett, és eltolásokkal mozgasd az elemeket koordináták helyett.
## Mi a helyzet azokkal, akiknek a mozgás testi panaszokat okoz?
Főbb tanulságok
Az Egyesült Államokban a negyven év feletti felnőttek akár 35%-a tapasztalt már vesztibuláris rendellenességet. Számukra a görgetési animáció hányingert és migrént okozhat. A „csökkentett mozgás” rendszerbeállítást több mint öt éve minden böngésző támogatja, de az ügynök nem adja hozzá, hacsak nem kéred. CSS-szabályokra és a JavaScript-animáció beállításának kifejezett elágazására is szükség van; a preferencia puszta kiolvasása nem állít le timeline-t.
Ez a rész nem csupán udvariasságból fontos. A vállalkozástulajdonos vásárlóközönsége éppen a negyvenéves és annál idősebb korosztály.
Ezt három stílussorral kezelheted:
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
Három dolgot érdemes észben tartani.
Az animáció legyen az alapértelmezett viselkedés, és ezen a szabályon belül kapcsold ki—így az oldal biztonságosabban működik csökkentett módban, mintha fordítva tennéd.
A specifikáció azt írja, „eltávolítja, csökkenti vagy lecseréli”—a teljes eltávolítás még csak nem is az első lehetőség. Egy éles becsúszás rövid elhalványulásra cserélése jobb, mint teljesen megszakítani: minden animáció letiltása tönkreteszi a betöltésjelzőket és a folyamatjelző sávokat.
A JavaScript-animációhoz saját preferenciakezelés kell; egy CSS-időtartam felülírása nem töröl GSAP-timeline-t. A `matchMedia(...).matches` változóba mentése semmit nem tesz, ha a beállítás nem ágazik el rajta. GSAP-nél az elemet a normál HTML/CSS-ben hagyd láthatónak, és csak engedélyezett mozgásnál hozz létre animációt:
```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.
```
A címnek ne legyen rejtett vagy eltolást tartalmazó alapstílusa. Bekapcsolt csökkentett mozgásnál látható és statikus marad. Ha a preferencia nyitott oldal közben változik, a GSAP visszavonja az animációt, amikor a lekérdezés már nem illeszkedik. A `mm.revert()` eltávolításkor is törli az összegyűjtött animációt. Motionnél ugyanilyen elágazást valósíts meg annak beállításában; a CSS-szabály önmagában nem elég. Lásd a [GSAP matchMedia életciklus- és takarítási dokumentációját](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/).
Egy hivatalos hozzáférhetőségi kritériumot is érdemes figyelembe venni. A WCAG 2.2.2 A szintű kritériuma előírja, hogy ha valami automatikusan mozog, villog vagy görgetődik, öt másodpercnél tovább tart, és más tartalommal együtt jelenik meg, a felhasználónak lehetőséget kell adni a leállítására. Ez vonatkozik az automatikusan forgó körhintákra és a végtelenül futó szalagokra is, amelyeket az ügynökök szívesen illesztenek be.
## Hét pont, ahol szétesik a dolog
Főbb tanulságok
Szinte minden hiba három okra vezethető vissza: animálják az első képernyőt, túl sok a mozgás, vagy nem megfelelő tulajdonságokat animálnak. A görgetés eltérítése külön probléma. Hasznos animációs időtartam a 100 és 400 milliszekundum közötti tartomány.
**1. Az első képernyő rejtve marad, amíg el nem halványulva jelenik meg.** A nulla áttetszőségű elem nem számít jelöltnek a renderelési mutatóban. Ez a legköltségesebb hiba, mert egy keresési rangsorolást befolyásoló mutatót ront.
**2. Minden animálva van.** Minden szakasz becsúszik, minden kártya felugrik. Az Anthropic egyértelműen kimondja, hogy ez erősíti a generált dizájn benyomását.
**3. A görgetés eltérítése.** Amikor egy webhely az egérgörgő szokásos viselkedését saját, „filmszerű” logikájával helyettesíti.
Ugyanebben a kutatásban a résztvevők többsége legalább enyhe zavartságot tapasztalt.
**4. Elrendezési tulajdonságok animálása.** Koordináták és méretek transzformációk helyett. 37 és 79 milliszekundum a nulla helyett.
**5. Az animációk túl hosszúak.** A hasznos időtartam 100 és 400 milliszekundum között van, a 400 már nagyon lassú, és csak nagy mozgásoknál megfelelő. Az ügynökök alapértelmezés szerint gyakran egy teljes másodpercet használnak.
Megállapításai szerint a hasznos tartomány 100 és 400 milliszekundum közé esik; a 400 már nagyon lassú, és csak nagy mozgásokhoz megfelelő. Az ügynökök alapértelmezés szerint egy teljes másodpercet szeretnek használni.
**6. Nincs csökkentett mozgásra vonatkozó szabály.** Az ügynök nem ad hozzá ilyet magától.
**7. A webhely minden interakció után lassabb lesz.** Ez a React sajátossága: ha egy animációt az elemre való hivatkozás és takarítás nélkül hoznak létre, minden komponensfrissítéskor új példány keletkezik belőle. Az oldal fokozatosan, látható ok nélkül kezd lelassulni.
Egy nyolcadik csapda: az a megközelítés, amelyben „az ügynök képernyőképet készít, majd kijavítja, amit lát”, statikus oldalakon nagyszerűen működik, de animált elemeknél végtelen szerkesztési ciklusba zárja az ügynököt: meglát egy köztes képkockát, hibának hiszi, kijavítja, majd meglát egy újabb köztes képkockát. Ráadásul minden képernyőkép kontextust fogyaszt.
## Mennyibe kerül, és hogyan kerülheted el, hogy egyetlen webhelyre elhasználd az egész havi keretedet?
Főbb tanulságok
Ebben az összeállításban minden eszköz ingyenes; magáért az ügynök munkájáért fizetsz. Az animáció gyorsabban fogyasztja a keretet, mint a szokásos elrendezési munka, mert az eredményt nem lehet a kód elolvasásával ellenőrizni: minden módosításhoz újra el kell olvasni a fájlokat, és további körökre van szükség. Segít, ha egyszerre csak egy jelenetet építesz, röviden tartod a `CLAUDE.md` fájlt, és kikapcsolod a képernyőképes ellenőrzési ciklust az animált elemeknél.
Az angol nyelvű vibe-coding közösségek tipikus története: valaki látványos, világűrön átívelő görgetéssel ellátott oldalt készít, közzéteszi, a beszélgetésből pedig kiderül, hogy az egyetlen webhely elhasználta az egész havi keretét.
Ez várható. Az animáció egyszerre több okból kerül többe a szokásos elrendezési munkánál. Az eredményt nem lehet a kód elolvasásával ellenőrizni; több iteráció kell. Minden módosítás újraolvasást igényel. A mozgó elemeken futó képernyőképes ciklus pedig szükségtelen ellenőrzéseket ad hozzá.
Mi segít:
Egyszerre egy jelenetet építs, és rögzítsd az eredményt. Az egész webhely animálására vonatkozó egyszeri kérés garantáltan túlköltekezést okoz. Kikapcsolhatod a képernyőképes ellenőrzést az animált elemeknél, és magad nézheted meg őket. Tartsd röviden a `CLAUDE.md` fájlt, hogy a szabályok ne foglalják a kontextust minden kérésnél. Add meg előre az ügynöknek a könyvtár `llms.txt` fájlját is, különben elavult összekapcsolási módot talál ki, majd a saját találmányát próbálja hibakeresni.
A [miért olvassa újra a Claude Code az egész projektet](https://ailoot.ai/blog/hu/claude-code-rereads-project/) című cikk elmagyarázza, mire mennek el a tokenek projektmunka közben; a [hogyan ne merítsd ki a Claude Code keretét](https://ailoot.ai/blog/hu/claude-code-token-limits-saving/) című cikk pedig a használat kordában tartásának módjait tárgyalja.
## Mi következik?
Főbb tanulságok
Ez a megközelítés működik: sablonellenes szabályok, egy vizuális irány, egy mozgásjelenet, sebességellenőrzés és az olvasó beállításainak tiszteletben tartása. A nehézség abban áll, hogy előre a megfelelő információkat add az ügynök kontextusához, így lesz miből építkeznie. Maga az animáció a munka legkönnyebb része.
Készítsd el az első oldaladat a nyolc lépéssel. Válassz egy vizuális irányt, hozz létre egy jelenetet az első képernyőn, és ellenőrizd a sebességet.
### Források
- [anthropics/skills](https://github.com/anthropics/skills) - hivatalos Anthropic-skillek, köztük a frontend-design
- [GSAP: Árak](https://gsap.com/pricing) - megerősítés arról, hogy ingyenes
- [GSAP 3.13-as kiadás](https://gsap.com/blog/3-13) - mi vált ingyenessé 2025. április végén
- [GSAP: llms.txt](https://gsap.com/llms.txt) - dokumentáció nyelvi modellekhez
- [GSAP: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - görgetési animációs bővítmény
- [Motion](https://motion.dev/) - nyílt forráskódú, MIT-licencű alternatíva
- [web.dev: Animációs útmutató](https://web.dev/articles/animations-guide) - mely tulajdonságokat animáld
- [MDN: will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - miért ne állítsd be előre
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - csökkentett mozgás beállítása
- [WCAG 2.2.2: Szüneteltetés, leállítás, elrejtés](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - hozzáférhetőségi kritérium
- [W3C: Interakciókból eredő animáció](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - a vesztibuláris rendellenességekre gyakorolt hatás
- [Mobbin MCP](https://mobbin.com/mcp) - felületi referenciakönyvtár ügynököknek
A következő lépésekhez—[Ailoot](https://ailoot.ai/).
## Kérdések és válaszok: Hogyan készíts animált webhelyet Claude Code-dal egyetlen este alatt
### Miért fut tovább a GSAP-animáció reduced-motion CSS-szabály mellett?
A CSS-időtartam felülírása nem töröl JavaScript-timeline-t. A GSAP-animációt matchMedia no-preference ágban hozd létre, és az alapelemet hagyd láthatónak, hogy csökkentett mozgásnál statikus oldal maradjon.
### Hogyan előzzem meg animációk felhalmozódását navigáció után?
Az oldal vagy komponens eltávolításakor hívd meg az animációs beállítás által visszaadott takarítást. A példában az mm.revert() visszaállítja a stílusokat, és eltávolítja a matchMedia-példányban összegyűjtött animációkat.
## Ailoot · A vállalat és projektportfóliója
Az Ailoot felhalmozott működési tapasztalatra, széles ügyfélkörre, stabil szolgáltatásra és folyamatos KPI-ellenőrzésre épít.
A vállalat és projektportfóliója: ügyfelek milliói; havi értékesítés milliárdos nagyságrendben.
Az Ailoot ezt a működési tapasztalatot használja az ügyfelek termékeiben, ágenseiben, alkalmazásaiban és automatizálásaiban elérhető AI-funkciók API-hozzáféréséhez.