Masked Slide Reveal

Words rise out of an invisible horizontal mask with a springy motion

Installation

$ pnpm dlx shadcn@latest add @remocn/masked-slide-reveal

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { MaskedSlideReveal } from "@/components/remocn/masked-slide-reveal";

const MaskedSlideRevealScene = () => (
  <MaskedSlideReveal text="Built for Remotion" />
);

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

Props

PropTypeDefaultDescription
textrequired
stringThe text to animate. Split on spaces into words.
staggerDelay
number3Frames between the start of each word's spring animation
fontSize
number72Font size in pixels
fontWeight
number700CSS font-weight
color
string"#171717"Text color (any valid CSS color)
speed
number1Playback speed multiplier (1 = normal, 2 = twice as fast)
className
stringOptional className passed to the underlying span