---
title: Motion Effect
description: Motion effect component that displays the motion effect (fade in, slide in, etc.).
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="motion-effect-image-grid-demo" />

## Installation

<ComponentInstallation name="motion-effect" />

## Usage

```tsx
<MotionEffect slide>
  <p>Motion Effect</p>
</MotionEffect>
```

## Examples

### Slide

<ComponentPreview name="motion-effect-slide-demo" />

### Fade Blur

<ComponentPreview name="motion-effect-fade-blur-demo" />

## Props

<TypeTable
  type={{
    children: {
      description: 'The children of the slide in',
      type: 'React.ReactNode',
      required: true,
    },
    className: {
      description: 'The className of the slide in',
      type: 'string',
      required: false,
    },
    transition: {
      description: 'The transition of the slide in',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 200, damping: 20 }",
    },
    inView: {
      description: 'Whether the slide in is in view',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    inViewMargin: {
      description: 'The margin of the slide in when it is in view',
      type: 'string',
      required: false,
      default: '0px',
    },
    inViewOnce: {
      description: 'Whether the slide in is in view once',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    delay: {
      description: 'The delay of the slide in',
      type: 'number',
      required: false,
      default: '0',
    },
    blur: {
      description: 'The blur of the slide in',
      type: 'boolean | string',
      required: false,
      default: 'false',
    },
    slide: {
      description: 'The slide of the slide in',
      type: "boolean | { direction?: 'up' | 'down' | 'left' | 'right'; offset?: number }",
      required: false,
      default: 'false',
    },
    fade: {
      description: 'The fade of the slide in',
      type: 'boolean | { initialOpacity?: number; opacity?: number }',
      required: false,
      default: 'false',
    },
    zoom: {
      description: 'The zoom of the slide in',
      type: 'boolean | { initialScale?: number; scale?: number }',
      required: false,
      default: 'false',
    },
  }}
/>

## Credits

- Credits to [Magic UI](https://magicui.design/docs/components/blur-fade) for the inspiration