PrimitivePrimitivesAdvanced

masked-slide-reveal30fps · 960×540

Three layers in your repoDrop scenes intoTransitionSeries

Install

$ npx remotion-ui@latest add masked-slide-reveal

Each line slides up through a fixed-height mask with staggered timing. Pass lines for multi-line headlines, or text with newline-separated copy.

Agent notes

Install first, then import the copied source component locally. AI guide →

Import

@/remotion/primitives/masked-slide-reveal

Use when: frame-level motion primitives and reusable animation wrappers.
Customize: text, lines, staggerInFrames, durationInFrames, plus copied source for timing, layout, colors, and typography.
Rule: do not import this component from the remotion-ui npm package; it is copied into your project.

Usage

Example

import { MaskedSlideReveal } from "@/remotion/primitives/masked-slide-reveal";

<MaskedSlideReveal
  lines={[
    "Three layers in your repo",
    "Drop scenes into",
    "TransitionSeries",
  ]}
/>

API Reference

Prop	Type	Default	Description
text	string	-	Copy to reveal. Splits on newlines for line mode, or words on a single line. Omit when using lines.
lines	string[]	-	Explicit lines to reveal through the mask. Preferred for multi-line headlines.
staggerInFrames	number	6	Frames between each line or word reveal.
durationInFrames	number	16	Frames for each masked slide-in.
delayInFrames	number	0	Delay before the first item animates.
textAlign	"left" \| "center" \| "right"	"center"	Horizontal alignment of lines.
lineGap	number	0.18	Gap between lines in em units (line mode only).

staggered-fade-up

Masked Slide Reveal

Agent notes

Usage

API Reference

Related