✨ Nanimate

A playful, web-based hand-drawn animation tool

Try the live demo →

---

About

Nanimate is a minimalist hand-drawn animation tool that runs entirely in your browser. Inspired by IORAMA's Looom, Nanimate reimagines the traditional timeline as a playful, intuitive interface where each layer is an independent spinning n-gon representing your animation frames.

Like playing a musical instrument, Nanimate makes animation feel more like exploration than operation—tweak frame rates, onion skins, and stroke properties while your loops play in real-time. There's no first frame or last frame, just flowing, circular time where each layer rotates at its own rhythm.

✨ Key Features

• 🎨 Intuitive Drawing - Natural touch, tablet and mouse drawing
• ⚡ Real-time Playback - Watch your animations loop as you draw
• 👻 Onion Skinning - Configurable previous/next frame previews to maintain animation flow
• 🎯 Layer System - Multiple independent layers with individual frame counts and FPS control
• 🎨 Modern UI - Clean, dark-mode-first interface with theme switching
• 💾 Project Management - Save/load projects with metadata and timestamps
• 📤 GIF Export - Export your animations as animated GIFs
• 🔄 Undo/Redo - Full history support for your creative experiments
• ⚙️ Customizable - Adjust stroke width, colors, fill modes, and more

🎯 Why Nanimate?

Traditional animation software can feel overwhelming with its complex timelines, extensive menus, and steep learning curves. Nanimate strips away the complexity:

• No installation required - runs entirely in your browser
• Lightweight - small footprint, fast performance
• Open source - built with modern web technologies
• Accessible - keyboard shortcuts and intuitive controls

---

🚀 Try It Out

→ Launch Nanimate ←

Quick Start

1. Click anywhere on the canvas to start drawing
2. Use the + button on your layer to add frames
3. Press Spacebar to play/pause your animation
4. Adjust FPS with the ‹ / › buttons below each layer
5. Press ? to view all keyboard shortcuts

---

🛠 For Developers

Nanimate is built with a lean stack focused on performance and simplicity:

Tech Stack

• React - UI components and state management
• TypeScript - Type-safe scene and layer management
• HTML Canvas - High-performance drawing and rendering
• Chroma.js - Color manipulation and palette generation
• GIF.js - Client-side animated GIF encoding
• Parcel - Zero-config bundling

Project Structure

src/
├── gui/                   # React GUI components
│   ├── main.gui.tsx       # Main app with state management
│   ├── scene.gui.tsx      # Top-level scene container
│   ├── layers.gui.tsx     # Layer list with n-gon visualizations
│   ├── layerOptions.gui.tsx  # Color picker and stroke controls
│   ├── settings.gui.tsx   # Onion skin settings modal
│   ├── saveLoadModal.gui.tsx # Project save/load interface
│   └── exportModal.gui.tsx   # GIF export with preview
├── Scene.ts               # Core scene management and playback
├── Layer.ts               # Individual layer with frame management
├── Frame.ts               # Frame data structure with path storage
├── design-system.scss     # Design tokens and variables
└── index.scss            # Component styles

Key Concepts

Scene Graph

The Scene class manages the entire animation state:

• Multiple Layer instances
• Active layer tracking
• Playback controls
• History management (undo/redo)
• Export functionality

Layer System

Each Layer is independent:

• Own canvas for isolated rendering
• Independent frame rate (FPS)
• Circular frame buffer (no start/end)
• Onion skin rendering
• Transform controls (offset, rotation, scale)

N-gon Visualization

The spinning n-gon UI represents:

• Vertex count = frame count
• Filled dots = frames with content
• Empty dots = blank frames
• Active frame highlighted
• Rotation speed = FPS
• Glow indicates active layer

Development

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

# The built files will be in dist/

Architecture Highlights

• Canvas-based rendering - Each layer has its own canvas for performance isolation
• Pointer capture - Smooth color picker dragging even at high speeds
• Web Workers - GIF encoding runs off the main thread
• React with classes - Layer components use classes for fine-grained lifecycle control
• Functional components - Modern UI uses hooks for state management

Contributing

Contributions are welcome! This is a passion project focused on making animation accessible and fun. Areas of interest:

• Additional export formats (WebM, MP4, sprite sheets)
• Advanced onion skin modes (non-linear opacity falloff)
• Pressure sensitivity refinements
• Mobile/touch optimization
• Keyboard shortcut customization
• Plugin system for effects/filters

License

MIT License - feel free to use this in your own projects!

---

🎨 Inspiration

Nanimate draws inspiration from IORAMA's Looom, the Apple Design Award-winning iPad app that pioneered a bold, playful approach to hand-drawn animation. While Looom offers a feature-rich mobile experience with vector rendering and advanced tools, Nanimate brings the core joy of looping, layered animation to the web with a focus on simplicity and accessibility.

---

Built with ❤️ by @tmanderson

Try Nanimate • Report Bug • Request Feature

---