liquiddesign

Zasada 07

Ruch z szacunkiem

Animacja właściwości layoutowych przelicza geometrię strony w każdej klatce i ciągnie za sobą sąsiadów elementu. Transform i opacity działają na kompozytorze, płynnie i bez dotykania układu. Do tego część użytkowników fizycznie choruje od ruchu, więc reduced motion wyłącza ozdoby.

Przesuń kafelek A i patrz na B oraz C

Margin przelicza layout w każdej klatce i wiezie sąsiadów ze sobą. Transform zostawia układ w spokoju, a kolizję z B projektujesz świadomie.

✕ Animacja margin-left

A
B
C

B i C jadą razem z A, bo każda klatka animacji zmienia layout całego rzędu.

✓ Animacja transform

A
B
C

B i C stoją nieruchomo. Transform działa na kompozytorze i nie dotyka geometrii strony.

Reguły

  • Animacje dotyczą wyłącznie transform i opacity, layout stoi w miejscu.
  • Element animowany nie zmienia pozycji innych elementów w żadnej klatce.
  • prefers-reduced-motion redukuje przejścia do natychmiastowej zmiany stanu.
  • Ruch ma zadanie: prowadzi wzrok albo tłumaczy zmianę, nigdy nie jest tapetą.

Wzorzec w kodzie

Transform i opacity, jedyne właściwości warte animowania
.tile {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.tile.shifted {
  transform: translateX(8rem);
}
Globalny wyłącznik dla preferencji ograniczonego ruchu
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia
Zastosuj w moim projekcie zasadę „Ruch z szacunkiem" z metodologii Liquid Design.

Animuje się transform i opacity, nigdy layout, a prefers-reduced-motion jest rozkazem, nie sugestią.

Wymagania:
- Animacje dotyczą wyłącznie transform i opacity, layout stoi w miejscu.
- Element animowany nie zmienia pozycji innych elementów w żadnej klatce.
- prefers-reduced-motion redukuje przejścia do natychmiastowej zmiany stanu.
- Ruch ma zadanie: prowadzi wzrok albo tłumaczy zmianę, nigdy nie jest tapetą.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/zasady/ruch