Bewegung

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

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 form="board" spalten={7} zeilen={3} />

/** 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.

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

Kurz