ScratchTicket

ScratchTicket is the high-level ticket/gameplay component from @luxy-creative/scratch-card. Use it when you want built-in ticket layouts, scratch zones, gameplay presets, cover materials, and optional scratcher-tool visuals.

Basic ticket

import { ScratchTicket } from "@luxy-creative/scratch-card";

<ScratchTicket
  outcome={outcome}
  game={{ type: "number-match", winningNumbers, yourNumbers }}
  layout={{ title: "luxy cash", topPrizeLabel: "WIN $20 OFF" }}
  scratcher
/>;

Gameplay presets

Game	Purpose
number-match	Winning numbers, your numbers, prize per play, and optional bonus entries.
symbol-grid	Grid cells with row, column, diagonal, or custom pattern helpers.
bonus-reveal	Instant-win, multiplier, or mystery bonus spots.
custom	Caller-supplied zones, metadata, renderers, and optional preview evaluator.

Layout presets

• classic-number-match
• compact-ticket
• grid-game
• custom

Backend-resolved ticket

<ScratchTicket
  resolveOutcome={(context) => api.reserveReward(context.interactionId)}
  game={{
    type: "number-match",
    winningNumbers: [7, 12, 21, 34],
    bonusEntries: [{ id: "bonus-1", value: "BONUS", bonusSymbol: "BONUS", prize: { label: "Free shipping" } }],
    yourNumbers: [
      { id: "your-1", value: 7, prize: { label: "$20 off" } },
      { id: "your-2", value: 18, prize: { label: "Try again" } },
    ],
  }}
  layout={{ preset: "classic-number-match", title: "luxy cash" }}
  cover="premium"
  scratcher
/>;

Assets

Asset slots use expo-image source values.

Slot	Purpose
background	Full ticket background image.
logo	Brand mark or merchant logo.
revealedZone	Optional revealed zone art.
unrevealedZone	Optional covered zone art.
coverPattern	Decorative play-surface pattern.
footer	Footer art.
serial	Serial/validation art.
symbolAssets	Symbol id to image-source map.

Effects

<ScratchTicket
  outcome={outcome}
  cover="premium"
  effects={{
    particles: { maxParticles: 72 },
    shader: "auto",
    sparkle: { maxSparkles: 18, opacity: 0.9 },
  }}
  layout={{ title: "luxy cash", topPrizeLabel: "Foil coupon reveal" }}
  scratcher
/>;

Reduced motion disables shimmer, dust particles, sparkle glints, and animated flourish, but it does not disable revealing or callbacks.

Core props

Prop	Purpose
game	Selects typed gameplay and zone generation.
layout	Selects or configures the ticket frame.
assets	Supplies ticket images and symbol art.
theme	Overrides ticket colors.
cover	Selects matte, foil, premium, a React node, or a render callback.
scratcher	Enables and configures the bundled scratcher-tool visual.
effects	Controls particles, sparkle, shader fallback, foil, and quality.
renderZone	Customizes zone content.
renderFrame	Customizes the whole ticket frame.
onZoneProgress	Receives per-zone progress.
onZoneReveal	Receives per-zone reveal completion.