# Word Gap Media
URL: https://remocn.dev/docs/typography/word-gap-media

A video tile slots into the gap between "Launch all" and "of this"

- Install: `npx shadcn@latest add @remocn/word-gap-media`
- Vibe: premium
- Natural length: 142f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/word-gap-media
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WordGapMedia } from "@/components/remocn/word-gap-media";

const WordGapMediaScene = () => (
  <WordGapMedia before="Launch all" after="of this" images={["/shots/hero.jpg", "/shots/gallery.jpg"]} aspects={[0.8, 1.36]} captions={["Hero", "Gallery"]} />
);

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

A sentence is split around a gap and a media tile opens inside it, cycling through your images with progress bars and captions. By default it uses `staticFile` images that only exist in the Remocn repo, so pass your own `images` (public paths or full URLs). It ships light and dark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Launch all"` | Text before the gap. |
| `after` | `string` | `"of this"` | Text after the gap. |
| `images` | `string[]` | `DEFAULT_IMAGES` | Image paths or URLs cycled through the tile. |
| `aspects` | `number[]` | `DEFAULT_ASPECTS` | Aspect ratio (width over height) for each image. |
| `captions` | `string[]` | `DEFAULT_CAPTIONS` | Label shown for each image. |
| `accent` | `string` | — | Accent colour (any CSS colour). |
| `ink` | `string` | — | Text colour (any CSS colour). |
| `background` | `string` | — | Overrides the theme background colour. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `ground` | `GshPresetId` | — | Gradient preset used for the backdrop. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the gradient preset parameters. |

## Use when
- A beat where media tiles slot into a gap inside a sentence, such as showing the screens behind the claim.
- A product showcase that cycles three or four images with captions inside the headline.

## Don't use when
- You only need a headline with no imagery — use `staggered-fade-up`.
- You want one giant word with the camera pulling back — use `word-pullback`.