Skip to content

chessboard

chessboard(opts?): SceneTransition

Defined in: renderer/src/transitions/chessboard.ts:37

Reveal the destination scene through a staggered checkerboard mask. The incoming scene’s container is masked by a grid of cells that grow from a center point to fill their slot — even-parity cells first, odd-parity second — so the new scene “paints in” cell-by-cell on top of the previous one. No blackout mid-point and no color overlay: the previous scene stays visible underneath until each cell of the new scene covers it.

  • Even cells ((row + col) & 1 === 0): grow over [0, 0.7]
  • Odd cells ((row + col) & 1 === 1): grow over [0.3, 1]

Pixi v8 Graphics masks are stencil clips (binary in/out, no alpha) — scaling each cell from 0 to its full size with smoothstep easing produces the soft per-cell entry that mask-fill alpha can’t. The 0.4 overlap means odd cells start growing while even cells are still mid-grow, removing the “second wave pops in” jolt at the midpoint.

On pop the destination scene is brought to the front of the scene stack so the same mechanic applies — without it the outgoing scene would render over the masked destination.

ChessboardOptions = {}

SceneTransition