Celstomp

A 2D animation web application built with HTML, CSS, and JavaScript.

About

Celstomp is a browser-based animation tool designed for traditional frame-by-frame animation. The project started as a personal project to make animation more accessible.

I come from an art background and built this while learning to code.

Live Site

https://ginyo.space/celstomp/

Features

• Canvas: 16:9 ratio, zoom/pan with scroll or pinch
• Timeline: Frame-by-frame grid, drag cels, multi-select
• Tools: Brush, Eraser, Fill Brush, Fill Eraser, Lasso, Rect Select, Eyedropper
• Layers: LINE, SHADE, COLOR, FILL, PAPER - with swatches and reordering. Solo layer mode available.
• Onion Skin: Preview prev/next frames (adjustable colors/opacity)
• Palette: Save/Load palettes, Import/Export JSON support
• Shortcuts: Comprehensive keyboard shortcuts (Press ? in app for list)
• Safety: Unsaved changes protection
• Export: MP4 video or image sequence
• Save/Load: Project files in JSON format

Credits!!

Person	Role	Links
Ginyoa	Project Lead, Creator, Concept Artist	GitHub · Website
ImMalloy	Coder, Refactored code, fixed bugs and also Silly Artist	GitHub · Website · Play Your Little Oyachi!
Microck	Coder, Improved reliability and UX and Fixed Bugs	GitHub · Website
IvBautistaS	Refactored both Javascript and CSS	GitHub
Manuel-AAR	Added Brush Icons	GitHub
phbragap-creator	optimized island drag, fixed topbar overlap	GitHub

Key Shortcuts

• Tools: 1-8
• Navigation: Arrows, Q/W (Cel), E/R (Frame)
• Playback: Space
• Edit: Ctrl+Z (Undo), Ctrl+Y (Redo), Del (Clear)
• Brush: [ / ] (Size), Shift+Drag (Straight line), Alt (Eyedropper)
• View: ? (Cheatsheet), O (Onion), F (Fill)

Setup

Running Locally

Clone the repository:

git clone https://github.com/ginyoagoldie/celstomp_v1.git
cd celstomp_v1

Linux / Mac (Terminal)

./run-dev.command

Windows

Double-click run-dev.bat

Or run from command prompt:

run-dev.bat

Mac (Double-click)

Double-click run-dev.command in Finder

The server will start at http://localhost:8000

Requirements

• Python 3.x (most systems have this pre-installed)
• web browser (Chrome, Firefox, Safari, Edge)

License

See LICENSE file.