# Photo Fill Type
URL: https://remocn.dev/docs/typography/photo-fill-type

A word cut out of the stage opens onto a photo that fills the frame, followed by a caption.

- Install: `npx shadcn@latest add @remocn/photo-fill-type`
- Vibe: premium
- Natural length: 136f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/photo-fill-type
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PhotoFillType } from "@/components/remocn/photo-fill-type";

const PhotoFillTypeScene = () => (
  <PhotoFillType title="Dusk" caption="Not a photograph. Every pixel is code." src={staticFile("shots/dusk.jpg")} />
);

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

The word sits as a cutout with the image visible through its letters, then expands until the image fills the frame and a caption fades in. Pass `title` and `caption`, and `src` with your own image to replace the built-in generated landscape; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Dusk"` | Word cut out of the stage; shows the image inside |
| `caption` | `string` | `"Not a photograph. Every pixel is code."` | Line that fades in after the image fills the frame |
| `src` | `string` | — | Image shown through the word; defaults to a generated landscape |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A bold one-word title that should open into an image, such as a landscape or product shot.
- An opener where the image fills the type first and then takes over the frame.

## Don't use when
- You have no image and want text only - use `tracking-in`.
- You want a masked text entrance without a photo - use `mask-reveal-up`.
- You want photos around the text - use `photo-caret`.