SpriteSpark

🎨 SpriteSpark Animation Studio

A powerful web-based pixel art and 2D animation studio with advanced drawing tools, AI integration, and professional animation features.

🌟 Live Demo: https://horrelltech.github.io/SpriteSpark/

Github Link: https://github.com/HorrellTech/SpriteSpark

✨ Core Features Overview
SpriteSpark is designed for both beginners and professional animators, offering everything from simple pixel art creation to complex multi-layered animations with advanced vector tools and very basic Google Gemini drawing assistance.

🎨 Drawing Tools & Canvas
Basic Drawing Tools
🖊️ Pixel-Perfect Pen: Primary tool for crisp, anti-alias-free pixel art (click pen icon in left toolbar)
🖌️ Brush Tool: Variable-size brush with pressure sensitivity support for stylus/tablet users
🧽 Eraser: Remove artwork sections (eraser icon) - supports all brush size options
🪣 Fill Tool (Bucket): Smart flood fill with adjustable tolerance (bucket icon in toolbar)
Tolerance setting in tool options panel controls fill sensitivity
"Detect All Layers" option fills based on combined layer visibility
Shape & Vector Tools
📐 Line Tool: Draw perfectly straight lines with live preview
▭ Rectangle Tool: Create precise rectangles and squares
⭕ Ellipse Tool: Draw circles and ovals with pixel-perfect edges
Advanced Vector Tools
🎯 Vector Tool: Professional point-based drawing system

Click to place vector points, drag to reposition
Right-click to remove points
Multiple modes: Path, Shape, Bezier curves
Apply button appears when 2+ points are placed
Press Enter to apply, Escape to cancel
🌊 Spline Tool: Create smooth curves through control points

Click to place control points
Drag points to reshape curves
Adjustable curve intensity and type (Catmull-Rom, Bezier, B-Spline)
Real-time curve preview with control lines
Right-click to remove points
🎨 Curve Brush: Interactive curve creation tool

Place points to define curve path
Drag control points to adjust curve shape
Apply button appears at curve center
Perfect for organic, flowing lines

Selection & Transform Tools
▭ Rectangle Select: Make rectangular selections (dashed rectangle icon)
🫱 Lasso Select: Free-form selection for irregular shapes
👆 Pointer Tool: Move and manipulate selected areas
🔄 Transform Controls: Rotate, scale, and position selected content
Middle-click on selection to enable rotation mode

🎯 Advanced Drawing Features
Symmetry & Mirroring
🪞 Symmetry Tools: Real-time mirroring while drawing (symmetry panel in left sidebar)
Horizontal Mirror: Draw on one side, automatically mirrors to the other
Vertical Mirror: Top-to-bottom mirroring
Diagonal Mirrors: 45-degree angle mirroring
Animated guide lines show symmetry axes
Perfect for character design and symmetric patterns

Drawing Assistance
👻 Ghost Cursor: Visual brush preview (toggle in tool options)
🎯 Pixel Perfect Mode: Ensures clean, crisp lines for pixel art
📐 Grid System: Overlay grid for precise alignment (toggle in canvas options)
🧅 Onion Skinning: See previous/next frames transparently while drawing

Timeline & Frame Management
Located at the bottom of the screen:

➕ Add Frame: Plus (+) button creates new animation frames
📄 Duplicate Frame: Copy current frame as starting point for next
🗑️ Delete Frame: Remove unwanted frames (trash icon)
🔄 Reorder Frames: Drag and drop frames to rearrange sequence
👁️ Frame Visibility: Toggle frames active/inactive for animation

Playback Controls
▶️ Play/Pause: Start and stop animation preview (play button in timeline)
⚡ FPS Control: Adjust playback speed (1-60 FPS slider)
🔁 Loop Toggle: Set animation to repeat continuously
🧅 Onion Skinning: Transparent overlay of adjacent frames for smooth animation
🎬 Live Preview: See animation playing while you draw

Professional Animation Features
📏 Frame Thumbnails: Visual timeline with resizable frame previews
🎭 Frame States: Enable/disable frames without deleting
⏭️ Frame Navigation: Click frames or use arrow keys to navigate
🎯 Animation Preview: Toggle "Animate While Drawing" to see loops in real-time
📚 Layer System

Layer Management (Right Panel)
📑 Layer Stack: Non-destructive layer system with unlimited layers
➕ Add Layer: Plus (+) button above layer list
🗑️ Delete Layer: Trash icon next to each layer
↕️ Reorder Layers: Drag layers up/down to change drawing order
👁️ Layer Visibility: Eye icon to show/hide individual layers
📝 Layer Naming: Double-click layer names to rename

