Motus · Моушн
Моушн — повільне, шляхетне
Об'єкти Crocos рухаються як портик мармурової будівлі: початок прихований у свідомості, кінець — у тиші. Усі переходи — м'які виходи, без bouncy-easing та bezier-карикатур.
Hover на лінку, focus-ring.
Кнопка → kerning розширюється на hover.
Modal, page-level transition.
Hero-reveal, lookbook-scene fade-in.
Durationes · Тривалості
4 тривалості
| Token | Value | Use |
|---|---|---|
| --m-fast | 240ms | Hover, focus, micro-feedback |
| --m-base | 380ms | Buttons, card lifts, default |
| --m-slow | 640ms | Page-level transitions, modal entry |
| --m-scene | 920ms | Hero reveal, lookbook scenes |
Lenitas · Easings
3 easings
| Token | Value | Use |
|---|---|---|
| --e-marble | cubic-bezier(.22, .61, .36, 1) | Default — gentle deceleration |
| --e-precise | cubic-bezier(.4, 0, .2, 1) | Tight functional UI |
| --e-emphasis | cubic-bezier(.32, .72, 0, 1) | Reveals, accent moments |
Regulae · Правила
Що бренд робить — і чого не робить
Do
- Один напрямок руху на сторінку. Без crossing-anim.
- Hover на кнопці:
letter-spacingрозширюється на.04emза--m-base. - Card lift:
translateY(-2px) + shadow-mdза--m-base. - Page transition: fade + 8px translate,
--m-slow. - Reveal сцен: stagger по 80–120ms, easing
--e-emphasis.
Don't
- Bounce, elastic, spring із overshoot.
- Парралакс на hero (карикатурно для luxury).
- Auto-playing video на лендінгу зі звуком.
- Анімовані іконки, що повторюються (reading attention drain).
- Easings
ease-inalone — занадто плаский.