ReactionOverlay

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/web

Requirements

• React — react and react-dom ^18 || ^19 (peer dependency).
• LevelChat Web SDK — @levelchat/web ^0.2.4 (peer dependency, wires hook-driven mode to the live Room).
• Provider — wrap the tree in <LevelChatProvider> from @levelchat/web-react so hook-driven mode can subscribe to room events. Prop-driven demos work without it.
• Styles — import the brand tokens + kit stylesheet exactly once at the app entry, before any kit component renders.

In Next.js (App Router), import the stylesheets at the top of your root layout:

// app/layout.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

In Vite (or any plain React app), import them at the top of your entry module:

// src/main.tsx
import '@levelchat/brand/tokens.css';
import '@levelchat/react-components/styles.css';

Basic usage

import { ReactionOverlay } from '@levelchat/react-components';

<div className="relative h-[480px]">
  <ParticipantGrid />
  <ReactionOverlay />
</div>

Performance

• Events are bounded at the maxBuffer option of the underlying useReactions hook (default 60). Reach for the hook directly if you need to override — <ReactionOverlay> does not forward hook options today.
• 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 the hook's ttlMs (default 3000) without the rise animation. Layout is otherwise identical.

Props