# Glass Orb

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.

> Composed · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/glass-orb
```

## Import

```tsx
import { GlassOrb } from "@/components/ui/glass-orb/glass-orb";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `size?` | `number` | Diameter in pt. Default 80. |
| `snapBack?` | `boolean` | Spring back to origin on release (default true). False = stays dropped. |
| `bend?` | `number` | Refraction strength 0–1 passed to Glass bend. |
| `onDrop?` | `(offset?: { x: number` | Called on release with the orb's offset from its origin. |
| `y` | `number }) => void` | — |
| `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. |
| `height` | `number }` | — |
| `dockInset?` | `number` | Gap kept from the parent's edges when docked. Default 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` | — |

Source: https://lumioui.com/components/glass-orb