luxy
Examples

Real luxy examples embedded from the showcase app

These previews use the Expo showcase web export at showcase.cetacea.city. Open the direct showcase link when you need the full demo surface, and validate native gesture, haptic, Skia, and screen-reader behavior in release builds.

Backend-resolved scratch ticket@luxy-creative/scratch-card / ScratchTicket. Quality gate: native.Open example

If the embedded Expo web preview does not load, open the example directly. Native release builds remain the source of truth for gesture feel, haptics, Skia performance, and screen-reader behavior.

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

<ScratchTicket
  resolveOutcome={(context) => api.reserveReward(context.interactionId)}
  game={{ type: "number-match", winningNumbers, yourNumbers }}
  layout={{ title: "luxy cash", topPrizeLabel: "WIN $20 OFF" }}
  cover="premium"
  scratcher
/>
Custom scratch card primitive@luxy-creative/scratch-card / ScratchCard. Quality gate: native.Open example

If the embedded Expo web preview does not load, open the example directly. Native release builds remain the source of truth for gesture feel, haptics, Skia performance, and screen-reader behavior.

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

<ScratchCard
  outcome={outcome}
  cover="foil"
  renderReveal={(outcome, state) => (
    <RewardCard outcome={outcome} progress={state.progress} />
  )}
  onRevealComplete={(outcome) => analytics.track("scratch_revealed", { outcomeId: outcome.id })}
/>
Backend-resolved slot machine@luxy-creative/slot-machine / SlotMachine. Quality gate: native.Open example

If the embedded Expo web preview does not load, open the example directly. Native release builds remain the source of truth for gesture feel, haptics, Skia performance, and screen-reader behavior.

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

<SlotMachine
  resolveOutcome={(context) => api.reserveSpinReward(context.interactionId)}
  symbols={slotSymbols}
  effects={{ glass: true, paylineGlow: { color: "#FDE68A" }, motionBlur: true }}
  renderSymbol={(symbol, state) => (
    <RewardSymbol symbol={symbol} highlighted={state.isPayline} simplified={state.isSpinning} />
  )}
/>
Coverage

What each example is meant to prove

Backend-resolved flows

Resolvers can show pending UI, settle once, and animate to a predetermined result.

Outcome docs

Reduced motion

Motion polish can step down without removing the reward flow or completion callbacks.

Accessibility docs

Configuration

Effects, layouts, physics, haptics, and callbacks stay explicit in code samples.

API reference