Web od Clauda, který nevypadá jako šablona
Tři zdarma nástroje, díky kterým tvůj web dostane animace a plynulý pohyb jako od designéra. A zapojí ti je Claude, ty nemusíš umět programovat.
které žijí.
Co ti to přinese
Když necháš Clauda postavit web bez zadání, dopadne skoro vždycky stejně: fialový přechod, nadpis uprostřed a tři karty s ikonami. Lidi takový web poznají na první pohled. Tenhle návod to změní.
Web nepůsobí jako od AIDostane pohyb, který mají weby od designérských studií: nadpisy, které vyjedou, a sekce, které plynou.
Zaujme v prvních vteřináchAnimovaný úvod přitáhne pozornost dřív, než návštěvník odscrolluje pryč.
Nezaplatíš ani korunuVšechny tři nástroje jsou zdarma, i pro firemní web.
Nemusíš umět programovatClaude Code to do webu zapojí za tebe. Ty jen řekneš, co chceš.
Tři nástroje, jedna věc každý
Nemusíš si pamatovat názvy. Stačí vědět, co který dělá.
GSAP rozpohybuje cokoli na webu
Nadpisy, které vyjedou písmeno po písmenu, obrázky a celé sekce, které se rozjedou, když k nim doscrolluješ.
Lenis udělá scroll máslově plynulý
Místo trhaného skákání stránka plyne jako v aplikaci. Má pár kB, takže web nezpomalí, a kotvy i lepicí menu fungují dál.
React Bits hotové efekty ke zkopírování
Přes 200 animovaných textů, pozadí a tlačítek. Vybereš si, co se ti líbí, a Claude to vloží jedním příkazem.
Bonus: nestačí ti to? Na 21st.dev je přes 12 000 dalších komponent s náhledem naživo.
Jak to rozjet za 10 minut
- 1
Nainstaluj si náš skill web-motion 1 min
Skill je návod pro Clauda: ví, co nainstalovat a kde s efekty přestat. Vlož do Terminálu:
mkdir -p ~/.claude/skills/web-motion && curl -fsSL https://diktuj.com/navody/motion/SKILL.md -o ~/.claude/skills/web-motion/SKILL.md - 2
Otevři svůj web v Claude Code 1 min
Ve složce webu napiš
claude. Máš čisté HTML? Nevadí, použije jen GSAP a Lenis. - 3
Řekni mu, co chceš 5 min
Zkopíruj prompt. Odkazy nech v něm, Claude si podle nich dohledá aktuální návody:
Přidej do webu GSAP, Lenis a React Bits: animovaný nadpis v úvodu, plynulý scroll a jemné vyjíždění sekcí. https://github.com/greensock/GSAP https://github.com/darkroomengineering/lenis https://github.com/DavidHDev/react-bits - 4
Projeď web a dolaď 3 min
Otevři ho na počítači i na mobilu a řekni Claudovi, co ubrat nebo zrychlit. Hodí se třeba:
„Zkrať animace na polovinu.“„Nech pohyb jen v úvodu.“„Přidej animované pozadí z React Bits.“
✓Hotovo poznáš tak, že nadpis v úvodu vyjede po slovech, scroll plyne a sekce se jemně vysouvají. Nic z toho nesmí zdržovat čtení.
Nemáš Claude Code a web je na Webflow? Plynulý scroll dostaneš i tak: stačí do webu vložit jeden script z README Lenisu.
Co Claude udělá za tebe
Se skillem web-motion projde šest kroků, o které se nemusíš starat:
Ať to nepřeženeš
Dělej
- ✓Jeden výrazný efekt na sekciOko pak ví, kam se podívat. Víc efektů najednou splyne v chaos.
- ✓Animace dlouhé 0,4 až 1 sekunduKratší nikdo nepostřehne, delší zdržuje. Tohle je rozsah, který používají profesionální weby.
- ✓Vyzkoušej to na slabším mobiluVětšina lidí z reelů přijde z telefonu. Když se tam web trhá, odejdou.
Nedělej
- ✕Animovat úplně všechnoKdyž se hýbe všechno, nic nevynikne a stránka působí levně.
- ✕Schovat text za animaciPokud musí člověk čekat, než si přečte nabídku, část lidí to nedočká.
- ✕Prodávat komponenty z React Bits jako svojeNa webu je použít smíš, i komerčně. Jako vlastní knihovnu je ale dál prodávat nesmíš.
Licence v kostce: GSAP smíš použít na jakýkoli web, jen ne v no-code nástroji, který konkuruje Webflow. React Bits je pod MIT + Commons Clause: komerčně ano, přeprodávat ne.
3 tipy, které fungují
Z praxe. Každý má i větu, kterou můžeš rovnou poslat Claudovi.
Ukaž mu vzor, ne popis
Slovy se pohyb popisuje těžko. Najdi web, který se ti líbí, třeba na lenis.dev/showcase, a pošli Claudovi odkaz.
Napiš Claudovi„Chci podobný pohyb jako na tomhle webu: [odkaz]. Jen v úvodu a u referencí.“
Animuj to, co prodává
Pohyb přitahuje oko. Dej ho hlavnímu nadpisu s nabídkou a tlačítku, ne patičce nebo logům klientů.
Napiš Claudovi„Animuj jen hlavní nadpis a tlačítko Objednat. Zbytek nech v klidu.“
Vyzkoušej web bez pohybu
Někomu se z animací točí hlava, a tak je má v systému vypnuté. Zapni si na Macu Nastavení › Zpřístupnění › Displej › Omezit pohyb a zkontroluj, že web pořád funguje.
Napiš Claudovi„Ověř, že se při zapnutém Omezit pohyb animace vypnou a obsah je hned vidět.“