Claude Code-та бір кеште анимацияланған сайтты қалай жасауға болады

Модельдермен жұмыс істеу туралы Ailoot құжаттамасынан көбірек біліңіз.

Жасанды интеллект жасаған сайтты алғашқы экраннан-ақ неге тануға болады?#

Агенттен лендинг жасап беруді сұрайсыз. Қырық минуттан кейін жұмыс істейтін сайт дайын: бөлімдері орнында, икемді орналасуы бар, түймелері жұмыс істейді. Бірақ бірден мұны бір жерден көргендей сезім пайда болады.

Себебі қарапайым. Модель дайын беттердің орасан үлкен жинағында үйретілген, ал сол жинақта белгілі бір ауытқу болған.

Мыңдаған оқулық пен бастапқы үлгі осы түсті көшіріп, деректер жиынын қисайтты да, модель түймелер күлгін болады деп үйренді. Қаріптерге, дөңгелек бұрыштарға және көлеңкелерге де осы механизм әсер етеді.

Осы арада «ЖИ стилі» өзгерді. Anthropic өзінің frontend-design skill құжаттамасында қазір басқа көріністерді сипаттайды.

Түпкі мәселе: көшіретін нақты үлгі болмаса, slop пайда болады, ал модель вебтегі барлық стильдерді жай ғана орташалайды.

Мұндағы «slop» дегеніміз — өзіндік стилі жоқ, жалпылама нәтижеге орташаланған машина жасаған жұмыс.

Практикалық қорытынды: агентке ашық тапсырманың орнына тар дизайн грамматикасын беру керек. «Әдемі қылып жаса» десеңіз, ол орташа нұсқаны таңдайды. Нақты түстер палитрасын, бірнеше қаріпті және айқындаушы бір визуалды тәсілді берсеңіз, соларға сүйеніп жасайды.

Бұл көріністе қозғалыс — ең көзге түсетін белгі. Мінсіз типографиясы бар статикалық беттің өзі де үлгі сияқты сезіледі, өйткені жанды сайттар тыныс алады: айналдырған сайын элементтер пайда болады, меңзер әрекетке әсер етеді, ал экрандар арасындағы ауысулар кенэт тас үздэгней болмайды.

Claude Code-та анимацияланған сайт жасау үшін не керек?#

Бағалар туралы түсінбеушілік көп болғандықтан, құралдарды бір-бірлеп қарастырайық.

GSAP — марапатқа ие сайттардың елеулі бөлігінде қолданылатын анимация кітапханасы. Webflow оны 2024 жылғы қазанда сатып алды, содан кейін бәрі тегін болды деген қауесет бірден тарады. Бұл дәл емес: сол кезде Webflow қолданыстағы баға өзгеріссіз қалатынын растаған. Кітапхана 2025 жылғы сәуірдің соңында, 3.13 нұсқасымен тегін болды.

3.13 нұсқасының шығарылымында бұған дейін ақылы болған SplitText және MorphSVG сияқты плагиндер де, соның ішінде коммерциялық мақсатта пайдалану үшін тегін болғаны нақты жазылған. 2026 жылғы шілдедегі ең жаңа нұсқасы — gsap@3.15.0.

Алайда тегін болғаны ашық кодты дегенді білдірмейді. Лицензиясы әлі де меншікті, әрі Webflow-пен бәсекелес GSAP негізіндегі визуалды анимация редакторын жасауға тыйым салады. Сайттарға, клиент жобаларына немесе коммерциялық жұмысқа шектеу жоқ.

Anthropic-тің frontend-design skill-і — интерфейспен жұмыс істеу тәсілін өзгертетін нұсқаулар жиыны. Репозиторий сипаттамасында былай делінген:

Ішінде екі кезеңнен тұратын әдіс бар. Алдымен агент токендер жүйесін құрастырады: атауы бар төрт-алты түс, кемінде екі рөлге арналған қаріптер, мәтіндік сызбалар түріндегі орналасу схемасы және бетті айқындайтын бір визуалды тәсіл. Содан кейін жоспарын тапсырмаға сәйкестігі тұрғысынан өзі сынға алады. Тек содан кейін ғана код жазады.

Жазбада 75 skill делінген, репозиторий сипаттамасында 78 деп көрсетілген, ал бүгін файлдар ағашында 91 бар. Автор мұны жасырмайды: іздеу командасымен репозиторийді тексеріңіз, өйткені сипаттамасы ескірген.

