# Blur In

A wrapper that reveals a child with blur, opacity, and a directional offset.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @framecn/blur-in
```

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { BlurIn } from "@/components/ui/blur-in";
```

```tsx
<BlurIn state="revealed">
  <YourElement />
</BlurIn>
```

Unlike most UI atoms, `BlurIn` is theme-independent: it carries no colors and has no `theme` prop. Its inputs are the motion knobs — `blur`, `direction`, and `distance`.

## Smooth transitions

The docs preview animates hidden → revealed via `useBlurInTransition`. Pass the resolved style to `BlurIn`:

```tsx
import { BlurIn } from "@/components/framecn/blur-in";
import { useBlurInTransition } from "@/components/framecn/use-blur-in-transition";

const style = useBlurInTransition(
  [
    { at: 0, state: "hidden" },
    { at: 8, state: "revealed", duration: 18 },
  ],
  { direction: "up", blur: 8, distance: 12 }
);

<BlurIn style={style}>
  <YourElement />
</BlurIn>;
```

`direction` is the way the child travels into place: `up` starts below, `down` starts above, `left` starts to the right, `right` starts to the left.

`style` takes precedence over `state` when both are provided.

## API Reference

### BlurIn

| Prop        | Type                                  | Default                             |
| ----------- | ------------------------------------- | ----------------------------------- |
| `state`     | `"hidden" \| "revealed"`              | `"hidden"`                          |
| `style`     | `BlurInStyle`                         | `-` (takes precedence over `state`) |
| `blur`      | `number`                              | `8`                                 |
| `direction` | `"up" \| "down" \| "left" \| "right"` | `"up"`                              |
| `distance`  | `number`                              | `12`                                |
| `display`   | `CSSProperties["display"]`            | `"inline-block"`                    |
| `className` | `string`                              | `-`                                 |

Wrap a single child element. The child is the content that blurs in.