pixi-wheels

Bonus wheels, ready to spin.

A fluent wheel engine for PixiJS v8.
From npm install to a spinning, baiting, landing wheel in ten lines.
Typed events, headless tests, MIT.

Get startedBrowse recipesOpen the studio
$npm i pixi-wheels

One fluent builder, one typed event stream.

  • One import. WheelBuilder wires geometry, motion, pointers and skin.
  • Server-driven. spin() starts the wheel; setResult() decides where it lands. The math stays on your server.
  • Feel, not tweens. the stop is planned from the cruise speed, so there is no jerk when the result arrives.
  • Tests in Node. a fake ticker runs the whole spin without a renderer.
Build your first wheel
your-first-wheel.ts
import { WheelBuilder, SpinPresets } from 'pixi-wheels';

const wheel = new WheelBuilder()
  .radius(260, 40)
  .sections([
    { id: 'x2',  label: 'x2',  value: 2,  weight: 3 },
    { id: 'x5',  label: 'x5',  value: 5,  weight: 2 },
    { id: 'x10', label: 'x10', value: 10, weight: 1 },
    { id: 'x2b', label: 'x2',  value: 2,  weight: 3 },
    { id: 'x50', label: 'x50', value: 50, weight: 0.5 },
  ])
  .speed('normal', SpinPresets.NORMAL)
  .ticker(app.ticker)
  .build();

const spin = wheel.spin();                       // wind up and cruise
const response = await api.spinWheel();          // your server decides
wheel.setResult({ value: response.multiplier }, {
  anticipation: { bait: 'x50' },                // almost the big one...
});
const result = await spin;                       // ...lands on x10

The parts of a bonus wheel you would have to build anyway.

Fluent builder

Sections with unequal arcs, pointers, skins, rings and speed profiles in one chain. Validated on build().

Planned stops

The deceleration starts at the cruise speed and lands exactly where the server said: centre, random, or an exact angle. Then settle or bounce.

Anticipation

Creep over the line, stutter on it, or stall just short of the jackpot. The wheel stops once, on the result. Bait the player with one section, land on another.

Dynamic sectors

Arc shares that move step by step while labels re-centre. Cosmetic states, no math coupling.

Rings and idle

An outer ring that triggers an inner one read by an inward pointer. A small wheel idling beside the reels until the feature fires.

Typed events

spin:cruise, pointer:tick, anticipation:bait, spin:landing. Every sound and Spine reaction has a hook.

Headless testing

createTestWheel + FakeTicker run whole spins in Node. No renderer, no timers, no flakes.

Debug view

A plain graphics skin, an overlay with angles and the planned legs, an ASCII arc, and a window handle for agents.

Studio art in the recipes

The textured and Spine wheels on this site run on production assets provided by these studios.