# Screenshot Tour
URL: https://remocn.dev/docs/media/screenshot-tour

The camera pushes in on regions of a product screenshot in turn, dimming the rest and labelling each stop.

- Install: `npx shadcn@latest add @remocn/screenshot-tour`
- Vibe: clean
- Natural length: 177f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/screenshot-tour
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScreenshotTour } from "@/components/remocn/screenshot-tour";

const ScreenshotTourScene = () => (
  <ScreenshotTour
    src="/screens/dashboard.png"
    screenshotWidth={1440}
    screenshotHeight={900}
    stops={[{ x: 40, y: 120, width: 420, height: 200, label: "Every issue, grouped by status" }]}
  />
);

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

A framed screenshot rises in and the camera travels between `stops`, pushing in on each region while the rest dims and a caption names it. After the last stop it pulls back to the full shot when `pullBack` is on. Pass your own screenshot through `src` or `children` with its `screenshotWidth` and `screenshotHeight`, and list `stops` in screenshot pixels. With neither it shows a built-in issue-tracker mock. It ships light and dark through `theme`. The length is `18 + stops * framesPerStop + 24` for three stops at 45 frames.

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 |
|---|---|---|---|
| `src` | `string` | — | Screenshot URL. Replaces the built-in mock. |
| `children` | `React.ReactNode` | — | Custom screen content. Used when src is not set. |
| `screenshotWidth` | `number` | `MOCK_W` | Natural width of the screenshot in pixels. |
| `screenshotHeight` | `number` | `MOCK_H` | Natural height of the screenshot in pixels. |
| `stops` | `{ x: number; y: number; width: number; height: number; label: string }[]` | `DEFAULT_STOPS` | Regions to visit, in screenshot pixels, each with a caption. |
| `framesPerStop` | `number` | `45` | Frames spent on each stop. |
| `dim` | `number` | `0.55` | Strength of the veil outside the focus, 0 to 1. |
| `pullBack` | `boolean` | `true` | Pull back to the full screenshot after the last stop. |
| `theme` | `"light" \| "dark"` | `"light"` | Color scheme. Ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the focus ring. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- A guided walkthrough of one screenshot with three or so labelled regions.
- A product tour where each stop gets a caption and a numbered step.
- Showing real UI up close without cutting to separate screenshots.

## Don't use when
- All annotations should be visible together on a fixed frame — use `ui-callout`.
- You only need one close-up and a pull back — use `up-close`.
- The story is the layout adapting to screen sizes — use `device-morph`.