`stripes`

A grainy edge sweeps across, cell by cell.

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

dissolve’s grain, ordered along direction instead of at random — a grainy edge sweeping across rather than a uniform disintegration.

Options it takes

Option	Type	Default	What it does here
`direction`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	The axis the grain is ordered along. Note that `angleDeg` does not apply to this kind — the ladder is built per axis, not per angle. `'top'` sweeps upward — horizontal edge `'bottom'` sweeps downward — horizontal edge (default) `'left'` sweeps left — vertical edge `'right'` sweeps right — vertical edge
`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, angleDeg, shape, blurStyle, bands. Passing them is harmless.

Minimum duration

A request below 420ms 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: 'stripes',
  durationMs: 650,
  direction: 'bottom',
});

How it is done

iOS	the same mask ladder, ordered along the direction
Android	the same mask ladder, ordered along the direction