Focus Blur Resolve

Installation

$ pnpm dlx shadcn@latest add @remocn/focus-blur-resolve

Usage

// 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:

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