ascii-animations

name

ascii-animations

description

Add polished ASCII animations to CLI/TUI applications. Use when adding spinners, loading animations, splash screens, text effects, or any terminal animation to a command-line tool. Covers Go, Node.js, Rust, and Python with library recommendations, drop-in templates, generators, and performance best practices. Trigger on phrases like "add animation", "ASCII animation", "spinner", "loading animation", "splash screen", "CLI animation", "terminal animation".

ASCII Animations for CLIs & TUIs

Add polished terminal animations to any CLI app. This skill covers library selection, templates, generators, and engineering best practices.

Quick Picks by Language

Language	Animation Library	TUI Framework	Spinner
Go	sysc-Go (12+ effects, themes, fonts)	Bubble Tea + Lip Gloss	briandowns/spinner (90+)
Node.js	node-cli-frames (frame-by-frame)	Ink (React for CLI)	ora + cli-spinners (100+)
Rust	tachyonfx (shader effects + visual editor)	Ratatui + Crossterm	hand-roll or indicatif
Python	asciimatics (sprites, particles, fire)	Textual (16.7M colors, animation)	yaspin or halo

For detailed library info, installation, and code examples per language, see references/libraries.md.

Animation Types & Templates

Spinners (loading indicators)

• Use cli-spinners JSON format — portable across all languages
• 100+ presets: dots, arrows, bouncing bars, emoji, braille patterns
• Install: npm i cli-spinners (JSON format usable anywhere)
• Go: briandowns/spinner · Node: ora wraps cli-spinners · Python: yaspin

Splash Screens & Banners

• Text logos: figlet (300+ fonts) or toilet (with color)
• Font collections: cmatsuoka/figlet-fonts (largest), xero/figlet-fonts (hacker aesthetic)
• Animated text effects: sysc-Go (fire-text, blackhole, ring-text, pour, print)
• Gold standard: GitHub Copilot CLI animated banner (open source, engineering blog)

Full-Screen Effects

• Matrix rain, fire, rain, fireworks, aquarium: sysc-Go (Go, 12+ effects)
• TerminalTextEffects (Python, 20+ effects): pip install TerminalTextEffects
• Particle systems, sprites: asciimatics (Python)

For template collections and curated art resources, see references/templates.md.

Generators & Creation Tools

Design Custom Animations

• durdraw — Terminal-based ASCII animation editor (frame-by-frame, 256 colors, Unicode)
• ASCII Motion (ascii-motion.com) — Browser-based editor, export for CLI/web
• Playscii — Open-source ASCII/ANSI art + animation editor

Convert Media to ASCII

• chafa — Best image→ASCII converter (truecolor, auto-detects terminal capabilities)
• gif-for-cli (Go) — Convert GIFs directly to terminal animations
• ascii.life — AI-powered, 12 retro themes, export GIF/MP4
• Carbonyl — Full Chromium browser rendered in ASCII
• Video pipeline: ffmpeg -i video.mp4 frame_%03d.jpg && chafa frame_*.jpg

Declarative Terminal Animations

• VHS (by Charm) — Write terminal animations as tape files, replay them

For full tool listings with links, see references/tools.md.

Engineering Best Practices

Terminal Compatibility

• Use 4-bit ANSI colors (16 colors) for maximum compatibility
• Provide fallback chain: truecolor → 256 → 16 → no color
• Test across: iTerm2, Ghostty, Kitty, Alacritty, Windows Terminal, xterm
• Never assume cursor position — always use ANSI save/restore cursor (\x1b[s / \x1b[u)

Performance

• Use real-time frame timing (Date.now() delta), not sleep intervals
• Overwrite in place instead of clear-screen (\x1b[A to move up, not \x1b[2J)
• Batch writes — double buffer in memory, write once per frame
• Hide cursor during animation: \x1b[?25l → restore: \x1b[?25h
• Minimize escape sequences — count them, they add up at 60fps
• Ghostty is currently the fastest terminal for heavy animation

Accessibility

• Respect NO_COLOR environment variable
• Respect TERM=dumb (disable all formatting)
• Screen readers interpret rapid character changes as noise — provide --no-animation flag
• Don't rely solely on animation to convey information

Frame Storage Format

For custom animations, use this simple format (widely compatible):

---FRAME---
<frame content here>
---END---
---FRAME---
<next frame content>
---END---

Or JSON (portable, parseable):

{"frames": ["frame1", "frame2", "frame3"], "interval": 100}

Must-Read Reference

GitHub Copilot CLI engineering blog — how they built their animated ASCII banner (6,000+ lines of TypeScript for a 3-second animation, semantic color roles, terminal fragmentation handling): https://github.blog/engineering/from-pixels-to-characters-the-engineering-behind-github-copilot-clis-animated-ascii-banner/