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

Official site: https://ginyo.space/celstomp/
Development testing site: https://celstomp-indev.nichesite.org/

Features

• Canvas: Configurable aspect ratios (16:9 default), zoom/pan with scroll or pinch
• Timeline: Frame-by-frame grid, drag cels, multi-select
• Tools: Brush (shape + pressure options), Eraser, Fill Brush, Fill Eraser, Lasso, Rect Select, Eyedropper
• Layers: LINE, SHADE, COLOR, FILL, PAPER - with swatches, reordering, opacity, and blend modes. Solo layer mode available.
• Onion Skin: Preview prev/next frames (adjustable colors/opacity)
• Color Picker: Optional triangle picker mode
• Palette: Save/Load palettes, Import/Export JSON support
• Shortcuts: Comprehensive keyboard shortcuts (Press ? in app for list)
• UI: Font switcher and dock/island layout
• Tutorial: Built-in guided tour with replay
• Safety: Unsaved changes protection
• Export: MP4 video, GIF, or image sequence
• Save/Load: Project files in JSON format

Credits!!

Person	Role	Links
Ginyoa	Project Lead, Creator, Concept Artist	GitHub · Website
ImMalloy	Brush system remake, side panel integration, QoL fixes	GitHub · Website · Play Your Little Oyachi!
Microck	GIF export, layer blend modes, tutorial replay, reliability/UX fixes	GitHub · Website
IvBautistaS	Refactored HTML, JavaScript, and CSS	GitHub
hingler	Refactored monolith into modular supporting scripts	GitHub
Manuel-AAR	Added brush icons and basic brush shapes	GitHub
phbragap-creator	Triangle color picker, island/header overlap fixes	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/ginyoa/celstomp_v1.git
cd celstomp_v1

Using Vite (recommended)

npm install
npm run dev

The dev server will start at http://localhost:5173

To create a production build:

npm run build
npm run preview   # preview the built output

Using Python (no Node required)

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 Python server will start at http://localhost:8000

Requirements

Vite workflow: Node.js 18+ and npm

Python workflow: Python 3.x (most systems have this pre-installed)

Browser: Chrome, Firefox, Safari, or Edge

License

See LICENSE file.