Animierte Mini-Richtungen

Drei Animationsspuren zu den ersten drei Richtungen aus 032. Linke Spalte: Hero-Loop mit allen drei Zuständen. Mitte: Storyboard-Frames. Rechts: Implementierungs-Spezifikation für Ermira und Erik.

Natalya (29. Apr): „Dann gerne eine mini Animation für diese Screens (die ersten 3)… Die Animationsbeispiele brauche ich für Ermira und Erik." — Loop: Warten 0–35 % → Erfolg 40–50 % → Warten 55–85 % → Fehler 90–100 %. Jeder Zyklus dauert 8 s.

00 Referenz · Licht

Stephies Original — Lavendel · Limette · Flieder

Hellgrund, atmender Ring, Pop für Erfolg, Shake für Fehler. Die ruhigste Lesart — gut für Tag-Modus.

Bitte warten …

Auftrag erfolgreich

Auftrag fehlgeschlagen

Hero-Loop · 8 sWarten → Erfolg → Warten → Fehler

Warten Erfolg Fehler

0.0 s

Warten

1.1 s

Atmen

2.2 s

Atmen ↑

3.0 s

Wechsel

3.3 s

Pop

3.6 s

Erfolg

7.2 s

Shake

Spec · Referenz

Cycle: 8 000 ms · linear · loop
Wait: scale 1 → .94 · 2 200 ms ease-in-out
Success: scale .4 → 1.15 → 1 · 550 ms cubic-bezier(.2,.9,.3,1.4)
Error: translateX ±6/±4/0 · 4 keyframes · 550 ms ease-out
BG-Wait: #DEE4FA
BG-OK: #D7EF5A
BG-Err: #C8CDF4

.ring.wait { animation: breathe 2.2s ease-in-out infinite; }

01 Neon · Leuchten

Neon-Halo — leuchtender Akzent auf Schwarz

Glow-Box-Shadow als Bedeutung. Die Wait-Animation lässt das Glühen pulsen, Success blitzt kurz auf doppelter Helligkeit, Error blinkt zweimal scharf.

Bitte warten …

Auftrag erfolgreich

Auftrag fehlgeschlagen

Hero-Loop · 8 sGlow pulsiert · Pop · Blink-Shake

Warten Erfolg Fehler

0.0 s

Glow voll

1.1 s

Glow ab

2.2 s

Glow auf

3.0 s

Hue-Shift

3.3 s

Blitz

3.6 s

Halten

7.2 s

Blink-Shake

Spec · Neon

Cycle: 8 000 ms · linear · loop
Wait: opacity 1 ↔ .6 + box-shadow blur 14 ↔ 38 px · 2 200 ms
Success: shadow blur 14 → 60 → 38 px · pop ring 550 ms
Error: shake + opacity 1 ↔ 0 (3×) · 600 ms
BG: #06070D
Hues: #7C89FF · #B8E621 · #A5B0FF

box-shadow: 0 0 0 1px currentColor, 0 0 14px currentColor, 0 0 38px currentColor;

02 Aurora · Farbverlauf

Aurora — atmosphärischer Verlauf, der wandert

Der radiale Gradient bewegt sich langsam (background-position-Drift), Ring breathes leise. Success: Gradient wird kurz heller. Error: Gradient kühlt ab.

Bitte warten …

Auftrag erfolgreich

Auftrag fehlgeschlagen

Hero-Loop · 8 sAurora-Drift · Helligkeits-Lift · Cool-Down

Warten Erfolg Fehler

0.0 s

Indigo-Bad

1.5 s

Drift

3.0 s

Drift ←

3.2 s

Wechsel

3.5 s

Lift

4.0 s

Halten

7.2 s

Cool-Down

Spec · Aurora

Cycle: 8 000 ms · linear · loop
Wait: background-position drift 0% → 12% → 0% · 6 000 ms
Success: filter:brightness 1 → 1.2 → 1 · 700 ms
Error: filter:brightness .7 saturate .7 · 600 ms ease-in
BG-Wait: radial Indigo → Nachtblau
BG-OK: radial Limette → Tiefoliv
BG-Err: radial Flieder → Pflaume

background-position: var(--drift-x) 0; animation: drift 6s ease infinite;

Implementierungs-Hinweis für die Devs: Der Hero-Loop oben ist in CSS-only umgesetzt — drei absolut positionierte State-Layer mit versetzten animation-Keyframes (8 s linear infinite). In React/SwiftUI ist das gleiche Schema einfacher als State-Maschine mit drei Frames (idle · success · error) und getriggerten Übergängen statt Loop. Den Loop hier nur als visuelle Spezifikation lesen.