fix(a11y): reduced-motion for spinner/call-avatar; tap-to-skip boot; AA accent contrast

- SendingSpinClass and CallAvatarAnimation respect prefers-reduced-motion
  (static opacity fallback), matching MsgAppearClass.
- Terminal boot overlay dismisses on click/tap and is aria-hidden.
- Primary.Main: Midnight #6b7ca8 -> #6f80aa (4.29 -> 4.51:1), Lotus
  Terminal Light #c44e00 -> #ba4a00 (4.14 -> 4.52:1), hue preserved.

Fixes #84
Fixes #86
Fixes #52

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
This commit is contained in:
2026-09-12 20:28:41 -04:00
co-authored by Claude Opus 5
parent 2e14980de6
commit 7aba71490a
3 changed files with 40 additions and 9 deletions
+28 -7
View File
@@ -36,25 +36,46 @@ const glowPulse = keyframes({
},
});
// Wobble/glow/spin only run under the same no-preference guard as
// MsgAppearClass below; prefers-reduced-motion users get a static state.
export const WobbleAnimation = style({
animation: `${wobble} 2000ms ease-in-out`,
animationIterationCount: 'infinite',
'@media': {
'(prefers-reduced-motion: no-preference)': {
animation: `${wobble} 2000ms ease-in-out`,
animationIterationCount: 'infinite',
},
},
});
export const GlowAnimation = style({
animation: `${glowPulse} 2000ms ease-out`,
animationIterationCount: 'infinite',
'@media': {
'(prefers-reduced-motion: no-preference)': {
animation: `${glowPulse} 2000ms ease-out`,
animationIterationCount: 'infinite',
},
},
});
export const CallAvatarAnimation = style({
animation: `${wobble} 2000ms ease-in-out, ${glowPulse} 2000ms ease-out`,
animationIterationCount: 'infinite',
'@media': {
'(prefers-reduced-motion: no-preference)': {
animation: `${wobble} 2000ms ease-in-out, ${glowPulse} 2000ms ease-out`,
animationIterationCount: 'infinite',
},
},
});
export const SendingSpinClass = style({
display: 'inline-block',
animation: `${spin} 900ms linear infinite`,
transformOrigin: 'center',
// Static fallback: dim instead of spinning when motion is reduced.
opacity: 0.6,
'@media': {
'(prefers-reduced-motion: no-preference)': {
animation: `${spin} 900ms linear infinite`,
opacity: 1,
},
},
});
const msgAppearKeyframe = keyframes({