Sprite Motion Lab

English | 中文

A local-first browser editor for detecting, refining, previewing, and exporting animation frames from two-dimensional sprite sheets.

Highlights

• Detects multi-row and multi-column sprite grids with background, alpha, and projection analysis.
• Snaps suggested cuts toward nearby projection valleys while keeping every frame directly editable.
• Clicks a dense frame to zoom and center it, then drag the frame or its eight handles to refine the crop.
• Previews ordered playback and supports row, column, serpentine, and reverse ordering.
• Exports CSS packages, PNG sheets, frame ZIPs, GIF, APNG, WebP, and capability-dependent WebM.
• Keeps source pixels and export processing entirely in the browser. No image upload endpoint exists.
• Provides complete Chinese and English routes without discarding the current in-memory project.

Try It Locally

Requirements: Node.js 20 or newer and npm.

npm install
npm run dev

Open the URL printed by Vite. The application selects a language at / and exposes shareable editor routes:

• /en/create
• /zh/create

Verification

Run the full repository gate before publishing:

npm run check

The command runs structure checks, TypeScript, tests, a production build, text hygiene, locale-key parity, documentation checks, plan checks, and release-evidence validation.

Netlify Deployment

The included netlify.toml configures:

• build command: npm run build
• publish directory: dist
• Node.js 22
• SPA fallback for direct refreshes on /en/create and /zh/create
• immutable caching for fingerprinted Vite assets and no-cache HTML

Connect this repository in Netlify and deploy with the repository configuration. No environment variables or server functions are required.

Input And Export Support

Input images:

• PNG
• WebP
• JPEG
• up to 25 MB, 8192 px on either axis, or 32 megapixels

Exports:

• CSS bundle with PNG strip, animation CSS, example HTML, README, and project JSON
• PNG sprite strip
• PNG frame sequence ZIP
• GIF and APNG animation
• animated WebP
• WebM when the browser exposes a compatible encoder

Project Structure

src/App.tsx              Editor workflow and UI
src/lib/sprite.ts        Detection, geometry, ordering, and project model
src/lib/export.ts        Local export encoders and artifact validation
src/workers/             Off-main-thread detection
src/locales/             Chinese and English resources
tests/                   Detection and export regression tests
docs/                    Architecture, decisions, and release evidence context

See docs/index.md for architecture and engineering documentation.

Limitations

• Automatic detection targets roughly periodic two-dimensional sheets; irregular, heavily corrupted, or clipped edge cells may need manual correction or disabling.
• WebM export depends on browser MediaRecorder support.
• The versioned project model intentionally excludes source image bytes.

License

No open-source license has been specified yet. All rights remain with the repository owner unless a license file is added.