Masked Slide Reveal
Words rise out of an invisible horizontal mask with a springy motion
Installation
$ pnpm dlx shadcn@latest add @remocn/masked-slide-revealUsage
// 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
| Prop | Type | Default | Description |
|---|---|---|---|
textrequired | string | — | The text to animate. Split on spaces into words. |
staggerDelay | number | 3 | Frames between the start of each word's spring animation |
fontSize | number | 72 | Font size in pixels |
fontWeight | number | 700 | CSS font-weight |
color | string | "#171717" | Text color (any valid CSS color) |
speed | number | 1 | Playback speed multiplier (1 = normal, 2 = twice as fast) |
className | string | — | Optional className passed to the underlying span |