Component

Floating Reactions

A transient emoji-burst overlay for meeting and live surfaces. Reactions float upward and fade — distinct from the static ReactionBar that shows persistent counts.

Static burst

A fixed set of reactions rendered at SSR time — useful for previews or server-rendered snapshots of a burst moment.

Meeting surface

Lanes

Reactions spread across horizontal lanes so simultaneous emojis don't stack. Lane 0 is far-left, lane N-1 is far-right.

5 lanes (0–4)

Interactive

Use useFloatingReactions() to emit reactions with automatic expiry after REACTION_LIFETIME_MS (3 s).

Reactions float here

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import {
  FloatingReactions,
  useFloatingReactions,
} from '@refraction-ui/react'

export function MeetingOverlay() {
  const { reactions, emit } = useFloatingReactions()

  return (
    <div className="relative w-full h-64 bg-muted rounded-xl overflow-hidden">
      {/* Your video / content here */}
      <FloatingReactions reactions={reactions} lanes={5} />
      <button
        className="absolute bottom-4 right-4"
        onClick={() => emit('👋', { lane: 2 })}
      >
        Wave
      </button>
    </div>
  )
}

Props

Prop	Type	Default	Description
`reactions`	`FloatingReaction[]`	--	Controlled list of active reactions. Each item has `id`, `emoji`, and optional `lane` (horizontal offset bucket 0..lanes-1).
`lanes`	`number`	`5`	Total number of horizontal lane buckets used to spread reactions across the overlay.
`className`	`string`	--	Additional CSS classes applied to the overlay container.