Use Reduced Motion
Reads the reduced-motion query and re-reads it when the setting changes, for the effects CSS cannot switch off.
prefers-reduced-motion: no-preference
printed one line at a time
Change the setting in your operating system and this updates without a reload. The hook subscribes to the query rather than reading it once.
Installation
npx shadcn@latest add @afterglow/use-reduced-motionAPI Reference
The theme already switches off every animate-* class under prefers-reduced-motion. Reach for this only for motion driven from JavaScript, which CSS cannot cover.
useReducedMotion
Returns whether the user asked for reduced motion, and re-renders if they change it. Subscribed through useSyncExternalStore, so it is a live value rather than a reading taken at mount.