Slots, Plinko, Mines and Crash as drop-in web components. No sign-in, no server, no real money — paste two lines and your site has an arcade.
Every game on a page shares the same play-money balance, saved in the visitor's browser. Win at Plinko, spend it in Mines. Go broke and hit Refill.
Plain web components. Works with any site: static HTML, WordPress, React, Astro. No build step, no dependencies.
Accent color, light or dark, your currency name and icon, even your own slot symbols — all with attributes.
No accounts, no tracking, no cookies. Balances live in localStorage. Every game returns exactly 99% on average.
Tweak it, try it, copy the snippet. What you see is exactly what lands on your site.
Everything there is to know fits on one page.
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.
| 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 · no-footer |
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. |
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));
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).
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.odds.plinko(12, 'high') // { multipliers: [...], rtp } Chiplets.odds.mines(3) // payout after each safe tile
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×. |
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.
No. There are no requests after the script loads. Balances are stored in the visitor's own browser under chiplets:* keys.
No — browsers keep storage per domain, so each site has its own wallet. Within one site, every page shares it.
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.