Blur Out Up · remocn

Installation

$ pnpm dlx shadcn@latest add @remocn/blur-out-up

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { BlurOutUp } from "@/components/remocn/blur-out-up";

const BlurOutUpScene = () => (
  <BlurOutUp text="Clear in, airy out." staggerDelay={1} />
);

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

Each word fades and slides in cleanly, holds steady in the middle of the composition, then drifts upward with increasing blur 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 { BlurOutUp } from "@/components/remocn/blur-out-up";
import { Backdrop } from "@/components/remocn/backdrop";

const BlurOutUpScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <BlurOutUp text="Clear in, airy out." staggerDelay={1} />
  </Backdrop>
);

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

Props

Prop	Type	Default	Description
`text`required	`string`	—	The text to animate
`staggerDelay`	`number`	`1`	Per-word delay in frames for both the enter and exit phases
`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