034 / Warten · Animation

Warten.

Vier Mini-Animationen für den STATE: IDLE aus 009-Karte. Live laufende Demo + Spec für Ermira und Erik. Ground von Creme auf Cool-Gray umgezogen — Natalyas Vorgabe.
Natalya (29. Apr): „… und gerne eine Mini Animation fürs 'Warten' /designs/009-karte.html" — Vier Lesarten unten, alle leicht zu implementieren (CSS-Keyframes oder UIView/SwiftUI .repeatForever). Markenton: ruhig, nicht hektisch. Loop-Dauer ≥ 2 s.
A–D Vier Studien

Mini-Animationen — Live

Alle vier laufen oben in echt. Spec unten je Studie. Empfehlung am Ende der Seite.
A
Pulse-Ring
Original aus 009 — Punkt mit weichem expandierenden Schatten. Bekannt, ruhig, „Atemzug".
9:42●●● ▲ ▤
Stellantis · 2FA⚙
Status

Warte auf
Auftrag.

Es liegt aktuell kein Auftrag zur Freigabe vor.

KontoStellantis
Geräte02
Loop
2 400 ms · ease-in-out
Schatten
0 → 28 px · α .4 → 0
Skala
1.00 → 1.05
Punkt
14 px · #243782
B
Breath-Card
Die ganze Karte atmet sehr leise — kaum sichtbarer Box-Shadow, Punkt skaliert subtil. Leiseste Lesart.
9:42●●● ▲ ▤
Stellantis · 2FA⚙
Status

Warte auf
Auftrag.

Es liegt aktuell kein Auftrag zur Freigabe vor.

KontoStellantis
Geräte02
Loop
4 200 ms · ease-in-out
Karte
shadow 0 → 6 px · α 0 → .045
Punkt
scale 1 → 1.5 · α 1 → .55
Effekt
fast unsichtbar · sehr ruhig
C
Drei Punkte
Klassisches „typing"-Pattern. Drei Punkte hüpfen sequenziell. Sehr lesbar, vielleicht zu „App-typisch".
9:42●●● ▲ ▤
Stellantis · 2FA⚙
Status

Warte auf
Auftrag.

Es liegt aktuell kein Auftrag zur Freigabe vor.

KontoStellantis
Geräte02
Loop
1 400 ms · ease-in-out
Punkte
3 × 10 px · stagger 150 ms
Hüpfer
−8 px · α .25 → 1
Risiko
generisch · „App-typisch"
D
Umrandungs-Ring
Eine Konturlinie wandert um die ganze Karte. Indirekter, eleganter Hinweis — Karte selbst „arbeitet".
9:42●●● ▲ ▤
Stellantis · 2FA⚙
Status

Warte auf
Auftrag.

Es liegt aktuell kein Auftrag zur Freigabe vor.

KontoStellantis
Geräte02
Loop
3 200 ms · linear · rotate
Linie
1.4 px · 60° Bogen
Tech
conic-gradient + mask
Risiko
Webkit-Mask Fallback nötig

Empfehlung für Ermira & Erik

Studie A (Pulse-Ring) ist die sicherste Wahl: bereits in 009 vorhanden, plattformübergreifend simpel (CSS / SwiftUI / Compose), und am ruhigsten zur Markenstimme „So leicht geht Entspannung". Studie D (Umrandungs-Ring) als Alternative, wenn der Punkt zu wenig Präsenz hat — fühlt sich premium an, kostet aber mehr Implementierungs­arbeit.