---
name: web-motion
description: Přidá do webu prémiový pohyb pomocí GSAP (animace), Lenis (plynulý scroll) a React Bits (animované komponenty). Použij, když uživatel chce, aby web „nevypadal jako šablona“, chce animace, plynulé scrollování, animovaný nadpis nebo pozadí, nebo zmíní GSAP, Lenis, React Bits či 21st.dev.
---

# Web motion: GSAP + Lenis + React Bits

Cíl: web, který působí jako od designéra. Málo efektů, ale dobře načasovaných. Pohyb má vést oko, ne rušit.

## 1. Zjisti, na čem web stojí

- Podívej se do `package.json`: React / Next.js / Vite / Astro / čisté HTML?
- Tailwind ano/ne (podle toho vybereš variantu React Bits komponenty: `-TW` nebo `-CSS`, `-TS` nebo `-JS`).
- Než něco nainstaluješ, řekni uživateli, co a proč přidáš.

## 2. Nainstaluj

```bash
npm install gsap lenis
npm install @gsap/react   # jen u Reactu (hook useGSAP)
```

GSAP je zdarma i pro komerční použití, včetně pluginů jako ScrollTrigger a SplitText.

## 3. Plynulý scroll (Lenis) propojený s GSAP

Jednou v kořeni aplikace (v Reactu v efektu kořenové komponenty, s úklidem `lenis.destroy()`):

```js
import Lenis from 'lenis'
import 'lenis/dist/lenis.css'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const lenis = new Lenis()
lenis.on('scroll', ScrollTrigger.update)
gsap.ticker.add((time) => lenis.raf(time * 1000))
gsap.ticker.lagSmoothing(0)
```

Nepoužívej současně `autoRaf: true` a GSAP ticker, smyčka by běžela dvakrát.

## 4. Animace (GSAP)

V Reactu vždy přes `useGSAP()` (sám uklízí), ne přes `useEffect`.

Výchozí sada, která skoro vždy funguje:

1. **Úvodní nadpis:** slova nebo písmena vyjedou zespodu s malým zpožděním (`stagger: 0.04–0.08`, `duration: 0.8`, `ease: 'power3.out'`).
2. **Sekce při scrollu:** obsah sekce se jemně vysune (`y: 40 → 0`, `opacity: 0 → 1`) přes ScrollTrigger se `start: 'top 80%'`.
3. **Obrázky:** lehký parallax (`yPercent: -10`, `scrub: true`).

Pravidla:
- Animuj jen `transform` a `opacity` (ne `top`, `height`, `width`), jinak se web trhá.
- Délky 0,4–1 s. Nic, co uživatele zdržuje od obsahu.
- Jeden výrazný efekt na sekci, ne pět.

## 5. Komponenty (React Bits, 21st.dev)

- Na reactbits.dev vyber komponentu (např. animovaný text, pozadí, tlačítko) a nainstaluj ji příkazem ze stránky komponenty, třeba:
  `npx shadcn@latest add @react-bits/BlurText-TS-TW`
- Komponentu dej tam, kde dává smysl: animovaný text do úvodu, animované pozadí za hero, ne na každou sekci.
- Víc komponent najdeš na 21st.dev (instalace jedním příkazem přes shadcn).

## 6. Přístupnost a mobil (povinné)

- GSAP animace obal do `gsap.matchMedia()` a pro `(prefers-reduced-motion: reduce)` je vypni nebo zkrať.
- Lenis respektuje `prefers-reduced-motion` sám (`respectReducedMotion` je ve výchozím stavu zapnuté).
- Vyzkoušej web na mobilu: animace nesmí posouvat layout ani schovávat text.

## 7. Než skončíš

- Spusť build a otevři web. Zkontroluj, že scroll je plynulý, nadpis se animuje a nic nebliká.
- Shrň uživateli, co jsi přidal a kde se to dá vypnout nebo upravit.