# Motion Box
> Lower level component that wraps an actual Box component turning it into a motion component.

## Import

```js
import { MotionBox } from '@volue/wave-react';
```

## Examples

### Basic

Internally, the [Box component](https://next.wave-design-system.pages.dev/components/layout/box.md) is wrapped with the `motion()` function, giving you access to all motion props (like `animate`) from [Motion](https://motion.dev/).

```jsx
<MotionBox
  css={{
    backgroundColor: '$backgroundAccentBold',
    width: '4rem',
    height: '4rem'
  }}
  drag="x"
  dragConstraints={{ left: -40, right: 100 }}
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
/>
```