🎲

RNG React Components

A state-of-the-art suite of high-fidelity, visually stunning random number generator (RNG) and gaming-inspired UI components for React and TypeScript.

---

✨ 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