# Soft Blur In
URL: https://remocn.dev/docs/typography/soft-blur-in

Per-character fade-in with a gentle blur and upward motion

- Install: `npx shadcn@latest add @remocn/soft-blur-in`
- Vibe: premium
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/soft-blur-in
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SoftBlurIn } from "@/components/remocn/soft-blur-in";

const SoftBlurInScene = () => (
  <SoftBlurIn text="Think different." blur={12} fontSize={72} />
);

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

### 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 { SoftBlurIn } from "@/components/remocn/soft-blur-in";
import { Backdrop } from "@/components/remocn/backdrop";

const SoftBlurInScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <SoftBlurIn text="Think different." blur={12} fontSize={72} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to reveal |
| `blur` | `number` | `12` | Initial blur radius in pixels. Animates down to 0 per character. |
| `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 hero headline needs the Apple-style per-character soft reveal — premium, airy, cinematic.
- The text is long enough that a word-by-word stagger would take too long; per-character stagger with blur reads faster.
- The overall scene is clean and bright, letting the blur-clear motion read clearly against the background.

## Don't use when
- You want a hard exit animation — `soft-blur-in` is an entrance only; pair with `blur-out-up` in a `<Sequence>` for a matching exit.
- The vibe is tech, gritty, or high-energy — the soft blur reads as refined and calm; use `rgb-glitch-text` or `tracking-in` for a sharper feel.
- You are swapping between two texts — use `shared-axis-z` or `shared-axis-y` which handle both the outgoing and incoming content.