Skip to content
zidane
UI kit reference

motion/reduced

import { … } from 'zidane-ui'ui/src/motion/reduced.ts

Functions#

useMotionLevelFunction#

Returns the current MotionLevel, read from html[data-motion]. It updates when the attribute changes and is full when the attribute is missing or on the server.

TypeScript
function useMotionLevel(): MotionLevel

ui/src/motion/reduced.ts:29

useReducedMotionFunction#

True for off and reduced: skip decorative JS-driven animation.

TypeScript
function useReducedMotion(): boolean

Returns

boolean

ui/src/motion/reduced.ts:34

Types#

MotionLevelType#

How much the UI animates: off is instant, reduced keeps only fades, full plays all motion.

TypeScript
type MotionLevel = 'off' | 'reduced' | 'full'

ui/src/motion/reduced.ts:12