# Mask Reveal Up
URL: https://remocn.dev/docs/typography/mask-reveal-up

Lines reveal upward with a soft masked feel and compact stagger

- Install: `npx shadcn@latest add @remocn/mask-reveal-up`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

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

## 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 |

## Use when
- A multi-line headline or stacked list needs a clean, contained upward reveal that holds on screen.
- The reveal should feel composed and intentional — no overshooting, no blur, no lateral movement.
- A neutral entrance is needed that works across tones (product, editorial, corporate) without imposing personality.

## Don't use when
- You need an exit animation too — `mask-reveal-up` holds in place after reveal; use `line-by-line-slide` for a reveal that also exits to the right.
- The reveal should be character-level rather than line-level — use `per-character-rise` (clean, sharp) or `bottom-up-letters` (staircase, dramatic) for letter-by-letter entrances.
- Blur or atmospheric softness should accompany the upward motion — use `blur-out-up` (blurred exit) or `focus-blur-resolve` (blurred entrance) instead.