Liquid Glass Orb
ProA draggable soap-bubble orb you swipe upward to enter the page, where it settles as a compact, still glass anchor.
webglshaderglassorbherodragswipeentry
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The page behind the orb. Hidden from assistive tech and pointer events until the orb has entered, then faded in. |
headline | React.ReactNode | - | Shown behind the resting orb. Blurs and lifts away as the orb travels, driven by the same progress value as the physics. |
hint | string | "Swipe up to enter" | Label printed across the resting orb. Also the live-region text read to screen readers. |
onEntryChange | (entered: boolean) => void | - | Fired when the orb enters, and again when it is swiped back down. |
revealDelay | number | 720 | Milliseconds between the orb settling and the children arriving. Keeps the two as separate beats instead of one cut. |
height | string | "100svh" | Scene height. The orb measures this section rather than the window, so a fixed height embeds the hero inside a panel. |
background | string | A soft warm white radial wash | Any CSS background. The glass is lit for a light ground; a dark value flattens the shell. |