Claude Code-ты үлгі шығара бермеуге қалай үйретуге болады?#

Алдымен ережелер файлынан бастайық: ол әр сұрауға әсер етеді әрі ештеңе тұрмайды.

Модель жиі таңдайтын нақты нұсқаларды тізіп, атауымен тыйым салатын «үлгіге қарсы қоршаулар» блогын бастапқы нүкте ретінде қолдануға болады. Логикасы қарапайым: модель әдепкіде жиі таңдайтын нақты нұсқаларды тізіп, атауымен тыйым салыңыз.

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

Блок әдейі ағылшын тілінде жазылған: модель құжаттама тіліндегі қысқа техникалық нұсқауларды дәлірек орындайды.

Анимация туралы жолдың түстер мен көлеңкелер қатарында тұруының себебі бар. Алғашқы экрандағы мөлдірлік жылдамдық көрсеткішіне тікелей зиян тигізеді; оған төменде тоқталамыз.

Енді skill. Anthropic-тің ресми skill-дерін плагин арқылы орнатуға болады:

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

Бір жайт: дизайн skill-дерін жеке орнатуға болмайды; example-skills плагині он екісін бірден орнатады. Біреуін ғана қаласаңыз, бумасын қолмен көшіріңіз — Claude Code оны сеансты қайта іске қоспай-ақ табады:

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

Осы жинақтағы пайдалы болуы мүмкін басқа skill-дер: дайын он тақырыбы бар theme-factory, оны қолданар алдында адамнан міндетті растау сұрайды; дайын компоненттермен React-та құрастыруға арналған web-artifacts-builder; және генеративті графикаға арналған algorithmic-art. Claude Code тапсырмасына skill-ді қалай таңдау керек деген мақалада бұл таңдау егжей-тегжейлі түсіндіріледі.

Ережелер мен skill бірге жұмыс істейді: ережелер сәтсіз таңдауларға тыйым салады, ал skill үдерісті белгілейді — алдымен жүйе, содан кейін сын, ең соңында код.

Мұндағы маңыздының бәрі сұраудан бұрын жасалады. Агент құрастыратын шектеулерді оның контекстіне алдын ала енгізесіз, сонда сұраудың нақты тұжырымы онша маңызды болмай қалады. Бұл тәсіл контекст инженериясы деп аталады, ал CLAUDE.md файлы — оның алғашқы құрылыс бөлігі. ЖИ клоны + Екінші ми + Контекст инженериясы үйлесімі Claude-ты орташа нәтиже шығаратын құралдан өз стиліңізді ұстанатын құралға айналдыруға көмектеседі.

Дайын визуалды бағыттар мен анимация сұрауларын қайдан табуға болады?#

Ондағы қозғалыс тәсілдері: 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.

Бағдарламашы болмасаңыз, сізге ең керегі — дайын визуалды бағыттар. «Заманауи қылып жаса» деген бұлыңғыр нұсқаудың орнына, осылардың бірін таңдап, модельге жетіспеген тар грамматиканы беріңіз:

• clean-minimal-beige-light-mode — ашық беж түсті минимализм
• dark-glass-clean-layout — қара шыны стилі
• documentary-brutalist-agency — бруталистік деректі стиль
• editorial-portfolio-chapters — журнал секілді тарауларға бөлінген портфолио
• orange-clean-paper-saas — қызғылт сары екпіні бар қағаз стиліндегі қызмет сайты
• solar-duotone-bold — батыл екі түсті шешім
• tech-green-dark-mode-modern — жасыл екпіні бар қараңғы техностиль
• light-mode-paper-technical — ашық түсті техникалық қағаз стилі

3D графика мен әсерлерге арналған техникалық skill-дер де бар: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

Репозиторийде орнату командасы жоқ — автор roadmap бөлімінде интеграция тәсілі шешілген соң қосатынын ашық жазған. Claude Code үшін берілген жалғыз нұсқау мынадай:

Төменде орнатудың бір жолы көрсетілген. Бұл команда репозиторийде жоқ; ол — орнатуға берілген ұсыныс:

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

