PR pixi-reels
All recipes
wins spotlight paylines

How to animate paylines

Cycle through multiple winning lines with the built-in spotlight — dim non-winners, promote winners, pulse each line.

Steps
  1. After spin, detect your win lines (array of winning cells)
  2. Call reelSet.spotlight.cycle(lines, { displayDuration, gapDuration, cycles, dimAmount })
  3. Listen for spotlight:end to re-enable UI
APIs SymbolSpotlight.cyclespotlight:start eventspotlight:end event

The minimum code

function paylineCells(row: number, reelCount: number) {
  return Array.from({ length: reelCount }, (_, reelIndex) => ({ reelIndex, rowIndex: row }));
}

reelSet.events.on('spin:complete', async (result) => {
  const wins = detectLineWins(result.symbols);       // your logic
  if (!wins.length) return;

  await reelSet.spotlight.cycle(
    wins.map((w) => ({ positions: w.positions })),
    { displayDuration: 600, dimAmount: 0.25, cycles: 1 },
  );
});

Pair with per-symbol win animations

spotlight.cycle calls symbol.playWin() on each highlighted cell if you pass playWin: true (default). Your ReelSymbol subclass defines the gesture — SpineSymbol fires its “win” animation, BlockSymbol does a scale-down pulse, custom classes do whatever you want.

UX guardrails

  • Disable the spin button between spotlight:start and spotlight:end.
  • On slam-stop or new spin, the spotlight aborts automatically.
  • Use dim: 0 when you just want winners to pulse without fading losers.