Spot

Pixel animation editor — draw, sequence, and export frame-by-frame animations.

Built with Next.js, React 19, Zustand, and Tailwind CSS v4.

Getting Started

bun dev

Open http://localhost:3000/animator to use the editor.

Commands

bun dev      # Start development server
bun build    # Production build
bun start    # Start production server
bun lint     # Run ESLint

How It Works

The editor has a three-panel layout:

• Left — Sequence list: create and switch between named animation sequences
• Center — Drawing canvas + live preview
• Right — Frame strip: add, reorder, and delete frames

All state is client-side (Zustand). Use Export to save your animation as JSON and Import to restore it.

Packages

This repo also contains @sansalgo/spot-player — a lightweight React component for playing back Spot animations in any React app.

npm install @sansalgo/spot-player

Tech Stack

• Next.js 16
• React 19
• Zustand 5
• Tailwind CSS v4
• Radix UI + shadcn/ui
• Phosphor Icons
• Bun