pyr0ball opened issue Circuit-Forge/avocet#3

pyr0ball
Wed, 04 Mar 2026 09:31:23 -0800

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

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