fix(a11y): add prefers-reduced-motion support for all animations

Disables animations and reduces transition durations to near-zero
when the user has enabled reduced-motion in their OS settings.
Also replaces README screenshot placeholder with link to live demo.
This commit is contained in:
Nicolas Varrot
2026-02-11 21:26:08 +00:00
parent 693229c14e
commit fd66fed96f
2 changed files with 22 additions and 1 deletions

View File

@@ -12,7 +12,7 @@
**A sleek, dark-themed webchat UI for [OpenClaw](https://github.com/openclaw/openclaw) — monitor sessions, stream responses, and inspect tool calls in real-time.**
> 🖼️ *Screenshot coming soon — [contributions welcome](https://github.com/MarlBurroW/pinchchat/issues)!*
> 🎬 **[See the live demo →](https://marlburrow.github.io/pinchchat/)** — interactive preview of the UI with tool call visualization, streaming, and more.
## ✨ Features

View File

@@ -84,3 +84,24 @@ body {
.markdown-body th, .markdown-body td { border: 1px solid rgba(255,255,255,0.08); padding: 6px 12px; }
.markdown-body th { background: rgba(255,255,255,0.04); }
.markdown-body img { max-width: 100%; border-radius: 8px; }
/* Accessibility: respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
.animate-fade-in {
animation: none;
}
.pulse-dot {
animation: none;
}
.bounce-dot {
animation: none;
opacity: 0.7;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}