Focus Blur Resolve

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

Installation

$ pnpm dlx 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}
  />
);

Props6

Prop	Type	Default
textrequired	string— The text to animate
blur	number14 Initial blur radius in pixels the text resolves from. The exit blurs back out automatically.
fontSize	number72 Font size in pixels
fontWeight	number600 CSS font-weight
color	string"#171717" Text color (any valid CSS color)
className	string— Optional className passed to the underlying span

textrequiredstring
The text to animate
blurnumber
Initial blur radius in pixels the text resolves from. The exit blurs back out automatically.
Default14
fontSizenumber
Font size in pixels
Default72
fontWeightnumber
CSS font-weight
Default600
colorstring
Text color (any valid CSS color)
Default"#171717"
classNamestring
Optional className passed to the underlying span