# motion/provider (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/motion/provider.tsx](https://github.com/Tahul/zidane/blob/main/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.

```ts
function MotionProvider(props: MotionProviderProps): Element
```

**Parameters**

- `props` (`MotionProviderProps`): See [`MotionProviderProps`](https://zidane.si/docs/reference/ui-motion-provider.md#MotionProviderProps).

**Returns** `Element`

**Props**

- `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]`.

Source: [ui/src/motion/provider.tsx:40](https://github.com/Tahul/zidane/blob/main/ui/src/motion/provider.tsx#L40)

## Interfaces

### `MotionProviderProps`

Interface.

Props of [`MotionProvider`](https://zidane.si/docs/reference/ui-motion-provider.md#MotionProvider).

```ts
interface MotionProviderProps
```

**Properties**

- `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]`.

Source: [ui/src/motion/provider.tsx:22](https://github.com/Tahul/zidane/blob/main/ui/src/motion/provider.tsx#L22)