pixlated
Colours swap behind a pixel mosaic.
The full recording — the example app on an Android
emulator and an iOS simulator at once, with pixlated played several times
over. Scrub or pause with the controls.
The screen breaks into a coarse mosaic, the colour swap rides it mid-transition, and the mosaic comes back down — so neither theme is ever seen sharp mid-flight. It needs a second snapshot of the already-painted new theme, which is why the JS side yields two animation frames before committing.
Options it takes
| Option | Type | Default | What it does here |
|---|---|---|---|
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, direction, angleDeg, shape, blurStyle, bands. Passing them is harmless.
Minimum duration
A request below 520ms 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: 'pixlated',
durationMs: 650,
});How it is done
| iOS | dual mosaic + alpha crossfade |
|---|---|
| Android | dual mosaic + alpha crossfade |