feat(style): Motion-Fundament (reduced-motion + Tokens) + Wow-Polish#162
Merged
Conversation
Aus /dev:tool-style-Research (SOTA-Dashboard-Design + AI-Anti-Pattern): Gate A — prefers-reduced-motion-Guard (global, style.css): neutralisiert alle Animationen/Transitions. WCAG 2.3.3 — fehlte projektweit komplett. Gate B — Motion-Tokens in :root: --dur-fast/base/slow, --ease-out/-spring; analog zum bestehenden Spacing-/Typo-Token-System (Timings waren verstreut). C — Neuer Wow: gestaffelte Karten-Entrance (card-in keyframe, nth-child-Delay, CSS-only, backwards). Reduced-Motion via Gate A automatisch neutralisiert. D — Hero-Ring (dashboard-hero.js): bestehende rAF-Animation auf cubic-ease-out umgestellt (vorher linear) + expliziter matchMedia-Guard — CSS-Gate greift bei JS-getriebenem setAttribute nicht, daher Endzustand bei reduce sofort setzen. Bewusst ausgeklammert: Chart.js animation:false (Bestandsentscheidung), opake Karten (kein Glassmorphism). Skeleton-Screens = separater Folge-PR. Verifiziert: 188/188 JS-Tests, Biome clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
gerfru
added a commit
that referenced
this pull request
Jun 8, 2026
…ft) (#163) Dritter Styling-Review-Schritt (nach #161 Audit, #162 Motion). Ersetzt den "blank-then-pop"-Flash: #bento-hero zeigte <p>Lade…</p> (kollabiert) und expandierte schlagartig — echter Layout-Shift. - Skeleton-Primitive in style.css (.skeleton, .skel-box/-circle/-line/-tile) mit Pulse; nutzt --surface-2/--radius-sm (theme-aware gratis). - Hero- + Aktivitäten-Skeleton im Template spiegeln das finale Layout über dieselben .hero-grid-Klassen → null Shift (NN/g). Ersetzt automatisch beim ersten buildHeroCard()/renderActivitiesTable() (innerHTML-Overwrite), kein JS. - 300-ms-Regel CSS-only: .skeleton opacity:0 + animation-delay:300ms → bei schnellem fetch kein Flash. Reduced-Motion via Gate A (#162) automatisch; Platzhalter aria-hidden. - Chart-Karten bewusst ausgenommen (.chart-wrap reserviert Höhe, kein Shift). Tests: deterministischer pytest-Template-Test (test_pages.py). Doku: design-decisions.md um Motion (#162 nachgeholt) + Skeleton-Abschnitt erweitert. Verifiziert: pytest 27/27, JS 188/188. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
gerfru
added a commit
that referenced
this pull request
Jun 12, 2026
…162) Aus /dev:tool-style-Research (SOTA-Dashboard-Design + AI-Anti-Pattern): Gate A — prefers-reduced-motion-Guard (global, style.css): neutralisiert alle Animationen/Transitions. WCAG 2.3.3 — fehlte projektweit komplett. Gate B — Motion-Tokens in :root: --dur-fast/base/slow, --ease-out/-spring; analog zum bestehenden Spacing-/Typo-Token-System (Timings waren verstreut). C — Neuer Wow: gestaffelte Karten-Entrance (card-in keyframe, nth-child-Delay, CSS-only, backwards). Reduced-Motion via Gate A automatisch neutralisiert. D — Hero-Ring (dashboard-hero.js): bestehende rAF-Animation auf cubic-ease-out umgestellt (vorher linear) + expliziter matchMedia-Guard — CSS-Gate greift bei JS-getriebenem setAttribute nicht, daher Endzustand bei reduce sofort setzen. Bewusst ausgeklammert: Chart.js animation:false (Bestandsentscheidung), opake Karten (kein Glassmorphism). Skeleton-Screens = separater Folge-PR. Verifiziert: 188/188 JS-Tests, Biome clean. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
gerfru
added a commit
that referenced
this pull request
Jun 12, 2026
…ft) (#163) Dritter Styling-Review-Schritt (nach #161 Audit, #162 Motion). Ersetzt den "blank-then-pop"-Flash: #bento-hero zeigte <p>Lade…</p> (kollabiert) und expandierte schlagartig — echter Layout-Shift. - Skeleton-Primitive in style.css (.skeleton, .skel-box/-circle/-line/-tile) mit Pulse; nutzt --surface-2/--radius-sm (theme-aware gratis). - Hero- + Aktivitäten-Skeleton im Template spiegeln das finale Layout über dieselben .hero-grid-Klassen → null Shift (NN/g). Ersetzt automatisch beim ersten buildHeroCard()/renderActivitiesTable() (innerHTML-Overwrite), kein JS. - 300-ms-Regel CSS-only: .skeleton opacity:0 + animation-delay:300ms → bei schnellem fetch kein Flash. Reduced-Motion via Gate A (#162) automatisch; Platzhalter aria-hidden. - Chart-Karten bewusst ausgenommen (.chart-wrap reserviert Höhe, kein Shift). Tests: deterministischer pytest-Template-Test (test_pages.py). Doku: design-decisions.md um Motion (#162 nachgeholt) + Skeleton-Abschnitt erweitert. Verifiziert: pytest 27/27, JS 188/188. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This was referenced Jun 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Kontext
Ergebnis des
/dev:tool-style-Research (State-of-the-Art Dashboard-Design 2026 + AI-Anti-Pattern „Skeleton/Slop"). Befund: PulseBase hat bereits einen guten Wow-Moment (animierter Hero-Readiness-Ring), aber zwei Motion-Fundament-Lücken + Politur-Potenzial. Dieser PR legt das Fundament, macht den bestehenden Ring korrekt + premium und fügt einen dezenten neuen Wow hinzu — alles striktprefers-reduced-motion-sicher, im bestehenden Token-/CSS-Stil (kein Framework, kein Build-Step, CSP-konform).Änderungen
🚪 Gate A —
prefers-reduced-motion-Guard (global)Fehlte projektweit komplett. Globaler
@media-Override neutralisiert alle Animationen/Transitions (WCAG 2.3.3) — relevant für eine Gesundheits-App (Trust). Betrifft nur Bewegung, nicht Fokus-Outlines.🚪 Gate B — Motion-Tokens
Timings waren verstreut (
.1s….4s). Neue:root-Tokens--dur-fast/base/slow,--ease-out,--ease-spring— analog zum bestehenden Spacing-/Typo-Token-System. (Migration alter Timings bewusst nicht Teil dieses PRs.)✨ C — Neuer Wow: gestaffelte Karten-Entrance
card-in-Keyframe (opacity + translateY 8px),nth-child-Stagger (0/40/80/120 ms), CSS-only,backwards. Durch Gate A bei Reduced-Motion automatisch neutralisiert.🎯 D — Hero-Ring: Easing + Korrektheit
Bestehende rAF-Animation (dashboard-hero.js) von linear → cubic-ease-out (premium-Feel) + expliziter
matchMedia-Guard: das CSS-Gate greift bei JS-getriebenemsetAttributenicht, daher wird bei Reduced-Motion der Endzustand sofort gesetzt (kein Hochzählen/Draw-in).Bewusst ausgeklammert (respektierte Bestandsentscheidungen)
animation: falsebleibt unangetastetVerifikation
npm test— 188/188 JS-Tests grünjs-lint-Gate) cleanmake tailwind-buildnötig (keine neuen Tailwind-Utilities)🤖 Generated with Claude Code