`barnDoor`

Two edges close in; the old screen shrinks to a band.

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

split run the other way: the two edges close in on the centre, so the old screen survives as a shrinking middle band.

Options it takes

Option	Type	Default	What it does here
`direction`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Both edges are used, so this picks the axis rather than an edge: `top`/`bottom` work horizontally, `left`/`right` vertically. `'top'` sweeps upward — horizontal edge `'bottom'` sweeps downward — horizontal edge (default) `'left'` sweeps left — vertical edge `'right'` sweeps right — vertical edge
`angleDeg`	`number`	`0`	Tilt of the boundary line. The sweep still travels along `direction`; the line doing the sweeping is raked over. Positive is clockwise on screen. Any value is accepted and wrapped.
`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: origin, shape, 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: 'barnDoor',
  durationMs: 650,
  direction: 'bottom',
  angleDeg: 0,
});

How it is done

iOS	one animated slab
Android	`Canvas.clipPath` on the same slab