Fun examples for the Blit-Tech pixel art engine.
Each demo shows a different feature of the engine. Source files in src/ use plain JavaScript with lots of comments
explaining how everything works.
Progressive learning: Use NNN-name file stems (e.g. demos/001-basics.html and src/001-basics.js).
The demos build on each other in numeric order; later pages assume you have seen the ideas from earlier ones.
- 001-basics -- Engine basics, lifecycle, bouncing square
- 002-primitives -- All primitive drawing: pixels, lines, rectangles
- 003-colors -- Color32 deep dive: named, hex, HSL, alpha, lerp
- 004-fonts -- Bitmap fonts, text rendering, measurement
- 005-pixel-art -- Programmatic pixel art with nested loops
- 006-patterns -- Mathematical art: spirals, Lissajous, waves, tunnel
- 007-camera -- Camera scrolling, world vs screen space, mini-map
- 008-sprites -- Sprite sheets, source rectangles, tinting
- 009-animation -- Tick-based animation, state machines, particles
- 010-sprite-effects -- Damage flash, silhouette, ghost, team colors, day/night
- 011-starfield -- Parallax scrolling starfield
- 012-tilemap -- Grid-based tile world with camera
- 015-palette-presets -- Six built-in color sets (VGA, CGA, C64, etc.) you can load instantly
- 016-palette-animation -- Change palette entries every tick for instant visual effects
- 017-palette-swap -- Switch the active palette at runtime to change color themes
- 018-flurry -- Retro screensaver: particle physics and palette animation (port of macOS Flurry)
- 019-palette-cycling -- Classic retro color rotation using palette cycling
- 020-palette-fade -- Smooth color transitions and flash effects with palette fade
- 013-image-output -- Frame capture and PNG export
- 014-game-scene -- Capstone: everything combined into a mini game scene
The demos require a WebGPU-capable browser:
| Browser | Version | Notes |
|---|---|---|
| Chrome/Edge | 113+ | Enabled by default |
| Firefox | 141+ (Windows) | Enabled by default; 145+/147+ on macOS; Nightly on Linux |
| Safari | 26+ | Enabled by default; Safari 18-25 available via Feature Flags |
You need both the blit-tech engine and blit-tech-demos set up as a pnpm workspace. See
docs/EXTERNAL-DEVELOPER-SETUP.md for the full setup guide.
Once the workspace is ready:
cd blit-tech-demos
pnpm install
pnpm devThis opens the demos at http://localhost:5173/demos/. Open numbered pages such as 001-basics.html from the file list
there.
ISC