Comment Callout
A viewer comment answered on screen — marked up, hearted, and replied to.
SceneScenesAdvanced
comment-callout30fps · 960×540
Install
$ npx remotion-ui@latest add comment-calloutThe comment lands from the feed, the marker sweeps the phrase named by highlight, the creator hearts it, and the composer opens and types out reply before it sends. Leave reply empty to end the scene on the comment itself, and drop highlight to skip the markup beat.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/comment-callout- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: body, author, handle, initials, 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 { CommentCallout } from "@/remotion/scenes/comment-callout";
<CommentCallout
author="Mina Lee"
handle="@minamakes"
body="Can you turn this into a quick video breakdown?"
highlight="a quick video breakdown"
reply="Dropping it Thursday — here's the short version."
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| body | string | - | The viewer comment being answered. |
| author | string | - | Display name of the commenter. |
| handle | string | - | Social handle, also shown on the reply line. |
| initials | string | - | Avatar initials. Defaults to the first two letters of author. |
| timestamp | string | - | Relative time shown after the handle, e.g. "2h". |
| highlight | string | - | Substring of body the marker sweeps across. Matched case-insensitively; omit to skip the beat. |
| reply | string | - | Answer typed into the composer and sent. Pass an empty string to end on the comment. |
| replyLabel | string | - | Label on the reply action. Defaults to "Reply". |
| likes | number | - | Like count before the creator hearts the comment. Default 128. |
| accentColor | string | - | Avatar, marker, heart, and send colour. |
| backgroundColor | string | - | Overrides the page background behind the card. |
| theme | "dark" | "light" | - | Card palette. Default "dark". |
| speed | number | - | Animation speed multiplier for fitting a fixed-length Sequence. Default 1. |