React Royale Spinner 👑

The Ultimate Wheel of Fortune Component for React.
Create engaging, premium-quality "Spin to Win" experiences with modern physics animations, procedural audio, and endless customization.

✨ Features

• 🎮 Physics-Based Animation: Powered by framer-motion for realistic acceleration, deceleration, and friction.
• 🎨 Premium Aesthetics: Built-in support for gradients, shadows, and glassmorphism. Defaults to a stunning "Gold & Luxury" theme.
• 🔊 Procedural Audio: Integrated Web Audio API engine generating "tick" and "win" sounds without large assets.
• 🎊 Celebration Effects: Automatic confetti explosion on win (powered by canvas-confetti).
• 🔧 Fully Customizable: Control every aspect—from rim colors to pointer design, fonts, and segment styles.
• 📱 Responsive & Accessible: scalable SVG graphics and ARIA support.

📦 Installation

npm install react-royale-spinner framer-motion canvas-confetti clsx
# or
yarn add react-royale-spinner framer-motion canvas-confetti clsx

🚀 Quick Start

import { SpinWheel, WheelItem } from 'react-royale-spinner';
import 'react-royale-spinner/dist/react-royale-spinner.css';

const items: WheelItem[] = [
  { id: 1, label: 'iPhone 15', color: '#e74c3c', textColor: '#fff' },
  { id: 2, label: '$50 Cash', color: '#f1c40f', textColor: '#000' },
  { id: 3, label: 'Free Spin', color: '#3498db', textColor: '#fff' },
  { id: 4, label: 'Better Luck', color: '#95a5a6', textColor: '#fff' },
];

function App() {
  return (
    <SpinWheel 
      items={items} 
      onSpinFinish={(result) => alert(`You won: ${result.label}`)} 
    />
  );
}

🎨 Professional Customization ("Gaming King" Theme)

Create a high-end casino or gaming feel with custom gradients and pointers:

<SpinWheel 
  items={items}
  size={500}
  // Gold & dark luxury theme used in casinos
  primaryColor="conic-gradient(from 0deg, #f1c40f, #b8860b, #f1c40f, #b8860b)"
  secondaryColor="radial-gradient(circle, #f1c40f, #b8860b)"
  rimStyle={{ 
      border: '8px solid #4a3b00',
      boxShadow: '0 0 30px rgba(241, 196, 15, 0.4)'
  }}
  pointerProps={{
      src: '/path/to/custom-jewel-pointer.png', // Or use style object for CSS shape
      style: { width: 60, height: 80, top: -30 }
  }}
  fontFamily="'Cinzel', serif"
/>

⚙️ Props API

| Prop | Type | Default | Description | |------|------|---------|-------------| | Core | | | | | items | WheelItem[] | Required | Array of segments (see WheelItem type). | | onSpinFinish | (item) => void | - | Callback fired when the wheel stops. | | size | number | 300 | Diameter of the wheel in pixels. | | spinDuration | number | 4 | Duration of the spin in seconds. | | Visuals | | | | | primaryColor | string | Gold Gradient | Background/rim of the wheel container. can be a gradient string. | | secondaryColor | string | Gold Gradient | Background of the center knob. | | rimStyle | CSSProperties | - | Override style object for the outer rim container. | | pointerProps | object | - | Customize the pointer { src, style, color }. | | Typography | | | | | fontFamily | string | Arial | CSS font-family for segment labels. | | fontSize | number | 14 | Font size (responsive auto-scaling available). | | textColor | string | #fff | Default text color if not specified in WheelItem. | | Features | | | | | disableSound | boolean | false | Turn off procedural sound effects. | | disableConfetti | boolean | false | Turn off the confetti celebration effect. | | Development | | | | | debugResult | number | - | Force a specific segment index (0-based) to win. |

WheelItem Type

interface WheelItem {
  id: string | number;
  label: string;
  color: string;      // Segment background color
  textColor?: string; // Optional override for this segment
  style?: CSSProperties; // Advanced style overrides
}

📜 License

Apache 2.0 © [Your Name/Company]

Built with ❤️ for the React Community.