Skip to main content

Module bubble

Module bubble 

Source
Expand description

<BubbleRoot /> — the Leptos tree mounted into the webcam-bubble Tauri window (M-BUBBLE.0 / AUT-273 + the M-QUAL.4 overlay redesign).

There is no card. The circle itself is the widget: a .bubble-stage (the circle’s bounding square) holds the clipped circular camera feed plus three overlays painted on top of it —

  • PREVIEW pill near the top of the circle
  • pause / settings icon cluster at the upper-right edge
  • three recording-control buttons in a dark pill near the bottom

…plus a floating device caption (LuCamera + FaceTime HD · bottom-left) below the circle on the transparent page background.

The overlays are siblings of .bubble-canvas-wrap, not children — the wrap is overflow: hidden to clip the feed to a circle, so anything inside it would be clipped too. Keeping the overlays as siblings (positioned against the stage) lets them sit on top of the circle without being clipped. The circle mask here is the preview’s own; wisp owns the recorded frame’s mask (CLAUDE.md “Mask is wisp’s, not CSS”).

The whole thing is draggable via data-tauri-drag-region; the interactive clusters (icon cluster, controls) opt OUT of drag so a click on a button doesn’t initiate a window drag.

Structs§

BubbleRootProps
Props for the BubbleRoot component.

Functions§

BubbleRoot
Leptos component mounted at ?mount=bubble. Renders the borderless circular webcam surface with overlaid controls.