v0.9.2 • Motion • 12kb gzipped • MIT
SpriteJS
A tiny sprite engine for canvas, with atlas packing and a frame loop that keeps its promises.
// why spritejs
A frame loop you can trust
Fixed-step updates with interpolated rendering, so behaviour stays identical whether the display runs at 60 or 144 hertz.
// stack
Atlas-aware
Packs sprite sheets at build time and looks frames up by name at runtime. No manual coordinate tables.
SpriteJS started as a single file in a client project and stayed small on purpose. It does one job, it does it in 12kb gzipped, and it has no runtime dependencies.
Getting started
Install it, import it, call it:
npm i spritejs-jsFixed-step updates with interpolated rendering, so behaviour stays identical whether the display runs at 60 or 144 hertz.
What it does not do
It does not manage your state, style your components or ship a plugin system. Those are your decisions, and keeping them out is what keeps the bundle honest.
- Fixed-step updates
- Named atlas frames
- MIT licensed, commercially friendly
Features
Fixed-step updates
Physics and animation stay deterministic regardless of refresh rate or a slow frame.
Named atlas frames
Reference frames by name; the packer resolves coordinates during the build.
Compositor friendly
Animates transform and opacity only, so nothing triggers layout.
Fully controllable
Play, pause, reverse and seek, all from a plain object.
Respects reduced motion
Reads the user preference and falls back to an instant state change.
ESM and types
Ships module and CommonJS builds with hand-written type definitions and source maps.
Get SpriteJS v0.9.2
8 files • .min.js 12kb • .zip 55kb • sha384 verified
Changelog
- Fixed-step loop with interpolation
- Atlas packer handles rotation
- Batched draw calls
- Safari 16 compatibility fixes
- Bundle size reduced by eleven percent
- Improved error messages for invalid options
- Added twenty regression tests
// related
Related products
ChartForge
Canvas charts in twelve lines. Responsive, accessible and dark-mode ready, with no D3 learning curve.
View →MotionEase
Physics-based micro-animations with a single call. Spring curves that feel right without a tuning session.
View →FormFlow
Validation and multi-step logic that works the same in React, Vue and vanilla. Your markup stays yours.
View →Make it move today.
MIT licensed. Commercial friendly. Five-minute setup.