From fd66fed96f5497aa7ac606b7216bd8540ae7eac6 Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Wed, 11 Feb 2026 21:26:08 +0000
Subject: [PATCH] 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.
---
 README.md     |  2 +-
 src/index.css | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 07328fa..c1ab389 100644
--- a/README.md
+++ b/README.md
@@ -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
 
diff --git a/src/index.css b/src/index.css
index 53fa304..465c88e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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;
+  }
+}