Small recipes, one mechanic each.
Each page is a focused how-to: the minimum code to make a single mechanic work, plus a live mini-demo you can replay.
The smallest pieces, explained step by step. how a symbol class works, how a coin carries a value.
Beginner: carry a value on a coin
Build your own symbol class from scratch that draws a coin with a number on it. Learn what a ReelSymbol is, the few methods the engine calls, and how to read the value back.
Beginner: carry the value as data
The same coin, but the number lives in data instead of the class. One generic coin carries any value the server sends, painted from coin:locked. The Hold & Win way.
Beginner: number on a ready-made coin
Don't draw the coin — use art you already have (a sprite) and add the number on top. Your symbol's view holds two children: the art and a text label.
Copy-paste foundations to clone for a new slot.
CardSymbol. debug / prototyping helper
No-asset PIXI.Graphics symbol class for recipes, mechanic tests, and prototypes. NOT for production. ship Sprite/Animated/Spine instead.
EmptySymbol: render nothing for a registered id
Register an EmptySymbol against an id like `empty` to reserve a grid slot that produces no visual output. The canonical background for hold-and-win bonus boards, miss cells, and any pattern where "blank" is the intended visual.
Classic 5×3 starter
The foundation of 95% of slot games. copy-paste starting point for line-pays.
Cascade 6×5 tumble
Modern tumble mechanic with an ever-growing multiplier. MultiWays-adjacent.
Hold & Win respin
Coins lock on land, respin until the grid fills. the "coin" formula every studio is shipping.
Hold & Win: Spine coins + collect
The hold & win board with production-style Spine coins. real skeletons per cell, MINI/MAJOR jackpot coins that reveal their tier on lock, side plaques that celebrate, and a collect flight that drains the board into a Spine counter.
Hold & Win: collector + flight choreography
Opens holding three 5.00 coins; a 10.00 lands, then a collector orb pulls a value clone out of every coin along bezier arcs, summing tick by tick. Next press resets with a column-wave sweep.
Static jagged shapes. non-uniform row counts fixed at build time.
Per-reel shape (pyramid)
Non-uniform reel set. 3-5-5-5-3 pyramid, diamond, half-pyramid. Static shape set at build time.
Pyramid shape with Spine
Same 3-5-5-5-3 pyramid, every cell a Spine 2D skeleton. Crisp at every per-reel cell size, with idle/landing/win/destroy animations baked in.
Per-spin row variation. each reel can land on a different row count between minRows and maxRows.
MultiWays
Per-spin row variation. each reel can land on a different row count between minRows and maxRows.
MultiWays cascade
Per-spin row variation on a strip-spin landing; cascade tumble pops winners and drops new symbols in from above. Shape-aware on every reel.
Sticky wild on MultiWays
Pin survives every MultiWays reshape. clamps when shape shrinks, restores to originRow when it grows back.
Single symbol that occupies an N×M block of cells. 2×2 bonuses, 3×3 giants, 1×3 bars.
Big symbols with Spine
Same 2×2 anchor mechanic, every cell a Spine skeleton. The bigWild reuses the regular wild rig. Spine scales it to the larger block without losing crispness.
MxN big symbols. every shape
Square 2×2, tall 1×3, giant 3×3, wide 2×4. one focused interactive demo per shape, with the placement logic spelled out.
Land a big symbol partially in buffer
A tall 1xH block lands with its anchor in bufferAbove. Only the bottom cell shows at row 0. Nudge to drag the rest into view. Works end-to-end through setResult, refill, nudge, and the cross-reel resolver.
Nudge a big symbol in, then hold it across a respin
A tall wild lands with its anchor in bufferAbove (tail-visible at row 0). Nudge the trigger reel to drag the full block into view, then call `spin({ holdReels: [...] })` so the revealed wild survives a respin of the other reels. The held strip is never touched.
Big symbol falls into view through a cascade
A tall wild lands with its tail peeking in from bufferAbove. The cells below the tail form a winning cluster, clear in the cascade, and the wild's anchor falls down through the strip into full visibility.
getBlockBounds. outline a big symbol
Draw a single rectangle that hugs an entire N×M block, regardless of which cell you pass. Works for 1×1 (equivalent to getCellBounds) and 1×N expanding wilds.
Sticky, expanding, walking, multiplier wilds. all powered by the pin primitive.
Sticky wild (CellPin)
Same sticky wild, built on the engine primitive. no ghost sprites, no manual grid injection.
Expanding wild
Wild lands, entire column becomes wild for N spins. auto-expires when the turn counter runs out.
Multiplier wild
Each wild carries a per-instance multiplier in its pin payload. a ×N badge overlays the cell.
Sticky-win respin
Winners lock for N respins while the rest of the grid spins independently. the Dead-or-Alive-II pattern.
Walking wild (movePin)
Walking wild migrating one column left each spin. engine-native reelSet.movePin(), no ghost sprites.
Mystery reveals, value coins, collectors, symbol upgrades.
Board primitive: build your own board
A reveal-and-collect prize grid built directly on the generic BoardGrid primitive — every cell spins independently to a result you choose, and the rule is yours. Hold & Win is just one opinionated board on the same primitive.
Hold & Win: live event trace
A board runs a full feature while every board.events beat prints to a live log — feature:enter, respin:start, cell:landed, coin:locked, respins:changed, respin:end, board:full / feature:end. The lifecycle, made visible.
Horizontal reel (paying-symbol banner)
A single one-row reel above the reels that spins, lands, and cascades. Same spin() / setResult(ColumnTarget[]) / SpinResult contract as ReelSet — one column — plus a real cascade that removes winners, collapses survivors, and refills from the feed side.
Hold & Win: sprite coins (no Spine)
The whole board from TexturePacker sprites — number symbols that blur as they spin and a 30-frame coin flip on land. The sprite path that ships most often, no skeleton runtime.
Hold & Win: multiplier-strike coin
A multiplier coin lands, the strike FX fires over it, a ×N badge pops in the game's multiplier font, and every coin's value is multiplied. The board never reads the multiplier.
Hold & Win: collector with particle streams
A collector lands and each coin's value flies into it on a bezier arc trailed by a stream of neon particles, ticking the total up. The board hands out geometry; the flight is yours.
Hold & Win: bonus cells
A few cells are marked bonus cells from the start; a coin that lands on one flashes the cell active and doubles its value. Positional rules are pure game state.
Hold & Win: mystery value coin
Coins land blank; on lock a strip of candidate amounts spins inside the coin face and decelerates onto the real value. The value lives in coin.data — the board never reads it.
Hold & Win: payer / doubler coin
A special payer orb lands and pumps its value into every other coin — a gold token arcs to each one and bumps it on arrival. One line changes it into a doubler.
Hold & Win: upgrade a coin in place
A held coin climbs the value ladder (5 → 10 → 25 → 50 → 100) with a flip-and-pop — no respin, no cell movement. The new tier lives in coin.data.
Hold & Win: count-up coin
Each coin's amount ticks up from 0.00 to its value as it settles, in a reading-order wave, instead of snapping to the number.
Hold & Win: fly to a feature meter
On collect, each coin's value flies UP into a meter above the reels (arriveScale shrink), ticking the total and filling a progress bar toward a target.
Hold & Win: row-complete jackpot
When a coin completes a full row, that row flashes coin by coin, the MINI plaque fires, and the row total flies up into it. Row detection is pure game logic.
Hold & Win: enter from the base game and back
A normal 5x3 spin that, on 3 BONUS, transitions in the same chain into the Hold & Win board, runs the feature, and swaps back to the base game on feature:end. Two display objects, one Spin button.
Hold & Win: drive each cell on its own
board.reelAt(cell) hands you the raw 1x1 ReelSet — start it, slam-stop it, read the symbol inside it, independently of every other cell.
Hold & Win: swap a symbol in place (coin → MINI → MAJOR)
board.setSymbolAt(cell, id, data) re-places one cell with a different symbol — a coin climbs the jackpot tiers — and rewrites its ledger entry, leaving every other coin where it was.
Hold & Win: an overlay that survives swaps and rides flights
A ×100 badge lives in coin.data, attached as a child of the symbol's view — so it survives an in-place swap (re-attached from data) and travels with the coin on a collect flight.
Symbol transform
A symbol morphs into a different (usually higher) one mid-round. winning lows upgrade to meds.
Value-carrying coin (Hold & Win)
Each coin carries a coefficient (×2 … ×50) in coin.data; the board locks hits and respins only the free cells natively — no pins, no hand-rolled grid. The ×N badge is painted from data, the total summed from board.lockedCoins.
Collector symbol
On the Hold & Win board, the collector orb absorbs its neighbours: walk board.lockedCoins, sum the adjacent coins, fly their values in and release() those cells. No pins.
Mystery reveal (CellPin)
Mystery symbols land, all reveal to the same random class via eval pins. auto-cleared at next spin.
Positional multiplier cells
Specific cells carry multipliers. any symbol that lands there boosts the win passing through.
Spine mystery reveal
Mystery bushes land, burst, and seamlessly uncover the round's shared symbol underneath.
Symbol layering - zIndex, unmask, promote
Three tiers of "draw my symbol on top" - within one reel, above every reel and the mask, and per-instance via the spotlight layer.
Drop physics, anticipation drops, removing winners.
Tumble feels. every preset
Five interactive canvases. same spin + cascade-refill, only .tumble({ fall, dropIn }) changes. Click each to compare feels.
Cascade refill orders
Four interactive canvases. same destruction, only the post-win refill ordering changes. Simultaneous, LTR wave, bottom-up, top-down.
Cascade anticipation refill
Two-stage refill: survivors slide down first, then a global anticipation beat for multipliers / mascots, then new symbols drop in column by column.
Lead-in delay before the fall
Four interactive canvases. same spin, only the gap between SPIN click and the first frame of fall-out varies. From 0 ms (instant) to 700 ms (dramatic).
Cascade wins. present, destroy, refill
Three canvases in a real round's order. WinPresenter plays the authored win first, then the destroy stage two ways (engine implode vs authored spine explosion), chained by runCascade.
Spin first, cascade after
Open every play with a classic strip-spin, then cascade the respins. one ReelSet, the per-spin mode override does the switch.
Highlight winning cells; draw your own paylines from events.
Slow a reel, slam-stop, near-miss, single-reel respin.
Hold & Win: last-cell anticipation
One builder knob slows the last still-spinning cell to a tension profile — the 'one more for the full board' moment. The recipe only listens to events.
Hold & Win: skip the whole feature
board.skip() slams every in-flight cell to its landed position and fires feature:skip; the game layer cuts its flights / collect short. feature:end stays the single "feature over" signal.
Anticipate a reel
Slow a specific reel to build tension before it lands.
Peek symbol from buffer-above
Pre-fill the buffer-above slot so a teaser symbol sits just out of frame, visible during scroll-in on the next spin.
Anticipation teaser
Pair setAnticipation with a buffer-above prefill so the next cell to scroll into view on a slow reel is a caller-chosen symbol.
Staggered / sequential anticipation
Tease reels one after another instead of all slowing at once.
Slowing anticipation
Each teasing reel crawls slower than the last, then stops exactly there.
Scatter-driven anticipation
Pick the tease reels straight from the result grid.
Anticipation in turbo
Keep the tease playing in Turbo / SuperTurbo with a duration override.
Skip the tease
Let the player slam through a long anticipation at any point.
Slam-stop
Let the player smash the button to land the reels now.
Scatter jaw anticipation
The rig's own near-win clips - the leftmost scatter snaps its jaw, holds the loop, and the rightmost lands the verdict.
Fake a near-miss
Place N-1 scatters plus anticipation on the reel that "almost" landed one.
Nudge a reel
After landing, shift one reel down or up by N positions to reveal caller-supplied symbols.
Spotlight after a nudge
Land a near-miss, parallel-nudge three reels to complete a wild line, then run SymbolSpotlight on the new winners. Chains nudge() and spotlight.show() in their canonical order.
Skip an in-flight nudge
reelSet.skipNudge(col) fast-forwards a running nudge tween to its landed position. The original nudge() promise resolves normally. success path still runs.
Abort a nudge
Cancel a running nudge via NudgeOptions.signal. Strip still snaps to landed; nudge() rejects with AbortError; nudge:cancelled fires on the bus.
Staggered nudge. wave reveal
Promise.all + NudgeOptions.startDelay dispatches every reel's tween concurrently with a per-reel offset. Total wall time is (cols.length - 1) * stagger + duration.
Nudge through a big symbol
A 1xH block on the target reel is nudged through as a unit. Survival formula enforced; cross-reel (w>1) blocks throw.
Pixel rects per cell; pointer-aligned overlays.
Cell bounds. overlays, paylines & hit areas
getCellBounds(col, row) returns the pixel rectangle of any visible cell. draw paylines, win outlines, or hit areas that align exactly with symbols.
Cell hit areas. click to pick, hover to preview
Attach pointer events to individual grid cells with getCellBounds. cursor turns to pointer on hover, click toggles a pick state.
Texture atlases, animated sprite sequences, AI-generated art.
Texture atlas symbols
Load sprite symbols from a TexturePacker atlas. one atlas file, 80+ frames.
Auto-baked motion blur (static spin)
Spin cached snapshot textures with a baked blur — no blur art, no runtime filters.
Spin static, not Spine
Live Spine skeletons at rest; cached snapshot textures while the reels spin.
Multi-skin Spine tiers on a compact grid
One skeleton per symbol tier (skins for each id) with static-spin blur, on a gapless 3-4-4-4-4-3 grid.
Bring your own blur textures
Hand-authored blur strips where you have them; auto-baked blur where you don't.
Horizontal strip motion blur
The same snapshot spin on a HorizontalReel — the smear follows the sideways travel.
Mid-spin mode swaps, frame middleware.