Layer Properties (Click layer to access)
🔍 Opacity Slider: Adjust layer transparency (0-100%)
🎨 Blend Modes: Professional blending options:
Normal, Multiply, Screen, Overlay, Soft Light, Hard Light
Color Dodge, Color Burn, Darken, Lighten, Difference, Exclusion
✨ Layer Effects: Glow, shadow, and outline effects per layer
🎨 Color System

Color Selection (Left Panel)
🎯 Primary/Secondary Colors: Large color squares - click to open full color picker
🔄 Color Swap: Right-click on canvas to instantly swap primary/secondary
🎨 Color Palette: 32 preset colors below main color selection
Left-click: set primary color
Right-click: set secondary color
🌈 Color Picker: Full HSV color wheel with RGB/HSV/Hex inputs

Advanced Color Tools
💧 Eyedropper: Sample colors from canvas (eyedropper tool or Ctrl+Click)
🎨 Color History: Recently used colors automatically saved
🌈 Theme-Aware Palettes: Color schemes that adapt to interface themes
🔧 Tool Options & Settings
Tool Properties Panel (Left Side, below tools)

🌊 Spline Settings:
Curve Intensity: Controls how curved the splines are
Spline Type: Catmull-Rom, Bezier, B-Spline options
Curve Smoothing: Quality of curve rendering
Show Control Lines: Visual guides between points

🎯 Vector Settings:
Vector Mode: Path, Shape, or Bezier curve modes
Fill/Stroke Options: Fill shapes or outline only
Stroke Width: Line thickness for vector paths
Snap to Grid: Align points to grid automatically

🪣 Fill Options: Tolerance for bucket fill tool
👻 Ghost Settings: Brush preview opacity and visibility
Canvas Options
🔍 Zoom: 25%-800% with zoom input field and +/- buttons
📐 Grid Toggle: Show/hide alignment grid
📏 Canvas Size: Adjust animation dimensions with placement options
🎭 Live Animation: Preview animation while working
⚙️ Professional Workflow

Undo/Redo System
↶ Undo: Ctrl+Z or undo button (50-step history)
↷ Redo: Ctrl+Y or redo button
📝 Comprehensive History: Tracks drawing, layer changes, frame operations, effects

Keyboard Shortcuts
Drawing: Ctrl+Z (Undo), Ctrl+Y (Redo), Ctrl+C/V/X (Copy/Paste/Cut)
Navigation: Arrow keys (frame navigation), Delete (clear selection)
Tools: Number keys 1-9 for quick tool switching
Canvas: Ctrl+Mouse Wheel (zoom), Middle-click (pan)
Selection: Ctrl+A (select all), Escape (clear selection)

Canvas Navigation
🖱️ Pan: Middle mouse button or two-finger touch drag
🔍 Zoom: Ctrl + Mouse Wheel or pinch gestures
🎯 Fit to Screen: Reset view button in toolbar
📱 Touch Gestures: Optimized for tablets and touch devices
🎭 Effects & Filters

Layer Effects (Effects menu)
✨ Glow Effect: Customizable outer glow with color and size
🌟 Neon Effect: Bright, colorful neon-style glow
📦 Drop Shadow: Offset shadow with blur and opacity controls
🔳 Outline Effect: Clean border around layer content
⚡ Emboss Effect: 3D raised appearance

Image Adjustments
🌈 HSL Adjustment: Hue, Saturation, Lightness controls
🎨 Recolor Tool: Replace specific colors with tolerance
🔆 Brightness/Contrast: Professional image adjustment
🌫️ Blur/Sharpen: Lens effects with customizable intensity
🎪 Vignette: Darkened edges effect
🐠 Fish Eye: Lens distortion effect
📐 Pixelate: Retro pixelation filter
Transform Effects
🔄 Rotate 90°: Perfect rotation maintaining pixel alignment
↔️ Flip Horizontal: Mirror image left-to-right
↕️ Flip Vertical: Mirror image top-to-bottom
🎨 Themes & Interface
Visual Themes (Top-right dropdown)
Professional themes for different workflows:

🌙 Dark Themes: Dark, Blue, Purple, Midnight, Nord Dark, Dracula
☀️ Light Themes: Light, High Contrast
🎯 Specialized: Cyberpunk, Neon, Solarized, Iron Man, Sakura
🎨 Custom: Gold, Red, Orange, Green color schemes