Бағасы бар сұрау кітапханалары туралы қысқаша, өйткені бұл сұрақ жиі қойылады. motionsites.ai қызметі бөлімдерге арналған дайын сұраулар жинағын сатады: 2026 жылғы шілдедегі бағасы — жылына 239 доллар немесе 759 доллардың орнына бір реттік жарнамалық 349 доллар; айлық жоспары жоқ. Авторы көрсетілмеген, «About» беті де жоқ. Атауы соған ұқсас, жекеше түрде жазылған тағы бір сайт бар; Claude Code-пен үйлесімді деген мәлімет тек сол сайтта кездеседі. Сатып алуды ұсынбас едім, бірақ мұндай нұсқа барын білген жөн.

GSAP құжаттамасын агентке бір жолмен қалай беруге болады?#

Анимация кітапханаларымен байланысты жиі кездесетін мәселе — агенттің оларды қосудың ескірген тәсілін есте сақтауы. Ол ескі жолдан импорт жазып, плагинді екі жыл бұрынғы әдіспен тіркейді де, код жұмыс істемей қалады.

Шешімі — құжаттаманы контекстке өзіңіз қосу. GSAP оны машинаға ыңғайлы форматта ұсынады:

https://gsap.com/llms.txt

Файлдың көлемі бүгінгі күні шамамен 25 килобайт. Құжаттаманың әр бетін Markdown нұсқасында да алуға болады — URL соңына .md жалғаңыз.

Іс жүзінде былай көрінеді:

https://gsap.com/llms.txt және https://gsap.com/docs/v3/Plugins/ScrollTrigger.md сілтемелерін оқы

Содан кейін басты бетте бір көрініс жаса: алғашқы экранды айналдыра бастағанда тақырып пайда болсын,
ал оң жақтағы сурет мәтіннен баяу қозғалсын.
Тек transform және opacity қолдан. transition-all қолданба.

Motion кітапханасында (бұрынғы Framer Motion) да осындай файл бар, әрі ол көлемдірек. Motion MIT лицензиясымен таратылады және ашық кодты күйінде қалады; қазіргі нұсқасы — motion@12.42.2. Жоба React-та жасалып, тек қарапайым көрініп шығу әсерлері қажет болса, Motion таңдауға болады; күрделі айналдыру көріністеріне ScrollTrigger плагині бар GSAP қолданыңыз.

Кітапхана қолданбайтын, тек браузерге сүйенетін нұсқалар да бар. View Transitions API арқылы бет күйінің ауысулары 2025 жылғы қазанда 14-і күні негізгі қолдауға кірді, бірақ бір беттің ішінде ғана; беттер арасындағы нұсқаны Firefox мүлде қолдамайды. CSS арқылы айналдыру анимациялары әлі негізгі қолдауға кірген жоқ: Chrome қолдайды, Safari оларды жуырда үйренді, ал Firefox-та қолмен баптаулардан қосу керек, сондықтан қарапайым оқырмандарда жұмыс істемейді. Агенттен алдымен браузердің бұларды қолдайтынын тексеруді, қолдамаса стандартты ауысуды қалдыруды сұраңыз.

Ұнаған сайтты сұрауға қалай айналдыруға болады?#

Қалағаныңызды түсіндірудің ең жиі тәсілі — мысал көрсету. Бірақ агентке тікелей олай түсіндіре алмайсыз: ол сайтты көрмейді, тек мәтінді көреді.

video-to-superprompt skill-і осы алшақтықты жояды. Репозиторий сипаттамасында: бейне үлгісін қайта жасауға немесе шабыт алуға арналған егжей-тегжейлі сұрауға айналдырады делінген. Ішінде жазбаны қабаттар бойынша талдайды: баяндау, орналасу, қозғалыс, типография, 3D графика. Нәтижесінде пайдалануға дайын бір сұрау шығады.

Оның басты ережесі қатаң айтылған:

Екінші skill — html-to-interaction-prompts — бастапқы кодпен жұмыс істейді: қозғалып тұрғанның бәрін табады — меңзер әсерін, 3D графиканы, айналдыру әсерлерін, әртүрлі жылдамдықпен қозғалатын қабаттарды — және бетті әр бөлімге, түймеге, меңзер күйіне немесе әсерге арналған жеке сұрауларға бөледі. Негізгі қағидасы — бастапқы кодтағы мінез-құлықты ақиқат деп қабылдау және код қолжетімді кезде экран суретіне қарап әсер ойлап таппау.

