Mask Reveal Up · remocn

Installation

$ pnpm dlx shadcn@latest add @remocn/mask-reveal-up

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { MaskRevealUp } from "@/components/remocn/mask-reveal-up";

const MaskRevealUpScene = () => (
  <MaskRevealUp text={"Designed to move.\nBuilt to focus."} distance={30} />
);

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

The text is split on newline characters into individual lines. Each line rises upward from below, holding steady in the middle of the composition with a soft blur mask, then rises further and blurs out—so the duration should leave room for the staggered entry and exit animations.

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 { MaskRevealUp } from "@/components/remocn/mask-reveal-up";
import { Backdrop } from "@/components/remocn/backdrop";

const MaskRevealUpScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <MaskRevealUp text={"Designed to move.\nBuilt to focus."} distance={30} />
  </Backdrop>
);

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

Props

Prop	Type	Default	Description
`text`required	`string`	—	The text to animate. Split on newline characters into lines.
`distance`	`number`	`30`	Vertical distance in pixels each line rises from on enter.
`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