Motion
Osm primitiv pro prémiový mikro-pohyb. Stojí na motion tokenech (durations + easings z Tvary & pohyb) a vždy respektují prefers-reduced-motion.
Principy
Tempo
Default base + spring-soft. Klid nad efektem. Snappy jen pro produktové mikro-interakce.
Účel
Animuj jen co se mění. Pohyb potvrzuje akci nebo vede pozornost — nikdy nedělá show.
Přístupnost
Každé primitivum honoruje prefers-reduced-motion a běží jen na transform + opacity (GPU).
Scroll reveal
Obsah se vlije do vidění při vstupu do viewportu. Směr přes direction, stagger přes delay. <ScrollReveal>.
Vlije se postupně
Tělo, které tě poslouchá
Stagger přes delay — 0 → 100 → 200 ms.
Scrollni nahoru/dolů, ať reveal přehraje znovu (repeat).
Number ticker
Skutečná čísla, ne fake CSS — hodnota se rozjede z 0 na cíl s ease-out. cs-CZ locale dává tenké mezery v tisících. <CountUp>.
z 2 184 recenzí
Měnící se čísla se animují
Žádné živě se měnící číslo se nemění staticky. Počet v košíku, množství, mezisoučet — při změně VKLOUZNE, neskočí. Drží šířku (žádný layout shift). <AnimatedNum>.
Magnetic CTA
CTA tiše přitahuje kurzor. Strength 0.3 default; výš už ztrácí důstojnost. Najeď myší. <Magnetic>.
Cursor tilt
Karta se nakloní ve 3D k pozici kurzoru. maxTilt ~8° působí přirozeně. <CursorTilt>.
Parallax
Vrstvy pozadí se posouvají jinou rychlostí než scroll → hloubka. Parent musí mít overflow-hidden. <Parallax>.
Hero parallax
Scrollni stránku
Vrstvy se posunou jinou rychlostí než sekce.
Card stack
Hover na skupinu zatuckne sousedy dozadu (scale + opacity + desaturace). Aktuální zůstane ostrá. CSS-only (.card-stack).
Smooth scroll
<html> má scroll-behavior smooth + scroll-padding-top 96px. Klikni na kotvu — stránka dojede, sticky nav nepřekryje.
Reduced-motion uživatelé dostanou skok (auto).
Page transitions
View Transitions API (Chromium) přidává jemný překryvný fade mezi route changes. Přejdi mezi token stránkami a sleduj přechod.
Produkční hero
Reveal stagger + parallax pozadí + magnetic CTA + count-up + cursor tilt — referenční hero, který bere best-of.
Smart výživa
Tělo v rytmu, který funguje
0 lidí si nechalo sestavit mix na míru. Adaptogeny, vitamíny, organic.
Přehled primitiv
| Primitivum | Kde žije | Použití |
|---|---|---|
| ScrollReveal | components/motion | Vstup sekcí, hero text, stagger gridů |
| CountUp | components/motion | Statistiky, body, hodnocení (decimals) |
| AnimatedNum | components/motion | Živě se měnící čísla — košík, množství |
| Magnetic | components/motion | Primární CTA |
| CursorTilt | components/motion | Produktové / feature karty |
| Parallax | components/motion | Hero pozadí, feature vrstvy |
| card-stack | globals.css (CSS) | Skupiny karet na hover |
| smooth scroll / page transitions | globals.css | Kotvy #sekce, přechody route |
duration-*, ease-*). Nikdy nehardcoduj ms/bezier v komponentě. Vše běží na transform + opacity a respektuje prefers-reduced-motion.