I built a pixel art gacha game in vanilla JS that exports physical bead patterns

Lora | Tiny Bead — Tue, 31 Mar 2026 18:42:05 +0000

Hey everyone! Just wanted to share a side project I've been working on recently. It's called Tiny Bead.

Basically, I really like pixel art and the whole blind-box gacha mechanic, but I wanted to make something that connects back to the real world. So I built a web app where you can pull random pixel characters, mix and match their body parts in an editor, and—here's the main hook—it actually exports your custom character as a color-coded grid blueprint for Perler beads (or Hama beads). So you can literally craft the character you pulled in real life.

For the tech stack, I decided to skip heavy frameworks like React or Next.js and just went with:

Vanilla HTML/JS/CSS
Vite for the build process
A custom WebGL setup to handle the dynamic part rendering for the character assembler

It was honestly a fun challenge trying to get the WebGL canvas to generate clean, printable bead blueprints without relying on a ton of external libraries.

It's completely free to play in the browser without any login. If you want to mess around with it or check out how the export generation works:

Link to play: tinybead.com

Would love any thoughts on the UI, or if any of you are into bead crafting, let me know if the blueprints make sense!

DEV Community: Lora | Tiny Bead

I built a pixel art gacha game in vanilla JS that exports physical bead patterns