Live demo, no sign-up, no payment
Open a case, build a loadout, and see the odds hold up over a thousand tries.
This is a working miniature of the case opening mechanic design and loadout builder interface design QUEUE STUDIO ships for gaming and esports clients — running for real in this page, not a screenshot or a video of one.
What this is: a demonstration of the interface pattern behind drop rate odds ui design and in-game inventory ui design. No real item, currency or gambling product is involved anywhere on this page, and nothing here is a purchase.
What a shipped build adds: a real item catalogue, account authentication, and the payment or payout rails that sit behind these same screens once a client takes them live.
Case opening simulator
| Tier | Contains | Odds |
|---|---|---|
| Common | Standard finish, no visual effect | 60% |
| Uncommon | Alternate finish with a minor pattern | 27% |
| Rare | Animated finish, low drop rate | 10% |
| Legendary | Signature finish, lowest drop rate | 3% |
| Total | 100% | |
Every open rolls against the percentages in the table above and lands one item in the inventory grid below.
Inventory
0 itemsNothing opened yet. Use "Open case" above to win the first item for this grid.
Loadout builder
Saving keeps this loadout in this browser only, so it survives a reload. Exporting builds a JSON file of the loadout and the full inventory and downloads it to this device — nothing is sent to a server.
Odds check, 1,000 openings
This runs the same weighted roll used by "Open case" thousands of times without the reveal animation, so the stated odds can be checked against the actual distribution rather than trusted on faith.
- Common
- — Stated 60%
- Uncommon
- — Stated 27%
- Rare
- — Stated 10%
- Legendary
- — Stated 3%
This resets everything the demo has stored in this browser — the inventory grid, the loadout slots and the last simulation. It does not affect anything on a client project.
Why a studio demo runs the real mechanic instead of a mockup
A screenshot of a case-opening screen cannot show whether the reveal timing feels slow, whether the odds table matches the roll, or whether a drag-and-drop loadout builder actually catches a dropped item on a 360px phone screen. Clicking a real button and watching a real number change is the only way to judge any of that, which is why every engagement at QUEUE STUDIO opens with a prototype like this one rather than a set of flat comps.
The four features running above are the same four a client's build needs at minimum: a weighted roll against a stated table, a place for what was won to live, a way to equip it, and a way to check the math. What a shipped build adds on top is a real item catalogue tied to a game's actual economy, account authentication so an inventory belongs to one player, and the payment or payout rails that move real value in and out — none of which can or should run inside a marketing page.
Nothing here uses a placeholder image standing in for an item. Every item name and tier in this inventory is generated by the script that runs the odds roll, and every colour and label follows the same interface language — flat panels, tabular numerals, one signal colour — used across the rest of this site.
What is running under the page
The case-opening roll, the inventory grid, the drag-and-drop loadout slots, the 1,000-run simulation and the JSON export all run in plain JavaScript in this browser tab, with no server call and no account required. The simulation draws its bar chart on an HTML canvas element, comparing the stated table against the actual outcome of the run currently displayed.
"Save loadout" writes the three equip slots to this browser's local storage, so the same loadout is still there after a reload of this page on this device. "Export as JSON" builds a file in memory from the current loadout and inventory and triggers a direct download — nothing is sent to a server, and nothing is stored anywhere except this browser, on this device, until it is cleared.
Data stored by this page — inventory, loadout and any saved state — stays in this browser's local storage. It is never transmitted anywhere and it is separate from cookie-consent storage covered on the cookies page. Clearing this browser's site data removes it.
Ready to scope the same pattern against a real item set? The Inventory & Loadout UI and Case & Drop Mechanic Design services on the homepage cover exactly this build.
See the full catalogue