How finxz24/pixel-animation-tool works
pixelStar is a browser-based pixel-art and animation editor. A user creates or opens a project, edits pixels across layers and frames with drawing and selection tools, then saves or exports the result. The React shell mounts the imperative editor engine; input and menus dispatch editing actions, which update the project model and trigger rendering and autosave. Timeline, color, zoom, reference-image, and project-library features provide distinct supporting workflows. The README documents these capabilities; some subsystem wiring is not shown in the sampled source, so uncertain links are omitted.
Main entry points: menus.js Editor Menus · input.js Input Handling · model.js Project Model · persistence.js Project Persistence
Components 19
App Shell
- React Shell
src/App.jsx - Editor Boot
src/core/boot.js - Editor State
src/core/state.js
Pixel Editing
- Input Handling
src/core/input.js - Drawing Tools
src/core/drawing.js - Selection Tools
src/core/selection.js - Project Model
src/core/model.js - Color Tools
src/core/color.js
Animation Workspace
- Frames and Layers
src/core/timeline.js - Canvas Rendering
src/core/render.js
Project Lifecycle
- Projects Page
src/core/projectsPage.js - Editor Menus
src/core/menus.js - Project Library
src/core/library.js - Project Persistence
src/core/persistence.js - Import and Export
src/core/export.js
Canvas Support
- Reference Images
src/core/references.js - Pan and Zoom
src/core/zoom.js - Render Cache
src/core/perf.js
Other components
- Artist
Connections 27
- Artist → React Shell: uses editor
- React Shell → Editor Boot: starts editor
- Editor Boot → Editor State: initializes
- Input Handling → Drawing Tools: dispatches tools
- Input Handling → Selection Tools: dispatches selection
- Input Handling → Frames and Layers: changes frames
- Input Handling → Pan and Zoom: controls view
- Drawing Tools → Project Model: edits cels
- Drawing Tools → Color Tools: updates color
- Drawing Tools → Project Persistence: autosaves
- Selection Tools → Project Model: edits cels
- Frames and Layers → Project Model: changes project
- Frames and Layers → Project Persistence: autosaves
- Canvas Rendering → Project Model: reads project
- Canvas Rendering → Color Tools: renders colors
- Canvas Rendering → Render Cache: uses display pixels
- Canvas Rendering → Project Persistence: autosaves changes
- Editor Menus → Projects Page: opens projects
- Editor Menus → Project Library: manages library
- Editor Menus → Frames and Layers: resizes sprite
- Editor Menus → Import and Export: exports files
- Editor Menus → Project Persistence: saves and opens
- Editor Menus → Project Model: undoes and saves
- Projects Page → Project Library: creates projects
- Projects Page → Project Persistence: loads projects
- Projects Page → Project Model: creates project
- Input Handling → Reference Images: moves overlays