Station 3B
Dienstplan
8 Schichten, 3 Personen, eine offene Übergabe.
Motion
Bewegung erklärt Ursache und Wirkung, statt zu dekorieren: kurze, unterbrechbare Übergänge mit den Motion-Tokens. Austritte sind rund 70 % so lang wie Eintritte; bei reduzierter Bewegung erscheint der Endzustand sofort.
Prinzipien
Vier Regeln halten Bewegung ruhig, verständlich und zugänglich.
Bedeutung
Bewegung zeigt, was passiert ist: Woher ein Element kommt, wohin es geht und was sich verändert. Reine Dekoration vermeiden wir.
Unterbrechbar
Jede Animation reagiert sofort auf neue Eingaben. Ein zweiter Klick oder eine neue Auswahl startet nicht erst nach dem Ende der alten Bewegung.
Austritt ≈ 70 % des Eintritts
Eintritte nutzen 180 ms, Austritte 120 ms. Verschwindendes braucht weniger Aufmerksamkeit als Erscheinendes und blockiert den nächsten Schritt nicht.
Reduzierte Bewegung
Bei prefers-reduced-motion: reduce springen alle Bausteine an den Endzustand. Farb- und Deckkraftwechsel bleiben kurz, Positionswechsel entfallen.
Reduzierte Bewegung simulieren
Schaltet die Demos auf den Endzustand ohne Animation – so wie prefers-reduced-motion: reduce. Die Systemeinstellung bleibt unverändert; der Schalter gilt nur für diese Seite.
Tokens
Alle Werte stammen aus den Token-Primitives und sind die einzige Quelle für Komponenten und Doku.
| Token | Wert | Verwendung |
|---|---|---|
| duration.fast | 120ms | Austritt, Press-Feedback |
| duration.base | 180ms | Eintritt, Standardwechsel |
| duration.slow | 280ms | Große Flächen, Feder-Griff |
| duration.shimmer | 1600ms | Skeleton-Schimmer |
| easing.standard | cubic-bezier(0.2, 0, 0, 1) | Ruhige Ein- und Austritte |
| easing.press | cubic-bezier(0.3, 0.7, 0.4, 1.5) | Taktiles Feedback, Switch |
| springs.snappy | stiffness 500 · damping 30 | Layout und Listen |
| springs.gentle | stiffness 260 · damping 26 | Große Flächen, Karten |
| pressScale | scale(0.97) | Skalierung beim Drücken, reduziert 1 |
Presets
Die Bausteine lassen sich einzeln einsetzen. Der Schalter oben zeigt jeweils den reduzierten Endzustand.
Press
Beim Drücken skaliert die Fläche auf --fui-press-scale (0.97), bei reduzierter Bewegung bleibt sie bei 1.
Feder
Der Griff gleitet mit --fui-ease-press und leichtem Overshoot; reduziert wechselt er ohne Überschwingen.
Collapse
Höhe und Deckkraft laufen mit den Tokens. Der Auslöser bleibt beim Konsumenten; im geschlossenen Zustand ist der Inhalt inert.
Ein kurzer Detailbereich, der sich jederzeit unterbrechen lässt. Bei reduzierter Bewegung steht der Endzustand sofort.
AnimatedList
Neue Einträge klappen auf, entfernte zu und Umsortierungen gleiten per Layout-Animation. Nach dem Löschen wandert der Fokus auf den nächsten Eintrag.
- Visite vorbereiten
- Übergabe prüfen
NumberFlow
Zahlen laufen zum neuen Wert und bleiben durch tabellarische Ziffern breitenstabil. Reduziert erscheint der Zielwert sofort.
1.284
View Transition
Karte und Detail tragen denselben view-transition-name. Ohne Browser-API oder bei reduzierter Bewegung wechselt der Zustand sofort.
Do & Don't
Kurze Checkliste für neue Bewegungen in Komponenten und Apps.
Do
- Nur transformieren und die Deckkraft animieren.
- Eintritt 180 ms, Austritt 120 ms – kurz und präzise.
- Bewegung jederzeit unterbrechbar halten.
- prefers-reduced-motion respektieren und Endzustände sofort zeigen.
- Bewegung nur einsetzen, wenn sie eine Ursache-Wirkung erklärt.
Don't
- Layout-Eigenschaften wie width oder top animieren.
- Endlose dekorative Schleifen im Hintergrund laufen lassen.
- Eingaben blockieren, bis eine Animation fertig ist.
- Den Austritt länger als den Eintritt machen.
- Die Systemeinstellung für reduzierte Bewegung ignorieren.