# Circle Reveal

Screen transition that floods the next screen’s colour out from the button you tapped, as a growing circle with a lit rim. Your app swaps screens under it and can move shared elements along.

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

## Install

```bash
npx @lumioui/cli add circle-reveal
```

## Import

```tsx
import { CircleReveal } from "@/components/ui/circle-reveal/circle-reveal";
```

## Variants

- `checkout` — Order placed: `npx @lumioui/cli add circle-reveal-checkout`
- `shop` — Slide to shop: `npx @lumioui/cli add pro/circle-reveal-shop`
- `theme` — Theme switch: `npx @lumioui/cli add circle-reveal-theme`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `active?` | `boolean` | Declarative trigger: false → true reveals, true → false conceals.  Optional — the imperative ref handle works without it. |
| `origin?` | `CircleRevealOrigin` | Origin in the overlay's coordinates. Default bottom-centre. |
| `color?` | `string` | Reveal fill — the NEXT screen's background. Default theme background. |
| `concealColor?` | `string` | Conceal fill — the PREVIOUS screen's background. Default `color`. |
| `duration?` | `number` | Reveal flood in ms. Default 315 (tempo.settle). |
| `concealDuration?` | `number` | Conceal flood in ms. Default 250 — going back runs quicker than the  commit. |
| `onCovered?` | `(revealed: boolean) => void` | Circle fully covers the surface — swap content now. `revealed` is  true after a reveal, false after a conceal. |
| `onDone?` | `(revealed: boolean) => void` | The circle has faded away and the transition is complete. |
| `rim?` | `boolean` | Lit leading rim on the flood's edge. Default true. |
| `rimColor?` | `string` | Rim light colour — brighter than the fill. Default soft white. |
| `children?` | `React.ReactNode | ((revealed: SharedValue<number>) => React.ReactNode)` | Rendered above the circle (shared elements). A function receives the  `revealed` shared value, 0 → 1 on reveal and 1 → 0 on conceal. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/circle-reveal