René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Add a \"Reduce motion\" accessibility setting to Appearance","articleBody":"## Problem or Motivation\n\nOpenWork animates heavily — the transcript, session list, dropdowns, toasts, the\npet, and the empty-composer entrance all use `motion/react` (framer-motion)\n`motion` / `AnimatePresence` transitions. There is currently **no way to turn\nthese down**. Users who are sensitive to motion (vestibular disorders,\nphotosensitivity) or who simply prefer a calmer, snappier UI have no control:\nthe app never consults the OS \"reduce motion\" preference and offers no in-app\ntoggle.\n\nComparable desktop apps ship exactly this. Claude's desktop app, macOS, and\nWindows all expose a **Reduce motion / reduce animations** accessibility control,\nand the web platform standardizes it as `prefers-reduced-motion`. OpenWork's\nAppearance settings already cover theme mode, color theme, font, language, pet,\nand \"rich tool descriptions\" — an accessibility motion control is the conspicuous\ngap.\n\n## Proposed Solution\n\nAdd a **\"Reduce motion\"** toggle to **Settings → Appearance → Interface** (next to\n\"Rich tool descriptions\"). When enabled it:\n\n- Forces `motion/react` to short-circuit all `motion` component animations\n  app-wide by rendering the app inside `\u003cMotionConfig reducedMotion=\"always\"\u003e`\n  (when off, `reducedMotion=\"user\"` so the OS `prefers-reduced-motion` setting is\n  still respected — a strictly better default than today's \"always animate\").\n- Sets `data-reduce-motion=\"true\"` on `\u003chtml\u003e`, and a global CSS rule collapses\n  CSS animations/transitions (`animation-duration`/`transition-duration` →\n  ~0ms) so non-`motion` CSS effects are covered too.\n- Persists the choice in the renderer's `localStorage` (the same\n  `lib/local-storage.ts` mechanism used by other renderer UI prefs like\n  `showConnectionIcons`), so it survives restarts.\n\n## Feasibility\n\n**Classification: pure frontend — candidate.** No qwen-code backend involvement.\n\n- `motion` is already a dependency (`apps/electron` + `packages/ui`); `MotionConfig`\n  propagates through React context to every `motion` component in the tree,\n  including those in `packages/ui`, so wrapping once at the renderer root\n  (`main.tsx`'s `Root`) covers the whole app.\n- Persistence reuses the existing `lib/local-storage.ts` `KEYS`/`get`/`set` helper\n  — no new IPC, no `config.json`, no main-process change beyond the renderer.\n- The toggle reuses the existing `SettingsToggle` component and Appearance page\n  structure. Reuses `settings.appearance.interface` section heading; two new i18n\n  keys (`settings.appearance.reduceMotion` / `...Desc`) added to all 7 locales.\n\n## Alternatives Considered\n\n- **Respect only the OS `prefers-reduced-motion`** (no in-app toggle): better than\n  nothing, but users often want reduced motion in one app without changing an\n  OS-wide setting. The proposed default already honors the OS value and adds an\n  explicit override on top.\n- **A per-animation opt-out**: far more invasive and easy to miss spots; a single\n  root-level `MotionConfig` + CSS guard is the standard, comprehensive approach.\n\n## Additional Context\n\n### Acceptance criteria (CDP e2e assertion)\n\nA new `e2e/assertions/reduce-motion.assert.ts` drives the real built app over CDP\nentirely in the draft/no-session state (no seeded conversation, no backend\nconnection needed — it only touches Settings):\n\n1. Open **Settings → Appearance** from the sidebar; the **Reduce motion** toggle\n   renders and is initially **off** (`aria-checked=\"false\"`), and `\u003chtml\u003e` has **no**\n   `data-reduce-motion` attribute.\n2. Click the toggle → it flips to `aria-checked=\"true\"`, `\u003chtml\u003e` gains\n   `data-reduce-motion=\"true\"`, **and** the `localStorage` key\n   (`craft-reduce-motion`) is persisted as `true` — proving the toggle actually\n   applies and persists the preference, not merely renders.\n3. Click again → the toggle returns to `aria-checked=\"false\"`, the `\u003chtml\u003e`\n   attribute is removed, and the persisted value is `false`.\n\nPart of the autonomous desktop-feature loop (`loop-bot`).","author":{"url":"https://github.com/DragonnZhang","@type":"Person","name":"DragonnZhang"},"datePublished":"2026-07-03T13:25:38.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/50/openwork/issues/50"}