# Stripe Type
URL: https://remocn.dev/docs/typography/stripe-type

A word cut into horizontal bands, as in the IBM logo, slides together from alternating sides and locks, then can pass on through

- Install: `npx shadcn@latest add @remocn/stripe-type`
- Vibe: tech
- Natural length: 30f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/stripe-type
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { StripeType } from "@/components/remocn/stripe-type";

const Title = () => (
  <AbsoluteFill style={{ backgroundColor: "#2b3bff" }}>
    <StripeType text="Launch" />
  </AbsoluteFill>
);

export const RemotionRoot = () => (
  <Composition
    id="StripeType"
    component={Title}
    durationInFrames={100}
    fps={30}
    width={1280}
    height={720}
  />
);
```

The bands cover the word's ink, from the top of its tallest letter to the
bottom of its lowest, measured from the loaded font. With `stripes` bands and
a `gap` share of each pitch left empty, the first band starts at the top and
the last ends at the bottom. Each band is a copy of the text clipped to its
strip.

Band 0 enters from the left, band 1 from the right, and so on, two frames
apart, each over 16 frames with an expo ease. The word is whole at frame 30
for eight bands. `settle="solid"` closes the gaps over the next ten frames.
With `exit`, after `hold` frames the bands carry on in the direction they came
from and leave through the other side. `getStripeTypeDuration` gives the
length for any set of props.

The component paints no background and centers the word in its parent. Sizes
scale with `height / 720`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Launch"` | The word to stripe |
| `fontSize` | `number` | `180` | Font size in reference px at 720p |
| `fontWeight` | `number` | `800` | Font weight. Heavy weights stripe best |
| `fontFamily` | `string` | `Inter` | Font family |
| `color` | `string` | `"#fafafa"` | Text color |
| `stripes` | `number` | `8` | Number of bands |
| `gap` | `number` | `0.35` | Share of each band pitch left empty |
| `settle` | `"striped" \| "solid"` | `"striped"` | Keep the gaps, or close them into solid type |
| `exit` | `boolean` | `true` | Let the bands pass on through after the hold |
| `hold` | `number` | `30` | Frames the word rests before the exit |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A bold word needs a graphic, engineered entrance on a flat field, such as a product name or a section title.
- You want the striped-logo look as the resting state, or as a transition into solid type with `settle` set to solid.
- A word should enter and leave in one move: the bands arrive from alternating sides and exit through the other.

## Don't use when
- The word should split along its letters rather than in horizontal bands — use `typed-split-wipe`.
- The whole frame should fill with moving rows of type — use `type-wall`.
- A soft, quiet entrance fits better — use `mask-reveal-up`.