Foundations
Motion Provider
Manages how much motion plays: full, minimal, none, or auto. The resolved tier lands on the data-motion attribute of <html>, and OS reduced-motion settings are honored automatically.
ReactVue
View in Storybook Playground
Props
| Name | Type | Default | Description |
|---|---|---|---|
children required | ReactNode | — | |
defaultPreference | MotionPreference | — | Initial preference before any stored value is read. Default: `'auto'`. |
enablePersistence | boolean | — | Persist the user's choice to localStorage. Default: true. |
storageKey | string | — | localStorage key. Default: `lily-motion`. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.