Motion Toggle
Let visitors pause site animations and remember their choice. The hook shares that preference with your components.
- Dependencies
- No extra packages
- Size
- 175 lines
- Controls
- 5 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/motion-toggle.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/motion-toggle.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the motion-toggle.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| storageKey | string | "onycx-motion" | localStorage key holding "on" or "off". |
| label | string | "Motion" | Visible word before "on" / "off". |
| position | "inline" | "fixed-bottom-left" | "fixed-bottom-right" | "fixed-bottom-right" | Pinned to a bottom corner like the original, or inline in your layout. |
| tone | "dark" | "light" | "dark" | Dark is the original surface; light is a #eeede7 variant. |
| accent | string | "#ff4d27" | Hover border and focus ring. |
| onChange | (motion: boolean) => void | — | Called with the effective preference whenever it changes. |
| useMotionPreference(storageKey?) | () => boolean | — | Exported hook: false under OS reduced motion or after the visitor turns motion off. |