Үшінші skill — stitched-full-page-capture — практикалық мәселені шешеді. Кейін жүктелетін мазмұны мен 3D графикасы бар сайттардың әдеттегі толық бет скриншоты сұр әрі бос шығады, өйткені түсіру рендерлеуден бұрын жасалады. Skill бүкіл бетті экран сайын айналдырып, бәрі орныққанша күтіп, нәтижені біріктіреді.

Экран жазбасынсыз да бір жолы бар: агентті MCP арқылы жұмыс істейтін интерфейс үлгілерінің кітапханасына қосу. Mobbin-нің ресми серверін бір командамен орнатуға болады:

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

Одан кейін жаңа сеанс ашып, тізімнен серверді таңдап, браузер арқылы кіріңіз. Агент 621,500-ден астам экран көрсетілген нақты жұмыс істейтін қолданбалардың скриншоттарына қол жеткізеді. Бұлар компоненттердің немесе кодтың емес, дайын өнімдердің скриншоттары. Маңызды ескерту: Mobbin сервері тегін жоспарда жұмыс істемейді; ақылы жоспарларда қолжетімді (2026 жылғы шілдедегі жағдай бойынша). Сыртқы қызметтерді агентке қосу туралы Google Stitch жөніндегі бөлек мақалада дизайн жүйесін дәл осы тәсілмен Claude Code-қа енгізу көрсетілген.

Қадамдап орындау: бір кеште анимацияланған сайт жасау#

1. Жобаны дайындау

   Жобаңыз әлі жоқ болса, бос бума ашыңыз. Оны жасап, терминалда ашып, сол жерде claude командасын іске қосыңыз. Алғашқы сұрауыңызда қаңқа жасауды өтініңіз: «Бизнесіме (не екенін сипаттаңыз) арналған бір беттік сайттың қаңқасын жаса, кітапханасыз, қарапайым HTML және CSS қолдан». Бірнеше файл пайда болады — бұл жобаның түбір бумасы, бұдан былай барлық жұмыс осында жүргізіледі.

2. Ережелерді CLAUDE.md файлына енгізу

   Anti-Generic Guardrails блогын жобаның түбір бумасындағы CLAUDE.md файлына көшіріңіз. Файл жоқ болса, агенттен оны жасауды сұраңыз. Ережелер Tailwind үшін жазылған; егер бастапқы қаңқада қарапайым CSS қолданылса, агентке «осы қағидаларды кәдімгі CSS-ке қолданыңыз» деп айтыңыз — ережелердің мәні өзгермейді. Файлдың қалай жұмыс істейтінін және оған тағы не қосуға болатынын білу үшін Карпатыйдың төрт ережесіне шолуды қараңыз.

3. frontend-design skill-ін орнату

   Жоғарыда сипатталғандай example-skills плагинін пайдаланыңыз немесе frontend-design бумасын көшіріңіз. Skill жүктелгенін /doctor командасымен тексеруге болады.

4. Бір визуалды бағыт таңдау

Екеу емес, үшеу емес — біреуін таңдаңыз. Бруталистік деректі стильді беж түсті минимализммен араластырсаңыз, аулақ болғыңыз келген орташаланған нәтиженің дәл өзін аласыз. Бума атаулары түсінікті, бірақ оларды көзбен алдын ала қарай алмайсыз: ұнаған бума ішіндегі SKILL.md файлын ашып, түс палитрасы мен қаріптер сипаттамасын оқыңыз — бәрі жазылған.

5. Статикалық бет жасау

   Бір де бір анимациясыз. Алдымен типография, аралықтар және тор. Агенттен жергілікті алдын ала қарауды іске қосып, берген мекенжайын ашуды сұраңыз. Оны телефоныңыздан көру үшін «желімдегі басқа құрылғылардан ашылатындай етіп іске қос» деңіз, агент сізге мекенжай береді.

6. Бір қозғалыс көрінісін қосу

   Тек біреуін. Әдетте бұл — алғашқы экран: тақырып пайда болып, фон қабаты алдыңғы көріністен баяуырақ қозғалады. Агентке кітапхананың llms.txt файлын беріп, нені, қай жерде және қанша миллисекунд бойы қозғалатынын нақты сипаттаңыз. Алғашқы экранда opacity-ді қозғамаңыз; мұның себебі төмендегі бөлек бөлімде түсіндіріледі.

7. Қозғалысты азайту ережесін қосу

   Қолжетімділік бөліміндегі CSS ережесін және JavaScript reduced-motion баптауын қолданыңыз. Жарияламас бұрын қозғалысты азайту қосулы күйде бетті тексеріңіз.

