Blur Reveal · remocn

A typography primitive that animates opacity from 0 to 1 and filter: blur() from a configurable amount down to 0. Useful for title cards and intro shots.

Installation

$ pnpm dlx shadcn@latest add @remocn/blur-reveal

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { BlurReveal } from "@/components/remocn/blur-reveal";

const BlurRevealScene = () => (
  <BlurReveal text="Hello, world" blur={12} fontSize={72} />
);

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

Props

Prop	Type	Default	Description
`text`required	`string`	—	The text to reveal.
`blur`	`number`	`10`	Initial blur radius in pixels. Animates down to 0.
`fontSize`	`number`	`48`	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.

Notes

Load fonts before render

Make sure your font is loaded before the first frame renders. Use @remotion/google-fonts or @remotion/fonts so the blur effect doesn't apply to a fallback system font.

Performance

Heavy blur on large text blocks is expensive. If you stack multiple BlurReveals, consider rendering them in their own <Sequence> to keep render time predictable.