How to make Storybook Interactions respect user motion preferences

This post details the development of a custom Storybook addon to respect the `prefers-reduced-motion` CSS media feature. It introduces a toggle button in the Storybook toolbar that uses `window.localStorage` to store user preferences. The addon checks for the `prefers-reduced-motion` setting on initial load and defaults interactions to off if the preference is not set. A `shouldInteractionPlay` function is provided to conditionally enable interactions in story play functions. The implementation involves creating a new addon, registering it in the manager.ts file, and adding the conditional logic to story play functions.