UI kit reference

motion/provider

import { … } from 'zidane-ui'ui/src/motion/provider.tsx

Components#

`MotionProvider`Component#

Applies one motion policy to an app: writes the motion variables and switches on <html> and wraps the tree in motion.dev's MotionConfig, so JS and CSS animations follow the same preference. Anything but full makes transform and layout values jump.

TypeScript

function MotionProvider(props: MotionProviderProps): Element

Parameters

Parameters
Name	Type	Description
props	`MotionProviderProps`	See `MotionProviderProps`.

Returns

Element

Props

MotionProvider props
Name	Type	Description
children	`ReactNode`	The app tree to put under the motion policy.
level?	`MotionLevel`	The motion level; default: follow `html[data-motion]`.
panelMs?	`number`	The panel slider (ms): the `panel` spring's perceived duration.
springs?	`boolean`	Spring animations; default: follow `html[data-springs]`.

ui/src/motion/provider.tsx:40

Interfaces#

`MotionProviderProps`Interface#

Props of MotionProvider.

TypeScript

interface MotionProviderProps

Properties

MotionProviderProps properties
Name	Type	Description
children	`ReactNode`	The app tree to put under the motion policy.
level?	`MotionLevel`	The motion level; default: follow `html[data-motion]`.
panelMs?	`number`	The panel slider (ms): the `panel` spring's perceived duration.
springs?	`boolean`	Spring animations; default: follow `html[data-springs]`.

ui/src/motion/provider.tsx:22