8×8×8×8

A pixel art animation editor for creating 8×8 pixel animations with 8 frames and an 8-color palette.

🎨 Try it live!

Features

• 8×8 pixel grid for drawing with drag-to-paint support
• 8 animation frames with frame-by-frame editing
• 8-color palette with customizable colors
• Advanced URL compression - 70-90% reduction with smart format selection (see ENCODING_FORMATS.md)
• URL-based sharing - entire animation encoded in URL hash
• Animated preview at 8 FPS
• Animated favicon that matches your creation
• Single-file output - no external dependencies
• Hardware export - export animations to microcontroller (Seeeduino XIAO + WS2812B LED matrix)
• Public gallery - submit your animations to a shared gallery (requires Firebase)
• Google authentication - sign in to submit animations
• Submission queue - track your submitted animations (up to 8 pending, unlimited approved/rejected)
• Admin review - approve or reject submissions (admin only)

Development

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build for production
pnpm build

# Format code
pnpm format

Firebase Functions

# Build functions
pnpm functions:build

# Deploy functions
pnpm functions:deploy

# View function logs
pnpm functions:logs

# Deploy everything (client + functions)
pnpm deploy

Hardware / Microcontroller

Export your animations to physical LED hardware!

Hardware Requirements:

• Seeeduino XIAO (SAMD21 microcontroller)
• WS2812B 8×8 LED matrix
• USB-C cable

Workflow:

1. Create animation in web app
2. Copy hex string from Info Modal → Hardware Export
3. Add to seeduino_xiao/animations.txt
4. Build and upload:

# Build and upload firmware
pnpm pio:build-upload

# Build, upload, and monitor
pnpm pio:all

See PLATFORMIO_SETUP.md for detailed hardware setup, wiring diagrams, and animation workflow.

Firebase Setup (Optional)

The gallery feature requires Firebase. The app works fully offline without it.

Requirements: Firebase Blaze plan (requires credit card, but expected cost is $0/month for typical usage)

• See FIREBASE_SETUP.md for step-by-step setup instructions
• See COST_SAFETY.md for detailed cost analysis and budget protection

Don't want to add a credit card? Free alternatives available - see COST_SAFETY.md for Cloudflare and Supabase options.

Tech Stack

• Preact - Lightweight React alternative (3KB)
• TypeScript - Type safety
• Vite - Build tool with single-file output
• Canvas API - Rendering animations
• Compression Streams API - Gzip compression for URL optimization
• Firebase - Hosting, authentication, Firestore database, Cloud Functions

Documentation

• ENCODING_FORMATS.md - Technical details on URL compression formats
• FIREBASE_SETUP.md - Step-by-step Firebase setup guide
• COST_SAFETY.md - Firebase cost analysis and budget protection
• PLATFORMIO_SETUP.md - Seeeduino XIAO microcontroller setup and VS Code configuration
• AGENTS.md - Instructions for AI agents working with this codebase

Contributing

Want to become an admin and help moderate the gallery?

Admins are managed in the Firestore admins collection. To request admin access, open an issue with your Firebase UID (shown in browser console when you sign in). Project maintainers will add you to the Firestore admins collection.

License

MIT