Examples playground
← All examples

Chat Bubble & Floating Window

Preservation copy of the Sportacus chat bubble + floating window: pointer-event drag with thresholds, snap-to-home, and reactive viewport tracking that re-clamps the window on resize.

A preservation copy of the Sportacus chat bubble + floating window: drag the bubble (release near its home corner to snap back), click it to open the chat window, drag the window by its header, and resize the viewport to watch it re-clamp.

  • Bubble drag threshold is 5px (window: 3px); within an 80px snap radius it snaps home.
  • Viewport tracking is reactive: rendered positions are $derived from resize/orientationchange state, so a viewport change re-clamps the window with no imperative repositioning.
  • Window dims are fixed per breakpoint (desktop ≥850px: 520×620; below: 95vw×75vh). Messages scroll inside — content growth never resizes the window.
  • Archived quirk: a persisted raw position only clamps when resolved, so after a large viewport shrink the first paint can briefly show the window off-screen. Preserved as-is, on purpose.
  • Positions persist to localStorage (chat:floatingButtonPosition / chat:windowOffset) — no backend anywhere in this example.