# Photo Caret
URL: https://remocn.dev/docs/typography/photo-caret

A multi-line headline types word by word with a hopping caret while product photos float around it.

- Install: `npx shadcn@latest add @remocn/photo-caret`
- Vibe: premium
- Natural length: 91f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/photo-caret
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PhotoCaret } from "@/components/remocn/photo-caret";

const PhotoCaretScene = () => (
  <PhotoCaret
    text="Your launch, / your name / on it."
    accentWord="it."
    src={staticFile("shots/hero.jpg")}
    images={[staticFile("shots/one.jpg"), staticFile("shots/two.jpg")]}
  />
);

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

A caret hops from word to word as the headline types, with an image tile and floating photos popping in around it, and the accent word lands last. Pass `text` (use ' / ' for line breaks), `accentWord`, and your own `src` and `images` since the default photos only exist in the Remocn repo; it ships light and dark through `theme`.

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 |
|---|---|---|---|
| `text` | `string` | `"Your launch, / your name / on it."` | Headline; ' / ' marks line breaks |
| `accentWord` | `string` | `"it."` | Word shown in the accent color; defaults to the last |
| `src` | `string` | — | Main image tile next to the text; pass your own |
| `images` | `string[]` | — | Floating photo URLs around the text; pass your own |
| `accent` | `string` | — | Color of the accent word and caret |
| `ink` | `string` | — | Text color override |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `ground` | `GshPresetId` | — | Gradient ground preset id |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters to tune the ground |
| `firstStep` | `number` | `12` | Frames before the second word; later steps speed up |

## Use when
- A brand statement that should be written live with photos orbiting the text.
- A personal or lifestyle launch beat where imagery supports the line.

## Don't use when
- You have no photos to place around the text - use `cooling-type`.
- You want a plain typed line - use `typewriter`.
- You want the photos to be the focus - use `cover-ring`.