Accessibility-aware controls to reduce or disable particle animation for users who prefer reduced motion.
Respects the prefers-reduced-motion media query.
| Key | Type | Default | Notes |
|---|---|---|---|
disable |
boolean |
false |
Completely stops all animation for prefers-reduced-motion users |
reduce.value |
boolean |
true |
Reduces (but does not stop) animation instead of disabling it |
reduce.factor |
number |
4 |
Higher values = more aggressive reduction |
When true, no animation runs at all for users with prefers-reduced-motion: reduce.
{
"motion": {
"disable": true
}
}
When disable is false, the reduce option slows down motion proportionally instead of stopping it entirely.
factor is applied inversely — a higher value produces a stronger slowdown.
{
"motion": {
"disable": false,
"reduce": {
"value": true,
"factor": 4
}
}
}
Use reduce for most cases to keep a subtle animation alive while respecting accessibility. Use disable only when any animation would be disorienting.
{
"motion": {
"disable": false,
"reduce": {
"value": true,
"factor": 10
}
}
}
motion entirely — prefers-reduced-motion users may experience discomfort with fast animationsreduce.factor too low (e.g. 1) — has no visible effect on motion speed