Animation
Sketch strokes draw themselves in on mount. Interactions re-ink with a second seed. Everything is on by default and opt-out.
Defaults
Wrap the tree once. Per-component animate wins when it is set. prefers-reduced-motion: reduce disables animation unless the provider sets forceAnimate.
import { DoodleUIProvider, Button, Card } from "doodleui-react";
<DoodleUIProvider>
<Button>Draws in</Button>
<Card animate={false}>Static sketch</Card>
</DoodleUIProvider>
<DoodleUIProvider animate={false}>
<Button>Static unless you pass animate</Button>
<Button animate>Forced on</Button>
</DoodleUIProvider>
Toggle animate on any component playground to compare the animated sketch with the instant one.
Reduced Motion Support
The library automatically respects the OS accessibility setting prefers-reduced-motion: reduce. When that media query matches, sketch animations are skipped unless you intentionally override them with forceAnimate.
What changes when reduced motion is active
| Behavior | Normal | Reduced motion | | --- | --- | --- | | Border / fill draw-in | Dash-offset sketch (~180–400ms) | Instant final stroke | | Seed morph / wobble (hover, focus, toggle) | Re-inks with a new seed | Skipped — same seed, no transition | | Checkbox checkmark / Radio dot | Path draws in | Appears immediately | | Switch thumb | Spring slide | Instant position | | Modal / Dialog / Sheet / Drawer | Backdrop fade + panel enter/exit | Instant open/close | | Toast | Slide-in + settle wobble | Instant appear / disappear | | Spinner | Continuous rotate | Static arc |
State changes (checked, open, selected) still update immediately — only the visual motion is removed. Screen readers announce the new state without waiting on animation.
How to test it
Turn on Reduce Motion in your OS, then reload the docs (or any app using doodleui-react):
- macOS: System Settings → Accessibility → Display → Reduce motion
- Windows: Settings → Accessibility → Visual effects → Animation effects (off)
- iOS / iPadOS: Settings → Accessibility → Motion → Reduce Motion
- Android: Settings → Accessibility → Remove animations (wording varies by OEM)
You can also emulate it in Chrome DevTools: Rendering → Emulate CSS media feature prefers-reduced-motion: reduce.
Component playgrounds show a note when your browser currently has reduced motion enabled, so you can confirm the setting is active without leaving the page.
forceAnimate escape hatch
forceAnimate on DoodleUIProvider re-enables sketch motion even when the user prefers reduced motion. Use it only for intentional demos or edge cases — not as the default for production UIs.
// Prefer the default: honor the user's OS setting
<DoodleUIProvider>
<Button>Respects reduced motion</Button>
</DoodleUIProvider>
// Escape hatch — only when you explicitly need motion despite the OS setting
<DoodleUIProvider forceAnimate>
<Button>Animates even with Reduce Motion on</Button>
</DoodleUIProvider>
Per-component animate={false} still wins and forces a static sketch. animate alone cannot override reduced motion; only forceAnimate can.
Components
- Button — border draw-in on mount; seed-morph on hover
- Card — border draw-in on mount
- Badge — border draw-in on mount
- Alert — border draw-in on mount (~200ms)
- Divider — line extends across its length
- Table — row rules draw in on mount, staggered
- Input / Textarea — border draw-in; seed-morph on focus
- Checkbox — box draw-in; checkmark path draws on check
- Radio — ring draw-in; dot scales and draws on select
- Progress — track draw-in; fill width and roughness redraw on value
- Tooltip — bubble draw-in (~180ms)
- Select — trigger draw-in; popover border draws on open
- Tabs — active underline draw-in; redraws and slides on change
- Modal — panel border draw-in; backdrop fade and panel enter/exit
- Switch — track draw-in; thumb spring and track seed-morph
- Toast — border draw-in; slide and settle wobble, reverse on exit
Set animate={false} (or wrap in DoodleUIProvider animate={false}) to render the final sketch immediately, with no dash leftover and no motion.