8. Жариялау және жылдамдықты тексеру

   Кез келген тегін статикалық хостингке жариялаңыз — Vercel, Netlify немесе GitHub Pages. Агенттен «осы жобаны Vercel-ге жариялап, сілтемесін бер» деп сұраңыз. Жарияланғаннан кейін ғана URL мекенжайын PageSpeed Insights қызметінде тексеріңіз: қызметке ашық URL қажет, ол жергілікті бетті көре алмайды. «Largest Contentful Paint» көрсеткішін қараңыз — ең үлкен элементті көрсету уақыты; жасыл аймақ 2.5 секундқа дейін. Агент жергілікті нұсқаны жарияламай тұрып өлшей алады: Chrome DevTools MCP бетті Chrome-да ашып, сол көрсеткішті көрсетеді.

Алтыншы қадамда алдыңғы бесеуінің жұмысын құрту оңай.

Артық анимация сайтты неге ЖИ жасағандай одан сайын көрсетеді?#

Бұл тақырыпқа келгендердің бәрінің дерлік ойы осы жерде бұзылады: анимация аз болса арзан көрінеді, демек көбейту керек.

Бұл — дизайнды жақсарту үшін орнатқан дәл сол frontend-design skill-і. Anthropic агент бетті безендіруге қолданатын құралдың өзінде анимацияны шамадан тыс қолданбауды ескертеді.

Онда басқа да таптаурын тәсілдер аталған: кез келген тапсырмаға стандартты жауап ретінде шағын жазуы мен градиент екпіні бар үлкен санды көрсету; 01 / 02 / 03 деп нөмірленген блоктар, олар тек шынымен реттілік болғанда ғана орынды.

Шамадан тыс қолдану іс жүзінде былай көрінеді: агентке «анимациялар қос» деген тапсырма бересіз, ол әр бөлімге айналдырғанда пайда болу әсерін қосады. Тақырып сырғып кіреді, үш карточка бірінен кейін бірі шығады, пікірлер бүйірден сырғиды, ал төменгі колонтитул біртіндеп көрінеді. Әр әсер жеке алғанда жарайды. Бәрі бірге қозғалысы тоқтамайтын әрі назарды ештеңеге аудармайтын бет жасайды.

Жанды сайт басқаша жұмыс істейді: әдетте алғашқы экранда бір әдейі жасалған көрініс, одан кейін ұстамдылық. Қозғалыс екпін сияқты жұмыс істейді — бір ғана сөзге түскенде мағыналы болады.

Сұрауға арналған ереже осыдан шығады. Былай жазыңыз: «алғашқы экранда бір көрініс жаса да, қалғанының бәрін статикалық қалдыр». Бұл «анимациялар қос» дегеннен бірнеше сөзге ғана өзгеше, бірақ нәтиже әлдеқайда жақсы.

Анимациялар сайт жылдамдығын қалай төмендетеді?#

Google бетті бағалауда қолданатын үш көрсеткіш: ең үлкен элементті көрсету уақыты — 2.5 секундтан аспауға тиіс; әрекетке жауап беру — 200 миллисекундтан аспауға тиіс; орналасу ауысуы — 0.1-ден аспауға тиіс. Олар нақты кірулердің 75-процентилінде өлшенеді.

Мұның мұнда неге маңызды екенін тарқатайық. Әдепкіде агент көрініп шығу әсерін былай жасайды: бөлімнің мөлдірлігін нөлге түсіреді де, бөлім көрініс аймағына кіргенде бұл параметрді алып тастайды. Егер әсер алғашқы экранда болса, сурет толық жүктеліп, декодталған болуы мүмкін, бірақ көрсету басталғанша көрсеткіш оны есепке алмайды. Жүктелгеннен кейін мөлдірлікті сценарий алып тастаса, жағдай одан да нашарлайды — көрсеткіш бүкіл сценарийдің аяқталуын күтеді.

Мұны түзетудің екі жолы бар. Біріншісі — бастапқы көрсету есепке алынуы үшін әсерді нөлдің орнына сәл ғана мөлдірліктен бастау. Екіншісі — алғашқы экранда мөлдірлікті қозғамай, тек жылжуды анимациялау.

Екінші мәселе — қай қасиеттерді анимациялау арзан, қайсысы қымбат екені.

