Callout Spotlight
A spotlight that is aimed — mask, ping, connector, then the callout.
SceneScenes
callout-spotlight30fps · 960×540
Install
$ npx remotion-ui@latest add callout-spotlightThe frame dims and the mask closes in from the whole picture onto target, a
ring pings the region once it lands, and only then does a connector draw out to
the callout card — the eye is taken to the thing before it is told about it.
target is in source pixels; give sourceWidth/sourceHeight when it was
measured against a different size and it is scaled and clamped into the safe
area. The card flips above the target when there is no room below.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/callout-spotlight- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: title, kicker, subtitle, target, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { CalloutSpotlight } from "@/remotion/scenes/callout-spotlight";
<CalloutSpotlight kicker="Tutorial" title="Click export" target={{ x: 320, y: 180, width: 420, height: 180 }} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | - | Callout headline. |
| kicker | string | - | Small label above the headline. |
| subtitle | string | - | Supporting line below the headline. |
| target* | SpotlightTarget | - | Region to spotlight, in source pixels; clamped to the safe area. The card flips above it when bottom clearance is low. |
| backgroundSrc | string | - | Screenshot or capture under the spotlight. |
| sourceWidth | number | - | Size the target was measured against. Defaults to the composition. |
| sourceHeight | number | - | As above, vertically. |
| dim | number | 0.72 | How far the rest of the frame is knocked back, 0–1. |
| accentColor | string | "#E8B86D" | Outline, ping, and connector colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |