Drag a liquid-glass orb up: it shows your title through the lens, then fountains glass marbles into a heart.
Pro<OrbReveal />2 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| headline Copy shown before the reveal. | string | 'A new era of…' |
| title The line the lens uncovers. | string | 'Meet Wabi.' |
| subtitle Lines under the title. | string | 'The first personal…' |
| hint Faint hint under the resting orb. | string | 'Swipe up to enter' |
| images Image URIs for the marbles (app icons, avatars). | string[] | — |
| emoji Marble pictures when there are no images, each on a bright gradient. | string[] | 24 emoji |
| count Marbles in the heart (max 60), plus a trail of specks. | number | 52 |
| glowColors The glow while you hold the orb. | [string, string] | blue, violet |
| background Page colour. | string | theme background |
| footer Fades in after the reveal: sign-in buttons, a CTA. | ReactNode | — |
| revealed Controlled state. | boolean | — |
| defaultRevealed Uncontrolled initial state. | boolean | false |
| onRevealChange The orb settled in a new state. | (revealed: boolean) => void | — |
| style Root style; give it a screen or a tall card. | StyleProp<ViewStyle> | flex: 1 |
Behaviour & accessibility
- Hold
- The orb swells and lifts, a blue-violet smile of light glows through it and the headline fades.
- Drag
- Drag up past halfway (or flick) to reveal; drag the small orb down to go back. A quick tap toggles; a hold or a drag back to the start stays put.
- Lens
- Two Skia shaders refract the page under the orb and the title the lens uncovers: magnified middle, mirrored bevel, red/blue split at the edge.
- Marbles
- Fountain out of the button on arcs, pop to size and settle into a heart, then drift. Going back down, they float off the top.
- Copy
- The title rides with the orb. It and the footer appear as the orb settles and stay until it is most of the way back down.
- Haptics
- A tick when you pick the orb up and a medium impact on reveal.
- Reduced motion
- The orb snaps between states and the marbles appear in place.
- Web
- Needs CanvasKit loaded (LoadSkiaWeb); without it the revealed copy and footer are shown.
Source
Did you like the content?