dndie.com

DnDie is my ode to tabletop nights. A browser-based dice roller that lets you toss D4 through D20 dice with convincing physics, shiny materials, and an interface that works just as well on a phone as it does on a battle-station monitor. From the first button tap the app feels like a purpose-built tool—no clutter, just your favorite dice lined up in a tidy tray and ready for action. The layout stays fully responsive, keeping controls precise across mobile, tablet, and desktop breakpoints.

What I built

• A complete dice toolkit. Every polyhedral standard (D4–D20) gets its own control, so you can mix dice combinations without swapping screens or tabs.
• An opinionated yet friendly UI. The persistent side menu pairs reroll/clear controls with quick access to About and Settings dialogs, so players never dig through nested menus mid-session.
• Responsive by design. The layout fluidly adapts to different screen sizes, ensuring usability on phones, tablets, and desktops alike.
• Deep customization. The settings modal exposes toggles for physics speed, “freeze dice” convenience, background themes, D6 face styles, and per-die color pickers—perfect for matching your party’s vibe.

Stack choices

• Three.js + Cannon-es. The rendering pipeline leans on Three.js modules loaded through a CDN import map, while the Cannon-es physics engine is dynamically imported so it only loads when the scene is ready.
• Modular dice definitions. Each die type has its own module (D4–D20) with spawn profiles, materials, and roll behavior, all orchestrated from main.js so UI actions translate directly into 3D objects and rigid bodies.
• Scene scaffolding. scene.js handles camera, renderer, OrbitControls, and layered lighting to keep the dice legible even when you change backgrounds or zoom in tight.

Interaction and immersion details

• Cinematic environment. A textured wooden tray, invisible wall extensions, and tuned friction/restitution settings keep dice bouncing believably without flying off the table.
• Dynamic backgrounds & dice palettes. Background themes adjust lighting colors, clear colors, and light intensities, while curated color presets keep dice readable; both systems run off the same configuration map so tweaks stay consistent.
• Smart spawning. Each throw picks a spawn position and entry vector that avoids overlapping dice and varies height, radius, and spin so rolls never feel canned.

Shipping it

The project stays lightweight by skipping heavyweight frameworks in favor of plain JavaScript, then bundling/minifying with an esbuild-based script (plus fast-glob and html-minifier-terser) for production drops. Assets are all static, so deploying to any CDN or static host is as easy as running npm run build and uploading the output.

In short, DnDie is a tactile, customizable dice tray that lives in the browser—perfect for remote campaigns, con tables without enough physical dice, or anyone who just enjoys watching a perfect crit tumble across their screen.