✨ Features

• Premium Gaming Aesthetics: Sleek glassmorphism panels, glowing neon tracks, custom gradients, and modern typography tailored for high-end web applications.
• Precision Mathematical Synchronization: Instantly syncs and maps target inputs, multiplier rates, chance percentages, and slider thumb states in real-time.
• Fluid Micro-Animations: Powered by physics-based springs that provide visual confirmation for win/loss conditions, active roll sequences, and interactive dragging.
• Fully Responsive & Accessible: Optimized for touch inputs on mobile viewports and structured to maintain semantic accessibility standards.

🚀 Installation

Published on npm as @itme.day/rng-react-components.

npm install @itme.day/rng-react-components

🎨 Importing Styles

To ensure they render with premium visual glows, import the pre-compiled CSS bundle at the root of your application (typically in main.tsx or App.tsx):

import '@itme.day/rng-react-components/style.css';

🧩 Components Included

🪙 CoinFlip (minimal)

Click-to-flip 3D coin — the default export. No glass panel, stats, or history.

import { CoinFlip } from '@itme.day/rng-react-components';

<CoinFlip onFlipComplete={(landed) => console.log(landed)} />

| Prop | Type | Default | Description | |---|---|---|---| | onFlipStart | () => void | | Callback when the flip animation begins. | | onFlipComplete | (landed: CoinSide) => void | | Callback when the coin lands. | | onIsFlippingChange | (isFlipping: boolean) => void | | Flip phase changes. | | flipRequest | number | | Increment to trigger a flip from the parent. | | disabled | boolean | false | Disable interaction. | | animationDuration | number | 950 | Flip duration in ms. | | rng | Rng | Math.random | Injectable random source. |

🪙 CoinFlipConsole

Full composite with optional chrome. Enable header, history, rules, and prediction via props (all default false except showPrediction which defaults true).

import { CoinFlipConsole } from '@itme.day/rng-react-components';

<CoinFlipConsole
  showHeader
  showHistory
  showRules
  showPrediction
  onFlipComplete={(landed, isWin) => console.log(landed, isWin)}
/>

ClickToFlipCoin is deprecated — use CoinFlip.

A highly interactive, physics-based probability slider replicating high-stakes dice gaming tracks with real-time target adjustments, over/under toggles, and snappy win/loss outcome badges.

Props

| Prop | Type | Default | Description | |---|---|---|---| | onRollStart | () => void | | Optional callback when the roll animation begins. | | onRollComplete | (outcome: number, isWin: boolean) => void | | Optional callback triggered when the roll is finished. | | initialHistory | RollResult[] | [] | Initial roll history to calculate starting statistics. | | initialTarget | number | 50.00 | Starting roll target threshold. | | initialIsRollOver | boolean | true | Controls whether the game logic defaults to "Roll Over" mode. | | disabled | boolean | false | Whether the slider and input controls are disabled. | | className | string | '' | Optional CSS class name for the root element. | | minTarget | number | 0.01 | Minimum allowed target value. | | maxTarget | number | 99.99 | Maximum allowed target value. | | showHeader | boolean | false | Show session stats header. | | showHistory | boolean | false | Show roll history panel. |

🎡 RngWheel

A suspenseful spinning wheel component showcasing a wiggly pointer, real-time cycling multiplier center badge, and precise customizable win chance percentages.

Props

| Prop | Type | Default | Description | |---|---|---|---| | onSpinStart | () => void | | Optional callback when the spin animation begins. | | onSpinComplete | (isWin: boolean) => void | | Optional callback triggered when the spin settles. | | initialHistory | WheelSpinResult[] | [] | Initial spin history to calculate starting statistics. | | disabled | boolean | false | Whether the spin button and controls are disabled. | | className | string | '' | Optional CSS class name for the root element. | | spinDuration | number | 1500 | Spin animation duration in milliseconds. | | initialWinChance | number | 10.00 | Initial win chance percentage. |

🎯 Roulette

Color-based roulette console with red/black/green predictions, animated spins, optional stats header, history, and rules.

import { Roulette } from '@itme.day/rng-react-components';

<Roulette showHeader showHistory showRules />

🃏 21

Quick blackjack-style 21 console that deals player/dealer totals and tracks wins/losses with optional header, history, and rules.

import { TwentyOne } from '@itme.day/rng-react-components';

<TwentyOne showHeader showHistory showRules />

✨ TextFx

RuneScape-style chat text renderer: 13 colours (including rainbow and inverted) × 13 effects (waves, shakes, glow, flash, scroll, slide, mirror), with a copyable effect:colour:text tag.

TextFx is the minimal picker; TextFxConsole wraps it in a glass panel with an optional header.

import { TextFx, TextFxConsole } from '@itme.day/rng-react-components';

// minimal
<TextFx defaultValue="Nat 20!" defaultColor="rainbow" defaultEffect="wave" />

// with a header, and controlled
<TextFxConsole
  showHeader
  value={message}
  onChange={setMessage}
  onCopy={(tag) => console.log(tag)} // "wave:rainbow:Nat 20!"
/>

value, color, and effect are each independently controlled or uncontrolled.

Fonts. No font ships with this package, so the preview inherits the surrounding font by default. The effect is designed for a pixel/bitmap face — self-host one and pass it in:

<TextFx fontFamily="'Press Start 2P', ui-monospace, monospace" />

Storybook

Browse interactive component stories on GitHub Pages (deployed from main on each push).

npm run storybook          # dev server at http://localhost:6006
npm run build-storybook    # static output in storybook-static/

For a local build that matches the hosted subpath:

STORYBOOK_BASE_PATH=/rng-react-components/ npm run build-storybook

🤝 Contributing

We welcome open-source contributions to expand the suite of gaming/RNG components! Please check out the Contributor Guide to learn how to set up local dependencies and run interactive tests.

📄 License

MIT © 2026 Daylen Nguyen