# Blur Out Up
URL: https://remocn.dev/docs/typography/blur-out-up

Words arrive clean and depart upward with increasing blur for airy exits

- Install: `npx shadcn@latest add @remocn/blur-out-up`
- Vibe: premium
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/blur-out-up
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BlurOutUp } from "@/components/remocn/blur-out-up";

const BlurOutUpScene = () => (
  <BlurOutUp text="Clear in, airy out." staggerDelay={1} />
);

export const RemotionRoot = () => (
  <Composition
    id="BlurOutUp"
    component={BlurOutUpScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Each word fades and slides in cleanly, holds steady in the middle of the composition, then drifts upward with increasing blur near the end—so the duration should leave room for the exit animation.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { BlurOutUp } from "@/components/remocn/blur-out-up";
import { Backdrop } from "@/components/remocn/backdrop";

const BlurOutUpScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <BlurOutUp text="Clear in, airy out." staggerDelay={1} />
  </Backdrop>
);

export const RemotionRoot = () => (
  <Composition
    id="BlurOutUp"
    component={BlurOutUpScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `staggerDelay` | `number` | `1` | Per-word delay in frames for both the enter and exit phases |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A title or tagline needs a graceful upward exit before the next scene cuts in.
- The scene calls for an airy, editorial tone — text that drifts rather than snaps away.
- You need a per-word stagger on exit without any blur-in entrance (the arrival is clean).

## Don't use when
- You want a blurred entrance that resolves to crisp — that is `focus-blur-resolve`, which opens blurry and sharpens in.
- The text is a paragraph or multi-line block where per-word stagger would drag too long; use `line-by-line-slide` for multi-line exits instead.
- The scene needs a hard cut or a simple opacity fade, not an upward drift — use `fade-through` for a clean A→B replacement.