Tiny casino games for any website.

Install

Add the script once, anywhere on the page, then put a game wherever you want it.

The games size themselves to their container (up to 560px wide by default) and work on phones. Each game's code only downloads when a page actually uses it, so one game costs about 15 KB (compressed), sounds and effects included.

No layout jump: each game reserves about its own height while it loads. With defer the page can paint for a moment before the script runs; if that matters to you, put the script tag right before your first game without defer, or reserve the space in your own CSS: chip-plinko:not(:defined){display:block;min-height:700px}.

URL	Use it when
/v1/chiplets.js	You want fixes and new games automatically. Nothing in v1 will break your page.
/v/chiplets.js	You want this exact version, frozen forever.
/v1/chiplets.all.js	You'd rather have every game in one file (about 21 KB) than load them on demand.

Elements

Element	Attributes
<chip-slots>	symbols — six comma-separated emoji or image URLs, most common first.
<chip-plinko>	rows 8–16 (default 12), risk low · medium · high.
<chip-mines>	mines 1–24 (default 3), gem, bomb — emoji or image URL.
<chip-crash>	auto — default auto cash-out multiplier (e.g. 2.5).
all games	bet default bet · accent any CSS color · theme="light" · label custom title · currency / icon override · sound="off" silences this game · no-auto hides autoplay · turbo starts in turbo · no-footer

Site-wide options

Set these as data- attributes on the script tag. They apply to every game on the page.

Attribute	Default	What it does
data-currency	Chips	Name shown next to balances.
data-icon	●	Emoji or image URL for the currency.
data-start	1000	Starting balance, and what Refill tops back up to.
data-bet	10	Default bet.
data-max-bet	100000	Largest single bet.
data-storage	default	Wallet name. Use different names to keep separate wallets on one domain.
data-sound	on	off starts every game muted. Visitors can still switch sound on with the speaker button.

Controls

Click or tab into a game, then:

Key	Does
Space	The main button: spin, drop, bet, start, cash out, or start/stop autoplay.
Enter	Same, from the game card or straight from the bet box.
M	Sound and vibration on/off — for every game, remembered between visits.
T	Turbo on/off (Slots, Plinko).
Arrow keys	Move between tiles in Mines; Enter or Space opens one.

Autoplay (Slots, Plinko, Crash): pick how many rounds, and optionally stop at a profit target, a loss limit, or a single win of a certain size. The main button turns into Stop while it runs. Crash autoplay needs an auto cash-out.

Sound is made in the browser (no audio files) and only starts after a visitor taps a game. Vibration works on Android phones. For visitors who've asked their device for reduced motion, effects, shaking and vibration switch off and animations get short.

Events

Every finished round fires chiplets:result, plus chiplets:win or chiplets:lose. They bubble, so one listener on document hears every game. Hook them up to confetti, sounds, badges, or your own leaderboard.

document.addEventListener('chiplets:win', (e) => {
  // e.detail = { game, bet, payout, profit, multiplier, balance, currency, ... }
  console.log(`Won ${e.detail.profit} at ${e.detail.game}`);
});
document.addEventListener('chiplets:balance', (e) => updateMyHeader(e.detail.balance));
document.addEventListener('chiplets:auto', (e) => {
  // e.detail = { game, state: 'start' | 'stop', reason, rounds, net }
});

Rounds played by autoplay have auto: true in their details.

Theming

The quick way is accent and theme. For full control, set CSS custom properties on the element or any parent.

chip-mines {
  --chip-accent: #ff5c00;   /* buttons, highlights */
  --chip-bg: #101010;       /* outer card */
  --chip-panel: #1a1a1a;    /* game area */
  --chip-fg: #fff;  --chip-muted: #999;
  --chip-win: #22c55e;  --chip-lose: #ef4444;
  --chip-radius: 8px;  --chip-font: "Your Font", sans-serif;
  --chip-max-width: 420px;
}

Each game also exposes ::part(box), ::part(stage) and ::part(balance).

JavaScript API

Chiplets.wallet.balance        // current balance
Chiplets.wallet.give(500)      // reward a visitor (daily bonus, quiz answer…)
Chiplets.wallet.take(50)       // spend on something of yours; false if they can't afford it
Chiplets.wallet.refill()       // top up to the start balance
Chiplets.wallet.reset()
Chiplets.wallet.stats()        // { balance, played, wagered, returned, refills }
Chiplets.config({ currency: 'Tokens', icon: '🪙' })
Chiplets.sound.muted = true    // or Chiplets.sound.toggle()
Chiplets.odds.plinko(12, 'high')   // { multipliers: [...], rtp }
Chiplets.odds.mines(3)             // payout after each safe tile

The math

Every game is tuned to return 99% of what's bet over the long run. Randomness comes from the browser's crypto.getRandomValues.

Game	How it works
Slots	Three reels of 64 stops with weighted symbols. Three of a kind on the middle line pays; multipliers are scaled so the expected return is 99%.
Plinko	The ball goes left or right at each row with even odds, so buckets follow a binomial curve. Multipliers grow toward the edges and are scaled to 99% for every row count and risk level.
Mines	Payout after k safe tiles is 0.99 ÷ (chance of surviving k picks). Cashing out at any point is worth the same 99% on average.
Crash	The crash point is drawn so the chance of reaching x is 0.99 ÷ x. Whatever target you pick, the long-run return is 99%. Max 1,000×.

Effects never change the odds. Every result is decided the moment you play. When the last slot reel slows down because the first two match, it's landing where the draw already put it — suspense is decoration, never a fake near-miss.

FAQ

Can visitors cheat?

Yes — it all runs in their browser, so anyone with dev tools can give themselves a billion chips. That's fine for play money. Don't hang anything valuable off a client-side balance.

Does it collect any data?

No. The only requests are the game files themselves, from chiplets.win. Nothing about the visitor is sent anywhere. Balances are stored in the visitor's own browser under chiplets:* keys.

Will the balance follow visitors between my sites?

No — browsers keep storage per domain, so each site has its own wallet. Within one site, every page shares it.

Does it work with React / Vue / WordPress?

Yes. They're standard custom elements: load the script, then render <chip-plinko> like any other tag. In WordPress, paste the snippet into a Custom HTML block.