MASONSPRITE
v0.1.0

mason-sprite.com

Sprite Sheet
Animation

Play PNG & WebP sprite sheets in React, Vue, and Svelte. CSS or Canvas renderer — just set rows, cols, and fps.

Try Demos → npm install mason-sprite
SCROLL DOWN
1.

Sprite Sheet Playback

Animate any PNG or WebP sprite sheet by defining a grid with rows and cols. Frames play left-to-right, top-to-bottom — exactly how artists export them.

PNG / WebP
2.

Dual Renderer

Choose CSS background-position for zero-JS rendering, or switch to Canvas for pixel-perfect control. Same API, same props — pick what fits your project.

CSS · Canvas
3.

Framework-Ready

First-class components for React, Vue, and Svelte. Import from mason-sprite/react, mason-sprite/vue, or mason-sprite/svelte — each with idiomatic APIs and ref controls.

React · Vue · Svelte
4.

Playback Controls

Imperative play, pause, and stop via component refs. Set loop, fps, and display size with simple props — no animation library required.

play · pause · stop
5.

Lightweight Core

Built on a small pure JavaScript engine with tree-shaking support. Only the renderer and framework adapter you import end up in your bundle.

Tree-shaking
6.

Simple Integration

Drop in a <Sprite /> component with src, rows, cols, and fps. Works with any bundler that supports modern ESM — Vite, Next.js, Nuxt, and more.

ESM

INTERACTIVE

Try it in Demos

Test sprite playback in real-time across frameworks. Compare CSS and Canvas renderers, explore code examples, and control animation with play / pause / stop.

React mason-sprite/react Vue mason-sprite/vue Svelte mason-sprite/svelte
npm install mason-sprite
DEMOS