slide

A straight edge paints the new theme across.

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

A mask wipe: one straight edge sweeps across and uncovers the new theme behind it. Nothing on screen moves, so it reads as the new colours being painted across rather than the UI sliding away.

Options it takes

OptionTypeDefaultWhat it does here
direction 'top' | 'bottom' | 'left' | 'right' 'bottom' The edge the outgoing screen leaves through.
'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: 'slide',
  durationMs: 650,
  direction: 'bottom',
  angleDeg: 0,
});

How it is done

iOSanimated mask half-plane
AndroidCanvas.clipRect, or clipPath if tilted