⚠️ Version 4.0.0 introduces a complete rewrite:

Replaced GSAP with native Web Animations API.

Changed spin configuration from stopSegment to targetAngle (degrees).

Removed segmentCount and blackout animation.

Introduced idle swaying animation (swayOptions).

If you're relying on the GSAP-based version, you can stay on version 3.1.0.

wheel-fortune

^{A lightweight, customizable spinning wheel component for web games and raffles}

^{2kB gzipped}

Demo

➤ Install

$ yarn add wheel-fortune

➤ Import

import WheelFortune from 'wheel-fortune';

➤ Usage

const wheelFortune = new WheelFortune({
  rootSelector: '.wheel-container',
  wheelSelector: '.wheel',
  triggerSelector: '.spin-button',
  spinStates: [
    {
      targetAngle: 90,
      callback: () => console.log('Landed on 90°!'),
    },
    {
      targetAngle: 225,
      callback: () => console.log('Landed on 225°!'),
    },
  ],
});

wheelFortune.init();

➤ Options

Option	Type	Default	Description
`rootSelector`	`string`	`–`	Selector for the root container element.
`wheelSelector`	`string`	`–`	Selector for the rotating wheel element.
`triggerSelector`	`string`	`–`	Selector for the spin trigger button.
`spinStates`	`SpinState[]`	`[]`	Array of spin results in sequence. Each includes a `targetAngle` and optional `callback`.

➤ API

Method	Description
`init()`	Initializes the wheel and event listeners.
`destroy()`	Cleans up animations and event listeners.
`reset()`	Resets the wheel to initial state.

➤ CSS States

The root element receives CSS class modifiers during runtime:

.{rootClassName}--spinning — while the wheel is spinning.
.{rootClassName}--completed — after spin is complete.
.{rootClassName}--first-done — after the first spin.
.{rootClassName}--final-done — after the final defined spin state.

You can use these classes to style the component based on its state.

➤ License

wheel-fortune is released under the MIT license.

Package detail

wheel-fortune

readme

wheel-fortune