Stripe Mask

Slanted stripes mask a two-sentence bold headline into view

Installation

$ pnpm dlx shadcn@latest add @remocn/stripe-mask

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StripeMask } from "@/components/remocn/stripe-mask";
 
const StripeMaskScene = () => <StripeMask title="Faster. Every frame." slant={18} />;
 
export const RemotionRoot = () => (
  <Composition
    id="StripeMask"
    component={StripeMaskScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

Slanted stripes sweep in and mask the headline into view, then widen and retract, one line per sentence. Pass title (it breaks after each sentence) and slant; it ships light and dark.

Props5

Prop	Type	Default
title	string"Faster. Every frame." Headline. Breaks into a new line after each sentence.
slant	number18 Stripe slant in degrees, leaning right.
accent	string"#3B5BFD" Accent colour (any CSS colour).
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.
speed	number1 Playback multiplier; above 1 plays faster.

titlestring
Headline. Breaks into a new line after each sentence.
Default"Faster. Every frame."
slantnumber
Stripe slant in degrees, leaning right.
Default18
accentstring
Accent colour (any CSS colour).
Default"#3B5BFD"
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"
speednumber
Playback multiplier; above 1 plays faster.
Default1