Motion

Motion explains; it does not decorate. A card glides to where it now belongs. A toast comes up from below. A skeleton breathes until the content arrives. Nothing else moves.

Durations and curves

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

What moves

• States change softly: background, outline, text colour. Never the size.
• Reveals arrive calmly; a toast rises a few pixels from below.
• One thing travels: when Tobias takes the drive, the card glides from “open” into his lane. On the website exactly this one movement shows what Albert does.
• The skeleton breathes between --karte and --knopf-zweit. It has the shape of the content that is about to arrive.

What never moves

• No springs, no bouncing, no wobbling.
• No spinner. Whoever waits sees a skeleton.
• No progress bar as decoration.
• No confetti, not even when Lena has ticked everything off. Albert states (“Fertig.” – done); praise comes from people.
• No autoplay video and no carousel on the 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;

Reduced motion

Whoever has asked their system for less motion gets none. With prefers-reduced-motion: reduce all three durations are zero. The skeleton stops breathing; the toast simply appears.

In SwiftUI accessibilityReduceMotion switches motion off completely, not halfway.

In short