Getting Started with ASCII Motion

Documentation In Progress

This documentation is currently in active development. If you are seeing this notification, some information may be out of date or incorrect. Please check back soon for more complete content.

Welcome to the ASCII Motion documentation! Review these docs to learn how to create ASCII/ANSI Art and Animations with ASCII Motion.

This guide is currently in development, so if your questions aren't answered here, feel free to reach out on twitter or in our discord.

What is ASCII Motion?

ASCII Motion is a web-based editor for creating animated ASCII art. Built entirely in the browser, it combines the nostalgia of terminal graphics with modern editing capabilities.

Whether you're a digital artist, game developer, creative coder, or just exploring retro aesthetics, ASCII Motion provides all the tools you need to bring your ideas to life.

ASCII Motion interface Preview

Why ASCII Motion?

Perfect For

Game Developers - Create retro game sprites, UI elements, and terminal-style interfaces

Digital Artists - Explore pixel art and ASCII art with modern tools

Web Designers - Export into formats for the web like HTML or React components.

Creative Coders - Generate procedural animations and export them into code

Retro Enthusiasts - Recreate classic terminal aesthetics and animations

Key Features

🎨 Full-featured Drawing Tools

Pencil, line, shapes (rectangle, ellipse) for "drawing" with characters
Bezier curves for smooth paths and custom fill styles
Solid and Gradient fill with dithering effects
Text tool with multiple fonts
ASCII Font tool using Figlet Fonts
ASCII Shape drawing tool for auto generating ASCII Box/Line characters

🎬 Animation System

Frame-by-frame timeline
Onion skinning for smooth motion
Variable Frame duration
Real-time preview
Loop playback modes
Timeline effects (wiggle, wave warp, etc.)

✨ Visual Effects

Blur/Scatter
Levels
Hue/Saturation/Brightness
Procedural generators (noise, patterns)
Color and Character remapping

🧪 Procedural Animation Generators

Radio waves
Turbulent noise
Particle physics
Rain drops
Digital Rain

🎥 Convert videos/images into ASCII

Convert most video or image formats to ASCII
Custom color and character palette conversion systems
Pre-effects that fine tune the video/image input for conversion
Live preview of conversion as you edit settings

📤 Export Options

Raster images - High-resolution images with transparency
Vector images - SVG's compatible with browsers, Figma, and Illustrator
Video - MP4 and WebM formats
HTML - Interactive web embeds
JSON - Shareable and human-readable project files
React - A drop in canvas component for React apps
.asciimtn - A propietary format for saving ASCII Motion projects

☁️ Cloud Features

Save to cloud (3 projects for free accounts, unlimited for Pro tier)
Access from any device
Post to the community gallery for free.

How It Works

ASCII Motion uses a grid-based canvas where each cell can contain:

A character (ASCII or Unicode)
A foreground color
A background color

This simple concept enables both traditional ASCII and ANSI art, all with animation capabilities and multiple export styles.

Think of it as a grid of "pixels" like any art app, but instead of color data, it's character, color, and background color data. And the aspect ratio of each grid cel is 0.6 width to height, to allow for monospace fonts.

The animation timeline then stores each frame of canvas data with manually set frame duration for playback and export.