Glass Orb

Pro

Draggable droplet of glass that follows your finger, squashes and stretches with speed and catches light on its rim. Let go and it springs home, or fling it to dock in the nearest corner.

Preview

Installation

npx @lumioui/cli add pro/glass-orb

Usage

import { GlassOrb } from "@/components/ui/glass-orb/glass-orb";
<GlassOrb />

API reference

Prop Type Default
y* number }) => void —
height* number } —
size number

Diameter in pt. Default 80.

 80
snapBack boolean

Spring back to origin on release (default true). False = stays dropped.

 true
bend number

Refraction strength 0–1 passed to Glass bend.

 0.6
onDrop (offset?: { x: number

Called on release with the orb's offset from its origin.

 —
dockBounds { width: number

Size of the parent the orb floats in. With snapBack={false}, a release projects the fling and docks to the nearest corner.

 —
dockInset number

Gap kept from the parent's edges when docked. Default 16.

 16
level SharedValue<number>

A live 0–1 level (e.g. the other caller's voice) the rim brightens with, read on the UI thread. Stop writing it while off-screen.

 —
onPress (frame: GlassOrbFrame) => void

A tap (not a drag) — receives the orb's frame so a screen can grow out of it.

 —
className string —
children React.ReactNode —