Mask Reveal Up

Lines reveal upward with a soft masked feel and compact stagger

Installation

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

Usage

tsx

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

tsx

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

Props6

Prop	Type	Default
textrequired	string— The text to animate. Split on newline characters into lines.
distance	number30 Vertical distance in pixels each line rises from on enter.
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. Split on newline characters into lines.
distancenumber
Vertical distance in pixels each line rises from on enter.
Default30
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