Callout Spotlight
Spotlight overlay for product demos.
SceneScenes
callout-spotlight30fps · 960×540
Install
$ npx remotion-ui@latest add callout-spotlightDim the frame, highlight a target region, and add a readable callout.
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 | - | Optional label above the headline. |
| subtitle | string | - | Supporting line below the headline. |
| target* | SpotlightTarget | - | Highlighted rectangle; clamped to safe area. Callout flips above target when bottom clearance is low. |
| backgroundSrc | string | - | Optional screenshot or media background. |