Caption Emoji Beat
Emoji punctuation landing on beats. Install with npx remotion-ui@latest add caption-emoji-beat.
PrimitiveData & mediaAdvanced
$ npx remotion-ui@latest add caption-emoji-beatEmoji stamps landing on the beat, over an optional caption line.
import { CaptionEmojiBeat } from "@/remotion/primitives/caption-emoji-beat";
<CaptionEmojiBeat
text="Punctuate the beat, not the sentence"
beats={[
{ emoji: "🔥", atInFrames: 10, x: 22, y: 26, rotate: -8 },
{ emoji: "🚀", atInFrames: 80, x: 50, y: 16, scale: 96 },
]}
/>Beats are scheduled, not detected
Each stamp lands on a frame you give it rather than on an audio envelope read at
render time. The beats of a track are known when the edit is cut, and a
detector — even a good one — drifts against the music it is supposed to be
hitting. If you have beat times in seconds, multiply by fps and pass frames.
The wobble decays
A stamp arrives with overshoot, swings once, then releases. The swing is keyed to its own landing rather than to the clock, so every emoji wobbles by the same amount whenever it arrives, and it decays to nothing — a held frame is still, and only arrivals move.
holdInFrames is how long a stamp stays at full size before the release, which
is shorter than the landing and accelerates away.
Placement
x and y are percentages of the frame, so a layout survives a change of
resolution. Keep stamps clear of the caption line's own box; the text is
centred and wraps inside 12% side margins.
Beats are scheduled on frames rather than detected from audio: the beats are known when the edit is cut, and a render-time detector drifts against the music it is meant to hit. The wobble is keyed to each stamp's own landing, so it decays to nothing and a held frame is still.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/caption-emoji-beat- Use when: captioned videos, social clips, and synced text scenes.
- Customize: beats, text, size, landInFrames, 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 { CaptionEmojiBeat } from "@/remotion/primitives/caption-emoji-beat";
<CaptionEmojiBeat
text="Punctuate the beat, not the sentence"
beats={[
{ emoji: "🔥", atInFrames: 10, x: 22, y: 26, rotate: -8 },
{ emoji: "🚀", atInFrames: 80, x: 50, y: 16, scale: 96 },
]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| beats | EmojiBeat[] | required | `{ emoji, atInFrames, x, y, scale?, rotate? }`. x/y are percentages of the frame. |
| text | string | undefined | Caption line the emoji punctuate. Omit for emoji alone. |
| size | number | 84 | Base emoji size in px, overridable per beat. |
| landInFrames | number | 7 | Frames an emoji takes to land. |
| holdInFrames | number | 26 | Frames it holds at full size before releasing. |
| overshoot | number | 1.35 | Scale overshoot on the way in. 1 lands flat. |
| wobbleInDegrees | number | 9 | Swing after landing. Decays to nothing. |
| textAtInFrames | number | 0 | Frame the caption line arrives on. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |