Scenes
Callout Spotlight
Spotlight overlay for product demos.
Sceneblocks
Install
npx remotion-ui@latest add callout-spotlightDim the frame, highlight a target region, and add a readable callout.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add callout-spotlightImport after install
@/remotion/scenes/callout-spotlight- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: title, target, backgroundSrc, 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
import { CalloutSpotlight } from "@/remotion/scenes/callout-spotlight";
<CalloutSpotlight title="Click export" target={{ x: 320, y: 180, width: 420, height: 180 }} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Callout headline. |
| target* | SpotlightTarget | — | Highlighted rectangle. |
| backgroundSrc | string | — | Optional screenshot or media background. |