# Stripe Mask
URL: https://remocn.dev/docs/typography/stripe-mask

Slanted stripes mask a two-sentence bold headline into view

- Install: `npx shadcn@latest add @remocn/stripe-mask`
- Vibe: clean
- Natural length: 100f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Faster. Every frame."` | Headline. Breaks into a new line after each sentence. |
| `slant` | `number` | `18` | 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` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A bold two-sentence statement that should be revealed through slanted stripes.
- A punchy mid-video claim in a clean, sporty style.

## Don't use when
- You want a single bold word slamming in — use `full-bleed-type`.
- You want a soft reveal, not stripes — use `mask-reveal-up`.