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

## Import

```js
import { MotionBox } from '@gemini-suite/vera-react';
```

## Examples

### Basic

Internally, the [Box component](/components/layout/box) 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: -100, right: 100 }}
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
/>
```