A film-style iris that closes on the first view to a single point, holds on black for a beat, then opens on the second. A lit ring rides the aperture edge and the closing view sinks back as it goes.
The Harbor
Directed by Mara Lindqvist
npx shadcn@latest add https://hyperblur.dev/r/transition-iris-wipe.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/transition-iris-wipe.tsx.
import { TransitionIrisWipe } from "@/components/hyperblur/transition-iris-wipe"
<TransitionIrisWipe active={done} origin={{ x: 70, y: 40 }} from={<Before />} to={<After />} />| Prop | Type | Default | Description |
|---|---|---|---|
| from | ReactNode | built-in scene | The first view, shown while active is false. You can also pass two children instead of from and to. |
| to | ReactNode | built-in scene | The second view, shown while active is true. |
| active | boolean | Controlled state. False shows from, true shows to. Pair with onActiveChange. | |
| defaultActive | boolean | false | Initial state when uncontrolled. |
| onActiveChange | (active: boolean) => void | Called whenever the view switches, including switches made by autoPlay. | |
| autoPlay | boolean | false | Switch back and forth by itself. Stops when the user prefers reduced motion. |
| interval | number | 2800 | Milliseconds between switches when autoPlay is on. |
| duration | number | 1200 | Full close and open time in milliseconds. |
| origin | { x: number; y: number } | { x: 50, y: 50 } | Point the iris closes to and opens from, in percent of the frame. |
| accent | string | "#2f7bff" | Color of the ring on the aperture edge and the center mark. |
| backdrop | string | "#050506" | Color seen while both views are closed. |