SlotMachine

SlotMachine renders deterministic spin-to-win reward reels for Expo and React Native apps. It is a presentation layer: resolve monetary or scarce rewards on your backend, then let luxy animate to predetermined symbols.

Basic slot

import { SlotMachine } from "@luxy-creative/slot-machine";

<SlotMachine outcome={outcome} symbols={slotSymbols} />;

Backend-resolved slot

<SlotMachine
  resolveOutcome={(context) => api.reserveSpinReward(context.interactionId)}
  symbols={slotSymbols}
  effects={{
    glass: true,
    paylineGlow: { color: "#FDE68A" },
    motionBlur: { maxOpacity: 0.34 },
    winParticles: { label: "Reward locked" },
    quality: "high",
  }}
  renderSymbol={(symbol, state) => (
    <RewardSymbol symbol={symbol} highlighted={state.isPayline} simplified={state.isSpinning} />
  )}
  onSpinComplete={(outcome) => analytics.track("slot_completed", { outcomeId: outcome.id })}
/>;

Core props

Prop	Purpose
symbols	Reusable symbol set for each reel.
reels	Optional per-reel symbol lists.
reelCount	Number of reels.
visibleRows	Number of visible symbol rows.
paylineRow	Row used for final payline highlighting.
symbolSize	Visual cell dimensions.
renderSymbol(symbol, state)	Custom symbol renderer.
renderSpinButton(state, actions)	Replaces the built-in spin button.
physics	Tunes cycles, stagger, velocity, stiffness, damping, and stop timing.
effects	Controls glass, payline glow, motion blur, win treatment, and quality.

Effects

effects={{
  glass: true,
  paylineGlow: { color: "#FDE68A", pulsing: true },
  motionBlur: { minVelocity: 8, maxVelocity: 42, maxOpacity: 0.34 },
  winParticles: { label: "Reward locked", pulseCount: 3 },
  quality: "auto",
}}

Reduced motion keeps the glass frame and static payline affordance, but disables motion blur, pulsing glow, and win pulses.

Reduced-motion fallback

<SlotMachine
  outcome={knownOutcome}
  symbols={slotSymbols}
  accessibility={{ reducedMotionBehavior: "instant" }}
  effects={{ motionBlur: false, paylineGlow: { pulsing: false }, winParticles: { pulseCount: 0 } }}
/>;

Reduced motion still resolves outcomes, fires callbacks, and shows the final reel state.

Callbacks

• onSpinStart()
• onOutcomeResolved(outcome)
• onReelStop({ reelIndex, symbol, outcome })
• onSpinComplete(outcome)
• onError(error)

Keep callbacks free of secrets or complete customer records. Log reward ids and interaction ids, not raw tokens or PII.