Motion

Brand-Kit Motion-Tokens · alle Demos laufen live in Token-Geschwindigkeit
Tempo-Skala
--dur-micro0.18sButton-Press, Tap-Feedback
--dur-fast0.22sKarten-Hover, Chip-Toggle
--dur-base0.25sZustands-Wechsel, Fades
--dur-reveal0.65sScroll-Reveal, Bubble-Einstieg
--dur-slow0.8sAtmo-/Opacity-Fades
--dur-heartbeat2.6sHerzschlag-Loop (Presence, Logo)
--dur-breathe5.2sRobin-Idle (Atem), Welt atmet mit
Easings — gleiche Dauer, anderer Charakter
--ease-standardAllzweck (ease)
--ease-expoAtmo-Hover, Kamera-Dolly — schnell rein, weich aus
--ease-springMini-Robin, Buttons — Overshoot/Leben
--ease-in-outAtem-Loops, Pendel
Choreografie-Prinzipien
Drei ZeitskalenGesicht reagiert in Sekunden, Stimmung driftet in zig Sekunden, die Welt wechselt in Minuten. Nie alles gleichzeitig gleich schnell.
Emotion = BühnenlichtAtmosphären-Wechsel als Licht-Crossfade (2,2s pro Ebene), Valenz steuert Licht, Arousal steuert Bewegungstempo — nie Dunkelheit als Strafe.
Exit schneller als EnterAusblenden in ~65 % der Einblendzeit. Antwortgefühl schlägt Eleganz.
Stagger 30–50 msListen und Bubbles treten versetzt ein, nie alle gleichzeitig, nie träge Kaskade.
Nur transform & opacityKompositor-freundlich; nie width/height/top animieren. Kontinuität über Shared Elements (Robin → Porträt, ~450 ms).
Reduced Motionprefers-reduced-motion stoppt alle Loops — Inhalte bleiben vollständig lesbar, Zustand bleibt erkennbar.