`iris`

Collapses into a hexagon, diamond or squircle.

The full recording — the example app on an Android emulator and an iOS simulator at once, with iris played several times over. Scrub or pause with the controls.

circularReveal with a shape other than a circle. Every outline is a polygon with a fixed vertex count that scales linearly with the radius, which is what lets Core Animation interpolate the mask path directly.

Options it takes

Option	Type	Default	What it does here
`origin`	`{ x: number; y: number }`	`screen centre`	Where the effect starts, in dp. Pass a touch’s `pageX/pageY` as-is — the offset inside a modal or form sheet is corrected natively.
`shape`	`'circle' \| 'diamond' \| 'hexagon' \| 'roundedRect'`	`'hexagon'`	The outline the old screen collapses into. `'circle'` identical to `circularReveal` `'diamond'` four-vertex rhombus `'hexagon'` six-vertex polygon (default) `'roundedRect'` squircle
`durationMs`	`number`	`650`	Animation length. Clamped up to this kind’s floor; `0` means no animation and is never clamped.
`settleFrames`	`number`	`2`	Display frames to hold the snapshot before revealing, so the theme swap has painted underneath.

Ignored by this kind: direction, angleDeg, blurStyle, bands. Passing them is harmless.

Minimum duration

A request below 260ms is clamped up to it, natively, so both platforms agree. Below that floor a full-screen copy coming apart has too few frames to read as motion — the eye gets the start and the end and nothing in between, which looks like a flicker rather than a fast transition. durationMs: 0 still means “no animation” and is never clamped.

Usage

withThemeTransition(applyTheme, {
  kind: 'iris',
  durationMs: 650,
  origin: { x: pageX, y: pageY },
  shape: 'hexagon',
});

How it is done

iOS	the same mask, a fixed-vertex polygon
Android	`Canvas.clipPath` on the same polygon