# UI Callout
URL: https://remocn.dev/docs/ui-blocks/ui-callout

Callout cards appear one by one beside a product screenshot, each with a pulsing marker on its target.

- Install: `npx shadcn@latest add @remocn/ui-callout`
- Vibe: clean
- Natural length: 105f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ui-callout
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { UiCallout } from "@/components/remocn/ui-callout";

const UiCalloutScene = () => (
  <UiCallout
    src="/screens/dashboard.png"
    screenshotWidth={1440}
    screenshotHeight={900}
    callouts={[{ x: 358, y: 113, title: "Status at a glance", body: "Every issue shows its state." }]}
  />
);

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

A screenshot window rises in and callouts arrive in turn, each pinned to a target point with a pulsing marker and a card or pill that holds its `title` and `body`. Earlier callouts fold away as the next lands. Pass your own screenshot through `src` or `children`, with `screenshotWidth` and `screenshotHeight`, and list `callouts` whose x and y are in screenshot pixels. With neither `src` nor `children` it shows a built-in issue-tracker mock. 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 |
|---|---|---|---|
| `callouts` | `{ x: number; y: number; title: string; body?: string; side?: 'top' \| 'bottom' \| 'left' \| 'right'; delay?: number }[]` | `DEFAULT_CALLOUTS` | Callouts to show. x and y are target points in screenshot pixels. |
| `variant` | `"tooltip" \| "pill"` | `"tooltip"` | Callout look, tooltip cards or compact pills. |
| `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. |
| `stagger` | `number` | `30` | Frames between callouts when none sets its own delay. |
| `theme` | `"light" \| "dark"` | `"light"` | Color scheme. Ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of markers and highlights. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- Explaining three or so parts of a screen, each with a short title and body.
- A walkthrough over a static screenshot where annotations should arrive on a fixed beat.
- A tidy, editorial annotation look in either tooltip cards or compact pills.

## Don't use when
- The camera should travel into each region instead of annotating — use `screenshot-tour`.
- A single detail needs a framed highlight — use `bracket-focus`.
- You want a live tooltip inside a UI flow — use `tooltip`.