Iris revealPro
A `clip-path: circle()` reveal that opens from the point the person clicked, for opening a generation from a grid, and folds back to it on close.
On this page
ProA generation grid that opens a result from the point you clicked and folds it back there on close.
Installation
Usage
import { IrisReveal, useIrisOrigin } from "@/components/ui/chatcn/pro/iris-reveal"
const iris = useIrisOrigin()
<button onClick={(e) => { iris.capture(e); setOpen(true) }}>Open</button>
<IrisReveal open={open} origin={iris.origin} className="absolute inset-0">…</IrisReveal>useIrisOrigin records the click point; a click made with Enter or Space records the trigger's center and marks it as a keyboard open, which appears at once. Set progress to drive the circle from a drag or a scrubber.
Examples
States
ProThe iris held at three sizes from three origins, scrubbed by a slider, and toggled from a button.
Props
| Prop | Type | Notes |
|---|---|---|
open | boolean | Required |
origin | { x, y, keyboard? } | "center" | null | Viewport point. Default the center |
progress | number | Drive the circle yourself, 0 to 1 |
duration | number | Open length. Default 280 ms; closing takes three quarters |
keepMounted | boolean | Keep children mounted while closed |
onOpenChangeComplete | (open: boolean) => void | After an open or close finishes, for focus |
Keyboard
| Key | Action |
|---|---|
Enter, Space on the trigger | Opens at once, without the iris |
Escape | In the demo, closes and returns focus to the tile |
Accessibility
- Closed and closing content is
inertand then hidden, so it is never focusable or announced. - Move focus in from
onOpenChangeCompleteand back to the trigger on close, as the demo does. - Under forced colors the clip is removed.
Motion
- Opens in 280 ms on
ease-chatcn-out, closes in 210 ms onease-chatcn-in-out, back to the origin. A close during the open reverses from where the circle is. - Keyboard opens are instant. Under reduced motion the iris becomes a 150 ms fade.
- Only
clip-pathandopacityanimate.