🎨 Core Features

Drawing Tools

  • Pencil Tool (✏️): Freehand drawing with pixel precision
  • Eraser Tool (🧹): Remove pixels cleanly
  • Fill Bucket Tool (🪣): Flood fill areas with color instantly
  • Color Picker Tool (💉): Sample colors directly from your canvas

Canvas Customization

  • Adjustable Grid Size: Create canvases from 8x8 up to 256x256 pixels
  • Flexible Pixel Size: Scale from 2px to 30px for optimal viewing
  • High Resolution Support: Work with up to 128x128 pixel detail level
  • Live Grid Display: Toggle grid overlay for precise pixel placement

Color System

  • 12-Color Default Palette: Curated colors for quick access
  • Custom Color Picker: Full RGB color selection
  • Quick Swatch Selection: Click any palette color to select
  • Current Color Display: Always see your active color with hex value

🖼️ Image to Pixel Conversion

Smart Image Import

  • Drag & Drop Interface: Simply drop images onto the upload zone
  • Adjustable Pixelation: Slider from 8 to 128 levels for perfect conversion
  • Real-time Preview: See pixelated results before applying
  • Automatic Transparency Handling: Preserves transparent pixels

How It Works

  1. Upload any image (JPG, PNG, GIF, etc.)
  2. Adjust the pixelation level slider (8-128)
  3. Preview the result in real-time
  4. Click "Apply to Canvas" to start editing

🎬 Animation Features

Frame Management

  • Multi-Frame Support: Create unlimited animation frames
  • Frame Preview Thumbnails: Visual overview of all frames
  • Frame Navigation: Click any frame to edit
  • Frame Deletion: Remove unwanted frames easily
  • Frame Counter: Track total frames at a glance

Animation Playback

  • Adjustable FPS: Control animation speed from 1-60 FPS
  • Play/Pause Controls: Preview your animation in real-time
  • Loop Playback: Seamless animation repetition
  • Preview Window: Dedicated animation display area

💾 Export Options

Multiple Export Formats

1. Export Current Frame

  • Saves the currently selected frame as PNG
  • Perfect for single sprite exports
  • High-quality PNG format with transparency

2. Export Sprite Sheet

  • Combines all frames into a horizontal sprite sheet
  • Industry-standard format for game engines
  • One-click export of entire animation sequence
  • Maintains exact pixel dimensions

3. Export All Frames

  • Exports each frame as individual PNG files
  • Numbered sequentially (sprite-frame-1.png, etc.)
  • Useful for frame-by-frame editing or import to other tools

⚡ Workflow Features

Undo/Redo System

  • 50-Step History: Extensive undo buffer for experimentation
  • Keyboard Shortcuts:
    • Ctrl+Z / Cmd+Z - Undo
    • Ctrl+Shift+Z / Cmd+Shift+Z - Redo
    • Ctrl+Y / Cmd+Y - Redo (alternative)
  • Visual Indicators: Buttons show available undo/redo actions

Canvas Management

  • Clear Canvas: Quick reset with confirmation
  • Grid Toggle: Show/hide pixel grid overlay
  • Resize Canvas: Change dimensions without losing work
  • Pixel Size Adjustment: Zoom in/out for detail work

🎯 Perfect For

Game Development

  • Character sprites and avatars
  • Tile sets and level assets
  • UI elements and icons
  • Animated game objects
  • 8-bit and 16-bit style graphics

Digital Art

  • Pixel art illustrations
  • Retro-style artwork
  • Profile pictures and avatars
  • Social media graphics
  • NFT artwork

Animation

  • Walking cycles
  • Idle animations
  • Attack sequences
  • Environmental effects
  • Animated emojis and stickers

🖥️ Technical Specifications

Canvas Capabilities

  • Maximum Resolution: 256x256 pixels
  • Minimum Resolution: 8x8 pixels
  • Pixel Size Range: 2px - 30px
  • Color Support: Full RGB (16.7 million colors)
  • Transparency: Full alpha channel support

Image Processing

  • Pixelation Levels: 8-128 steps
  • Supported Formats: JPG, PNG, GIF, WebP, BMP
  • Auto-scaling: Fits images to canvas dimensions
  • Smart Sampling: Preserves image detail at chosen level

Animation System

  • Frame Rate: 1-60 FPS adjustable
  • Frame Limit: Unlimited frames (browser memory dependent)
  • Preview Size: Responsive up to 200x200px
  • Export Format: PNG with transparency

🎨 Interface Design

Modern Retro Aesthetic

  • Clean three-column layout
  • Vibrant orange and yellow color scheme
  • Righteous font for headers
  • Space Mono monospace for controls
  • Responsive design for all screen sizes

Organization

  • Left Sidebar: Image import and drawing tools
  • Center: Main canvas and animation preview
  • Right Sidebar: Frame management and export options
  • Compact Controls: Maximum workspace efficiency

🚀 Quick Start Guide

  1. Set Canvas Size: Adjust width, height, and pixel size
  2. Choose a Tool: Select pencil, eraser, fill, or picker
  3. Pick Colors: Use palette or custom color picker
  4. Start Drawing: Click and drag on the canvas
  5. Add Frames: Click "Add Frame" to create animation
  6. Preview: Use Play button to test animation
  7. Export: Choose your preferred export format

💡 Pro Tips

For Best Results

  • Start with smaller canvases (32x32 or 64x64) for faster work
  • Use the grid toggle to align pixels precisely
  • Save frames frequently during animation work
  • Test different pixelation levels when importing images
  • Use keyboard shortcuts for faster workflow

Performance Optimization

  • Keep canvas size reasonable for smooth performance
  • Clear unused frames to save memory
  • Export sprite sheets instead of individual frames when possible
  • Use lower FPS (8-15) for retro game feel

🌟 Key Advantages

✅ No Installation Required - Works entirely in browser ✅ Completely Free - No subscriptions or payments ✅ Offline Capable - Save the HTML file for local use ✅ Cross-Platform - Works on Windows, Mac, Linux, mobile ✅ Instant Export - PNG files ready for use anywhere ✅ Professional Quality - High-resolution output up to 128x128 ✅ Unlimited Creativity - No artificial limits on frames or exports

📱 Browser Compatibility

  • ✅ Chrome/Edge (Recommended)
  • ✅ Firefox
  • ✅ Safari
  • ✅ Opera
  • ✅ Mobile browsers (iOS/Android)

🎓 Use Cases & Examples

Character Animation

Create a walking cycle with 8 frames at 64x64 resolution, export as sprite sheet for game engine integration.

Pixel Art Portraits

Convert photos to pixel art using 32-64 pixelation levels, then refine by hand for unique artistic style.

Game Assets

Design tile sets at 16x16, UI icons at 32x32, and character sprites at 64x64 - all in one tool.

Social Media Content

Create animated pixel art GIFs and profile pictures with retro gaming aesthetic

More information

Development log