⚠️ 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.