There's a PC party game called Meccha Chameleon where hiders paint their body to match a wall or a crate and freeze, while seekers try to spot them. I got a bit obsessed with the camouflage idea and built two small things around it.
The first is a camo "lab": pick a surface and it hands you the exact colours, a pattern, and a pose. Under the hood it's one inline SVG chameleon whose fills are driven by a per-surface palette. Recolouring an inline SVG with a few variables turned out far simpler than generating images, and each surface is a tiny data object (three hex colours, a pattern, a blend score), so adding one is a one-line change.
The second is an actual playable minigame: a grid of tiles, a few of them hiding a chameleon painted to match its tile, and you tap to find them before the timer runs out. It's all React state, no canvas and no engine, which kept it tiny and instant to load.
It runs as a Next.js app on Cloudflare Workers via OpenNext, a nice combo for a mostly-static site with a couple of client tools: static pages cache at the edge while the interactive bits hydrate on the client.
If you want to poke at it, the Camo Lab is here and the browser game is here. Happy to answer anything about the SVG recolour or the OpenNext setup.
Top comments (0)