Қарапайым тілмен айтқанда: браузер суретті қабаттардан құрастырады, ал орын мен мөлдірліктегі өзгерістер ең соңғы әрі ең арзан кезеңде орындалады. Қалғанының бәрі бетті қайта есептеуге мәжбүр етеді. Сол құжаттамадағы өлшемдер: top және left ығысулары арқылы анимациялау орналасуға 37 миллисекунд, рендерлеуге 79 миллисекунд жұмсайды; дәл сол көрнекі әсерді transform арқылы жасағанда, екеуіне де нөл кетеді.

Есте ұстауға тұратын қайшылық бар: opacity композиция үшін арзан, бірақ жылдамдық көрсеткішіне сай элементті есептен шығарады. Демек браузерге арзан әрі өнімділікке қауіпсіз анимация — екі бөлек нәрсе.

Тағы бір нәрсе — агенттер «оңтайландыру үшін» жиі қоса салатын will-change қасиеті. MDN құжаттамасында керісінше делінген:

Онда бұл қасиет тек бар өнімділік мәселелерін шешетін соңғы амал ретінде көзделгені де айтылады. Алдын ала сақтандыру ретінде жұмыс істемейді. Елу элементке will-change: transform, opacity деп жазу — генерацияланған кодтың үйреншікті белгісі.

Орналасу ауысуы туралы мәселе қарапайымырақ. Google құжаттамасы анимацияны кінәламайды; керісінше, мұқият ауысулар оқырманды шошытпай мазмұнды жаңартуға көмектеседі. Тәсіл сол күйі: масштабты width пен height орнына transform арқылы өзгертіңіз, ал координаттарды емес, ығысуларды қолданып жылжытыңыз.

Қозғалыс кей адамдарға физикалық зиян келтірсе ше?#

Бұл бөлім жай ғана әдеп үшін емес, одан маңызды себеппен керек. Кәсіп иесі сатқанда клиент болатын аудиторияның өзі — қырықтан асқан адамдар.

W3C консорциумы салдарын жұмсартып айтпайды: жүрек айну мен мигрень, кейде жатуға мәжбүр ететіндей ауыр болады.

Мұны үш жол стильмен ескеруге болады:

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

Есте ұстайтын үш жайт бар.

Анимацияны әдепкі мінез-құлық етіп жазып, осы ереженің ішінде өшіріңіз — осылайша бет керісінше істегеннен гөрі қауіпсізірек істен шығады.

Спецификацияда «алып тастайды, азайтады немесе алмастырады» делінген; толық өшіру тіпті бірінші нұсқа емес. Қатты сырғып кіруді қысқа көрініп шығумен алмастырған, оны тұтастай тоқтатқаннан жақсы: барлық анимацияны өшіру жүктелу индикаторлары мен орындалу жолақтарын бұзады.

JavaScript анимациялары қозғалыс қалауын бөлек өңдеуі керек; CSS ұзақтық баптауы GSAP уақыт шкаласын тоқтатпайды. matchMedia(...).matches мәнін айнымалыға сақтау жеткіліксіз: баптау соған қарай тармақталуы керек. GSAP үшін элемент кәдімгі HTML/CSS ішінде көрінсін де, қозғалыс пайдаланушы рұқсат еткенде ғана жасалсын:

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

Тақырыптың негізгі стилі жасырын не жылжытылған болмауы керек. Қозғалысты азайту қосулы болса, ол көрінетін әрі қозғалмайтын күйде қалады. Бет ашық кезде қалау өзгерсе, сұрау сәйкес келмегенде GSAP анимацияны кері қайтарады. mm.revert() ажырату кезінде жиналған анимацияны да жояды. Motion ішінде сол кітапхананың баптауында балама тармақ жасаңыз; жалғыз CSS ережесі жеткіліксіз. GSAP matchMedia өмірлік циклі мен тазалау құжаттамасын қараңыз.

Ескеретін ресми қолжетімділік өлшемі де бар. A деңгейіндегі WCAG 2.2.2 өлшемі бойынша, бір нәрсе автоматты түрде қозғалып, жыпылықтап немесе айналып, бес секундтан ұзақ көрсетілсе әрі басқа мазмұнмен қатар тұрса, пайдаланушы оны тоқтата алуы керек. Бұл агенттер жиі кірістіретін автоматты айналатын карусельдер мен шексіз жылжымалы жолдарға қатысты.

Іс жүзінде жиі бұзылатын жеті тұс#

