[New Feature] In-app animation toggle — useMotion composable has no UI control yet #3

New issue

Open

opened 2026-03-04 09:31:23 -08:00 by pyr0ball · 0 comments

pyr0ball commented

2026-03-04 09:31:23 -08:00

Owner

Background

The useMotion composable exists and manages the cf-avocet-rich-motion localStorage key. App.vue reads this key and applies/removes the .rich-motion class on mount. However, there is no visible toggle in the UI — users cannot turn off rich animations without opening DevTools.

This matters for accessibility: users with vestibular sensitivity or sensory processing differences may find the spring animations overwhelming. prefers-reduced-motion covers OS-level preference, but an in-app toggle covers users who haven't set that.

Implementation Notes

Add a settings toggle to the label view header or a settings panel:

Label: "Rich animations & haptic feedback"
Default: ON
Storage key: cf-avocet-rich-motion (null/missing = ON; set "off" to disable)
When OFF: instant transitions, no bucket expansion animation, no haptics, no crumple/bounce
Wire to useMotion.toggle() and useHaptics accordingly

Acceptance Criteria

Toggle is visible and keyboard-operable with proper screen-reader label
Setting persists across reloads via localStorage
Disabling suppresses all spring/bounce transitions and navigator.vibrate() calls
prefers-reduced-motion is still respected independently of this toggle

## Background The `useMotion` composable exists and manages the `cf-avocet-rich-motion` localStorage key. `App.vue` reads this key and applies/removes the `.rich-motion` class on mount. However, there is no visible toggle in the UI — users cannot turn off rich animations without opening DevTools. This matters for accessibility: users with vestibular sensitivity or sensory processing differences may find the spring animations overwhelming. `prefers-reduced-motion` covers OS-level preference, but an in-app toggle covers users who haven't set that. ## Implementation Notes Add a settings toggle to the label view header or a settings panel: - Label: "Rich animations & haptic feedback" - Default: ON - Storage key: `cf-avocet-rich-motion` (null/missing = ON; set `"off"` to disable) - When OFF: instant transitions, no bucket expansion animation, no haptics, no crumple/bounce - Wire to `useMotion.toggle()` and `useHaptics` accordingly ## Acceptance Criteria - Toggle is visible and keyboard-operable with proper screen-reader label - Setting persists across reloads via localStorage - Disabling suppresses all spring/bounce transitions and `navigator.vibrate()` calls - `prefers-reduced-motion` is still respected independently of this toggle