040 / PIN-Validation · Animation

PIN-Validation.

Drei Mini-Animationen für die Live-Validierung beim PIN-Eingeben. Tipp-Verlauf, Shake-on-Reject, Continue. Alles in Natalyas Wireframe-Sprache.
Treue zur Vorlage: Eingabefeld 1.5 px schwarzer Rand, „Verbergen" inline, Validierungs-Liste mit ✗/✓-Wechsel (bold ↔ regular), Weiter-Button grau bis alle Regeln grün — dann schwarz aktiv. Direkt aus Wireframe „21 Einrichten Neue PIN eingeben falsch".
A–C Drei Studien

Live-Validation — Animationen

Alle laufen oben in echt. CSS-only — keine JavaScript-Abhängigkeit für die Demo.
A
Live-Tippen
Eingabe wächst, Regeln wechseln in Echtzeit ✗ → ✓, Button schaltet auf aktiv.
47 px Safe Top

Neue PIN eingeben

Diese PIN wird künftig in Verbindung mit Ihrer Kundennummer benötigt. Bitte bewahren Sie sie sorgfältig auf.

725634 Verbergen
6–8 Ziffern lang
Keine einfachen Folgen (1234)
Keine gleichen Ziffern (1111)
Keine wiederholenden Muster
34 px Safe Bot.
Loop
8 000 ms · linear
Input
per-Ziffer opacity stagger 150 ms
Rule-Wechsel
0.3 s ease bei jedem Charakter
Button
fade #C8C8C8 → ink bei 32%
B
Shake bei Reject
User tippt Weiter mit unzureichender PIN — Eingabefeld zittert, Längen-Regel blitzt kurz auf.
47 px Safe Top

Neue PIN eingeben

Diese PIN wird künftig in Verbindung mit Ihrer Kundennummer benötigt. Bitte bewahren Sie sie sorgfältig auf.

725 Verbergen
6–8 Ziffern lang
Keine einfachen Folgen (1234)
Keine gleichen Ziffern (1111)
Keine wiederholenden Muster
34 px Safe Bot.
Loop
6 000 ms · linear
Shake
±5/3 px · 4 Frames · 400 ms
Rule-Flash
scale 1 → 1.08 · 200 ms
Button
tap visualisiert (#888 für 60 ms)
C
Weiter geht's
Alles grün, Button schwarz. Tap → kurzer Press-State → Slide-Out (next screen kommt).
47 px Safe Top

Neue PIN eingeben

Diese PIN wird künftig in Verbindung mit Ihrer Kundennummer benötigt. Bitte bewahren Sie sie sorgfältig auf.

725634 Verbergen
6–8 Ziffern lang
Keine einfachen Folgen (1234)
Keine gleichen Ziffern (1111)
Keine wiederholenden Muster
34 px Safe Bot.
Loop
5 000 ms · linear
Press
scale 1 → .96 + #444 · 100 ms
Slide-Out
translateX 0 → −30 px · opacity 1 → 0 · 500 ms