Reaction Burst
A continuous side-channel of hearts and likes climbing the frame.
Scene
$ 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. |