See the engine in action

Example 01

A tribute to the 2005 classic: one million pixels sold as a 100×100 grid of 10×10-pixel blocks. Ads of different sizes are cropped from a single spritesheet, hovering reveals the advertiser, and clicking an ad opens its link — pan and zoom across the whole board.

Example 02

A ticketing-style seat map: ~1,100 seats in three price tiers around a stage. Hover shows the seat and price, clicking selects it, and the header keeps a running total — zoom in to pick your exact seat. The kind of dense, clickable surface the engine was built for.

Example 03

Three transit lines drawn with the Path primitive, stations as circles, and labels as world-space text. Click any station and the camera flies to it with goCoords — interchanges merge automatically from the line data.

Example 04

Pan across a huge world and zoom from overview to tile detail while a synced minimap tracks the camera. Viewport culling keeps frame rates flat no matter how large the map gets.

Example 05

Every pointer event snaps to the grid, strokes paint into layers, and only the tiles that changed get redrawn. The coordinate conversions that make editors fiddly to build are handled by the engine.

Example 06

Thousands of cells update in real time, with tile colors driven straight from the data. A second synced camera powers the minimap in a few lines of code.

Example 07

Frames are sliced straight out of a spritesheet and flipped by fps-gated animators while a custom loop mutates positions — wings flap at 8 fps, movement runs at 60. Click anywhere and the nearest dragon flies there.

Example 08

The same draw API runs headless in Node.js — no browser, no DOM. The PNG is generated live by this site's own API route with renderToBuffer. Perfect for OG images, thumbnails, and CDN pre-rendering.