# Bewegung

> Kurz und ruhig. Drei Dauern, zwei Verläufe, kein Federn, kein Kreisel. Bewegung erklärt, was passiert, und steht still, wenn das System weniger Bewegung will.

Quelle: https://brand.heyalbert.family/bewegung/ · Hey Albert Marke und Designsystem

Bewegung erklärt, sie schmückt nicht. Eine Karte gleitet dorthin, wo sie jetzt hingehört. Ein Toast kommt von unten. Ein Skelett atmet, bis der Inhalt da ist. Mehr bewegt sich nicht.

## Dauern und Verläufe

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| dauer-kurz | var(--dauer-kurz) | 120ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 200ms |  |  |
| dauer-atem | var(--dauer-atem) | 300ms |  |  |
| verlauf-ruhig | var(--verlauf-ruhig) | cubic-bezier(0.2, 0, 0.2, 1) |  |  |
| verlauf-atem | var(--verlauf-atem) | cubic-bezier(0.4, 0, 0.6, 1) |  |  |
| dauer-kurz | var(--dauer-kurz) | 0ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 0ms |  |  |
| dauer-atem | var(--dauer-atem) | 0ms |  |  |

| Token | Wofür |
|---|---|
| `--dauer-kurz` | Zustände: Zeiger, Druck, Fokus, Wechsel einer Farbe |
| `--dauer-mittel` | Einblendungen: Menü, Toast, Dialog |
| `--dauer-atem` | das Atmen des Skeletts |
| `--verlauf-ruhig` | alles außer dem Atmen |
| `--verlauf-atem` | nur das Skelett, hin und her |

In SwiftUI: `AlbertBewegung.verlaufRuhig(AlbertBewegung.dauerKurz)`.

## Was sich bewegt

- **Zustände** wechseln weich: Hintergrund, Rand, Schrift. Nie die Größe.
- **Einblendungen** kommen ruhig, ein Toast hebt sich wenige Pixel von unten.
- **Eine Sache wandert:** Übernimmt Tobias die Fahrt, gleitet die Karte aus „Offen“ in seine Spur. Auf der Website zeigt genau diese eine Bewegung, was Albert tut.
- **Das Skelett atmet** zwischen `--karte` und `--knopf-zweit`. Es hat die Form des Inhalts, der gleich kommt.

## Was sich nie bewegt

- Kein Federn, kein Hüpfen, kein Wackeln.
- Kein Kreisel. Wer wartet, sieht ein Skelett.
- Kein Fortschrittsbalken als Dekoration.
- Kein Konfetti, auch nicht, wenn Lena alles abgehakt hat. Albert stellt fest („Fertig.“), loben tun Menschen.
- Kein Autoplay-Video und kein Karussell auf der Website.

### Skelett

Quelle: `packages/design-system/components/zustaende/Skelett.jsx`

Das Skelett – die Form dessen, was gleich kommt.

```jsx
<Skelett form="board" spalten={7} zeilen={3} />
```

Nie ein Kreisel, nie ein Fortschrittsbalken. Es atmet zwischen Karte und Zweitknopf-Beige und steht still, wenn das System weniger Bewegung will.

```ts
/** Skelett in der Form des Inhalts. Atmet 300 ms, steht bei reduzierter Bewegung, nie ein Kreisel. */
export interface SkelettProps {
  /** "karte" (eine Karte) | "zeile" (Liste) | "board" (Stundenraster). */
  form?: "karte" | "zeile" | "board";
  /** Zeilen je Spalte. */
  zeilen?: number;
  /** Spalten im Board. */
  spalten?: number;
  style?: React.CSSProperties;
}
export function Skelett(props: SkelettProps): JSX.Element;
```

## Reduzierte Bewegung

Wer im System weniger Bewegung eingestellt hat, bekommt keine. Bei `prefers-reduced-motion: reduce` stehen alle drei Dauern auf null. Das Skelett atmet nicht mehr, der Toast steht einfach da.

#### Bewegung · Dauern

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| dauer-kurz | var(--dauer-kurz) | 120ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 200ms |  |  |
| dauer-atem | var(--dauer-atem) | 300ms |  |  |

#### Bewegung · Verläufe

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| verlauf-ruhig | var(--verlauf-ruhig) | cubic-bezier(0.2, 0, 0.2, 1) |  |  |
| verlauf-atem | var(--verlauf-atem) | cubic-bezier(0.4, 0, 0.6, 1) |  |  |

#### Bewegung · Reduzierte Bewegung

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| dauer-kurz | var(--dauer-kurz) | 0ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 0ms |  |  |
| dauer-atem | var(--dauer-atem) | 0ms |  |  |

In SwiftUI schaltet `accessibilityReduceMotion` die Bewegung ganz ab, nicht halb.

## Kurz

> **So**
>
> - Nur die drei Dauern und die zwei Verläufe.
> - Bewegung, die zeigt, wohin etwas gegangen ist.
> - Skelett statt Kreisel.

> **Nicht so**
>
> - Federkurven, `spring()`, eigene Kurven, Dauern über `--dauer-atem` für Zustände.
> - Animation als Belohnung oder als Aufmerksamkeitsfang.
> - Bewegung, die bei reduzierter Bewegung weiterläuft.