ReactionOverlay is the floating emoji layer over a meeting surface. Reactions drift up from the bottom, drift through one of 8 deterministic lanes, and fade out after a configurable TTL. Pointer-events are off so clicks on tiles + controls always reach the target.
Install
pnpm add @levelchat/react-components @levelchat/webBasic usage
import { ReactionOverlay } from '@levelchat/react-components';
<div className="relative h-[480px]">
<ParticipantGrid />
<ReactionOverlay />
</div>Performance
- Events bounded at
maxBuffer(default 60). Emoji storms can't blow up React state. - Each bubble uses
transform: translateY(GPU-accelerated). - TTL evictor runs every 250ms; cleaned up on unmount.
Reduced motion
When prefers-reduced-motion is set, reactions appear as static chips that fade after ttlMs without the rise animation. Layout is otherwise identical.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
renderEmoji | (event) => ReactNode | — | Replace the per-event emoji render (e.g. swap in custom SVG). |
riseDistance | number | 160 | Pixels the bubble travels upward. |
durationMs | number | 4500 | Fade duration in ms. |