# Blur Fade

Blur fade in and out animation. Used to smoothly fade in and out content.

## Installation

CLI Manual

``` 
```

## Examples

Preview Code

[Open in](https://v0.dev/chat/api/open?url=https://magicui.design/r/blur-fade-text-demo.json)

components/ui/blur-fade-text-demo.tsx

``` 
```

## Usage

``` 
```

## Props

| Prop       | Type                | Default | Description                                              |
|------------|---------------------|---------|----------------------------------------------------------|
| `children` | `React.ReactNode`   | `-`     | The content to be animated                              |
| `className`| `string`            | `-`     | The class name to be applied to the component           |
| `variant`  | `object`            | `-`     | Custom animation variants for motion component           |
| `duration` | `number`            | `0.4`   | Duration (seconds) for the animation                     |
| `delay`    | `number`            | `0`     | Delay (seconds) before the animation starts              |
| `offset`   | `number`            | `6`     | Offset for the animation                                 |
| `direction`| `string`            | `"down"` | Direction for the animation (`up`, `down`, `left`, `right`) |
| `inView`   | `boolean`           | `false` | Whether to trigger animation when component is in view   |
| `inViewMargin` | `MarginType`   | `"-50px"` | Margin for triggering the in-view animation              |
| `blur`     | `string`            | `"6px"` | Amount of blur to apply during the animation              |