useReducedMotion

Returns whether the browser prefers reduced motion. This can be used to disable or pause any animations deemed to flashy.
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 
import { useReducedMotion } from '@infinityfx/lively/hooks';

export default function Page() {

    const prefersReducedMotion = useReducedMotion();

    return <Animatable paused={prefersReducedMotion} animate={{ rotate: ['0deg', '360deg'], repeat: Infinity, easing: 'linear' }} triggers={[{ on: 'mount' }]}>
        <div style={{
            width: 100,
            height: 100,
            borderRadius: 8,
            backgroundColor: 'var(--clr-accent)'
        }} />
    </Animatable>;
}

Call signature

1 
const prefersReducedMotion = useReducedMotion()

Returns

prefersReducedMotion boolean