Reaction Burst
A continuous side-channel of hearts and likes climbing the frame.
SceneScenes
$ npx remotion-ui@latest add reaction-burstReactions spawn on a steady cadence, climb, sway, and thin out near the top of their arc — the live-stream side channel rather than a celebration.
This is the narrow one. confetti-burst is a single impulse fired on one beat;
here the stream keeps running for as long as the scene does. stopAfterSeconds
closes the tap while letting everything already in flight finish its arc.
Every reaction's jitter — sway phase, lane offset, scale, tilt — is a pure
function of seed and its spawn index, through Remotion's random() helper.
Remotion renders frames out of order and in parallel, so Math.random() would
give the same glyph a different arc on every frame. Two streams in one
composition need different seeds, or they trace identical arcs.
reactions takes strings, drawn in Noto Color Emoji so a render worker without
a system emoji font does not produce tofu, or elements if you would rather ship
your own marks.
Deliberately narrower than confetti-burst, which is a single impulse fired on one beat — here the reactions keep coming for as long as the scene runs. Jitter runs through Remotion's seeded random(), a pure function of seed and spawn index, so frames render identically in any order.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/reaction-burst- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: reactions, ratePerSecond, align, lifeSeconds, 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 { ReactionBurst } from "@/remotion/scenes/reaction-burst";
<ReactionBurst align="right" ratePerSecond={7} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| reactions | React.ReactNode[] | ["❤️", "👍", "🔥", "😂", "✨"] | Glyphs cycled through as reactions spawn. Strings render in Noto Color Emoji; pass elements to use your own marks. |
| ratePerSecond | number | 6 | Reactions spawned per second. |
| align | "left" | "right" | "right" | Edge the stream rises along. |
| lifeSeconds | number | 2.6 | Seconds a single reaction takes to travel its arc. |
| drift | number | 46 | Horizontal sway in units, peak to peak. |
| size | number | 56 | Glyph size in units at full scale. |
| rise | number | 0.72 | Fraction of the frame height a reaction climbs. |
| stopAfterSeconds | number | - | Seconds after which no new reactions spawn. Ones in flight finish their arc. |
| seed | string | number | "reaction-burst" | Seeds the per-reaction jitter. Two streams in one composition need different seeds. |
| speed | number | 1 | Animation speed multiplier. |