punktraster

A preloader drawn on one canvas instead of one node per tile. Configurable rows, columns, tile shape, and animation pattern, with a single animation frame driving every instance on the page.

Install

npm install punktraster

import { createGridLoader } from "punktraster";

createGridLoader(canvas, { rows: 5, cols: 5, pattern: "helix" });

See it

Why it stays cheap

• One shared ticker. Every live instance shares a single animation frame.
• One baked sprite. The tile is drawn once and blitted, so antialiasing is computed once rather than for every tile on every frame.
• A lookup table. Brightness costs one add, one multiply, one mask, and one array read per tile. No allocation, no branch.
• It stops when unseen. Instances pause in a hidden tab and while scrolled out of view.