# Focus Blur Resolve
URL: https://remocn.dev/docs/typography/focus-blur-resolve

A premium focus pull from heavy blur to crisp text, then a soft blur-out exit

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

## Installation

```bash
npx shadcn@latest add @remocn/focus-blur-resolve
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FocusBlurResolve } from "@/components/remocn/focus-blur-resolve";

const FocusBlurResolveScene = () => (
  <FocusBlurResolve text="Focus resolves clearly." blur={14} />
);

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

The text pulls from a heavy blur into sharp focus, holds steady in the middle of the composition, then softly blurs out 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 { FocusBlurResolve } from "@/components/remocn/focus-blur-resolve";
import { Backdrop } from "@/components/remocn/backdrop";

const FocusBlurResolveScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <FocusBlurResolve text="Focus resolves clearly." blur={14} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate |
| `blur` | `number` | `14` | Initial blur radius in pixels the text resolves from. The exit blurs back out automatically. |
| `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 word or short phrase should feel like a camera lens pulling into focus.
- The scene calls for a full in-and-out arc in a single component without composing separate entrance and exit clips.
- Premium cinematic aesthetics are required — the blur depth conveys intentional production quality.

## Don't use when
- You want a clean departure upward after a crisp entrance — that arc belongs to `blur-out-up`, which arrives clean and exits with upward blur.
- The text is multiple lines or a paragraph — the blur radius is designed for a single short phrase; use `mask-reveal-up` or `line-by-line-slide` for multi-line reveals.
- The entrance should be sharp from frame one — use `kinetic-center-build` or `per-character-rise` when there should be no blurry opener.
- You want a blur entrance that holds crisp with no exit — `focus-blur-resolve` forces a blur-out departure; use `soft-blur-in` for an entrance-only blur reveal.