1. Алғашқы экран көрініп шыққанша жасырын тұрады. Мөлдірлігі нөл болатын элемент көрсету көрсеткішінің үміткері ретінде есептелмейді. Бұл — ең қымбат қате, өйткені іздеу рейтингтеріне әсер ететін көрсеткішке зиян тигізеді.

2. Бәріне анимация қосылады. Әр бөлім сырғып кіреді, әр карточка пайда болады. Anthropic бұл генерацияланған дизайн әсерін күшейтетінін ашық айтады.

3. Scrolljacking. Сайт тінтуір дөңгелегінің қалыпты әрекетін өзінің «кинематографиялық» логикасымен алмастырады.

Сол зерттеуде қатысушылардың көбі аз да болса бағдарын жоғалтқан.

4. Орналасу қасиеттері анимацияланады. Transform орнына координаттар мен өлшемдер қолданылады. 37 және 79 миллисекунд — нөлмен салыстырғанда.

5. Анимациялар тым ұзақ. Пайдалы ұзақтық диапазоны — 100-ден 400 миллисекундқа дейін; 400 миллисекунд та өте баяу саналады және тек үлкен қозғалыстарға жарайды. Агенттер әдепкіде толық бір секунд қолданғанды ұнатады.

Оның зерттеуіне сәйкес, қолайлы аралық — 100-ден 400 миллисекундқа дейін; 400 миллисекундтың өзі баяу саналады және тек үлкен қозғалыстарға сай келеді. Агенттер әдепкіде толық секунд қолданғанды ұнатады.

6. Қозғалысты азайту ережесі жоқ. Агент оны өздігінен қоспайды.

7. Әр әрекет сайын сайт баяулай береді. Бұл React-ке тән: элементке сілтемесіз әрі тазалаусыз жасалған анимация компонент жаңарған сайын көбейе береді. Бет біртіндеп, еш себепсіз баяулай бастайды.

Сегізінші тұзақ та бар. «Агент скриншот жасап, көргенін түзетеді» деген тәсіл статикалық беттерде жақсы жұмыс істейді, ал анимациялы элементтермен агентті бітпейтін өзгерту цикліне қамайды: ол аралық кадрды көріп, оны қате деп ойлайды, түзетеді, содан кейін тағы бір аралық кадрды көреді. Оның үстіне әр скриншот контексті тұтынады.

Құны қанша және бір сайтқа айлық лимитті бірден жұмсап қоймау үшін не істеу керек?#

Ағылшын тіліндегі vibe-coding қауымдастықтарында жиі кездесетін оқиға: біреу ғарыш арқылы айналатын жарқыраған бет жасайды, нәтижесін жариялайды, ал талқылаудан сол бір сайт айлық квотасын түгел жұмсап қойғаны белгілі болады.

Бұл күтілетін жайт. Анимация әдеттегі орналасу жұмысынан бірнеше себеппен қымбатқа түседі. Нәтижені кодтан оқып тексере алмайсыз; қайталап көру қажет. Әр өзгеріс файлдарды қайта оқуды талап етеді. Ал қозғалып тұрған элементтерге арналған скриншот циклі қажетсіз тексерулер қосады.

Көмектесетін нәрселер:

Бір көріністен бастап жасап, нәтижесін бекітіңіз. «Бүкіл сайтқа анимация қос» деген бір реттік сұрау артық шығынға кепіл болады. Анимациялы элементтердің скриншот арқылы тексерілуін өшіріп, өзіңіз көзбен тексере аласыз. CLAUDE.md қысқа болсын, сонда әр сұрауда ережелер контексті тұтынбайды. Агентке кітапхананың llms.txt файлын алдын ала беріңіз, әйтпесе ол ескірген қосу тәсілін ойлап тауып, содан соң өзі жасаған қате кодын жөндеуге тырысады.

Claude Code неліктен бүкіл жобаны қайта оқиды деген мақалада жоба үстінде жұмыс істегенде токендердің қайда жұмсалатыны түсіндіріледі; Claude Code лимитін қалай сарқып алмауға болады деген мақалада пайдалануды бақылау жолдары қарастырылған.

Әрі қарай не істеу керек?#

Алғашқы бетіңізді сегіз қадаммен жасаңыз. Бір визуалды бағыт таңдап, алғашқы экранда бір көрініс құрып, жылдамдықты тексеріңіз.

Келесі қадамдарыңыз үшін — Ailoot.