Free Online Pixel Art Animation Editor

A professional-grade, browser-based utility for creating, editing, and exporting pixel art and sprite animations. Designed for simplicity and speed, this tool provides a distraction-free environment for artists and developers to create assets without the overhead of complex software.

Core Features

• Frame-by-Frame Timeline: A dedicated bottom panel to manage multiple animation frames with duration controls.
• Onion Skinning: Toggleable overlay to see the previous frame, aiding in smooth animation transitions.
• Precision Drawing Tools: Pen, eraser, color picker, and flood fill bucket with support for custom grid sizes (e.g., 16x16, 32x32, 64x64).
• Palette Management: A dynamic color picker with the ability to save custom color slots for the current session.
• Layered Logic: Simple frame-based management for easy editing.
• Instant Export: Real-time conversion to Animated GIF or individual PNG sprite frames.

UI/UX Layout

• Header: Clean, centered title with an "Export" button and "Clear Canvas" utility.
• Main Workspace:
  • Left Sidebar: Drawing tools (Brush, Eraser, Fill, Color Picker, Grid Toggle).
  • Center: The interactive Pixel Canvas (responsive, centered in the viewport).
  • Right Sidebar: Color palette selector and brush size adjustment.
  • Bottom Panel: Timeline view showing thumbnails of all frames, 'Add Frame', 'Duplicate Frame', and 'Delete Frame' controls.

Aesthetic Guidelines

• Color Palette: High-contrast, clean "SaaS" aesthetic. Use off-white backgrounds (#F8FAFC), slate-grey text (#334155), and vibrant blue action buttons (#2563EB).
• Interaction Design:
  • Smooth hover transitions on all buttons (scale 1.02, transition 0.2s ease).
  • Subtle, soft drop-shadows on the canvas and panels to provide depth.
  • Clear, legible typography using a sans-serif stack (Inter/System UI).
• Visual Feedback: Active tool selection must have a distinct border or background highlight.

Technical Directives

• Framework: Use pure Vanilla JavaScript, HTML5 Canvas API, and CSS3. No external frameworks.
• State Management: All state (frames, current drawing, palette) must be kept strictly in memory. Do not attempt to use localStorage or sessionStorage due to iframe sandboxing.
• Responsiveness: Ensure the canvas scales gracefully on mobile devices. Use CSS Flexbox/Grid for layout containers.
• Performance: Optimize the canvas rendering loop to ensure zero lag during high-frequency mouse movement (drawing).
• Export Logic: Utilize the Canvas toDataURL method to generate image blobs for download, bypassing the need for a server.