ASCII Motion - Professional ASCII Animation Designer

中文版本 | English

ASCII Motion is a powerful, browser-based ASCII animation design tool that brings retro art to life. Created through a unique collaboration between human creativity and AI development, this project represents 100% AI-generated code guided by human architectural vision.

🎨 Preview

Main Interface	Drawing Tools	Animation Timeline
		Coming Soon

✨ Features

🎯 Core Capabilities

• Multi-layer Animation System: Create complex animations with unlimited layers
• Professional Drawing Tools: Brush, fill, picker, eraser, text, shapes, and selection tools
• Real-time Preview: See your animations come to life instantly
• Frame Management: Complete timeline control with frame duplication, deletion, and reordering

🎨 Rich Character Library

• 8 Character Categories: Blocks, shapes, lines, numbers, letters, symbols, and extended characters
• Custom Character Support: Draw with any Unicode character
• Smart Character Selection: Organized tabs for quick access

🌈 Advanced Color System

• 4 Color Palettes: Terminal, retro, neon, and grayscale themes
• Custom Color Picker: Full RGB support with hex input
• Smart Color Management: Separate foreground and background color controls

🔧 Professional Tools

• Layer System:

  • Unlimited layers per frame
  • Layer opacity and blend modes
  • Layer visibility and locking
  • Smart layer management interface

• Drawing Tools:

  • Brush with adjustable size and opacity
  • Flood fill with smart boundaries
  • Color picker for sampling
  • Eraser with variable size
  • Text tool with formatting options
  • Shape tools (line, rectangle, circle)
  • Selection tools for area editing

• Animation Controls:

  • Adjustable FPS (1-60)
  • Frame duration control
  • Loop settings
  • Onion skin preview
  • Real-time playback

📤 Export Options

• Multiple Formats: SVG, PNG, GIF, plain text, and JSON
• Animation Export: Full animation support for SVG and GIF
• High Quality: Crisp output with customizable resolution
• Progress Tracking: Real-time export progress with optimization

🎮 User Experience

• Responsive Design: Works perfectly on all screen sizes
• Keyboard Shortcuts: Professional workflow support
• Undo/Redo: Complete history management
• Grid System: Optional grid for precise alignment
• Zoom Controls: 25% to 400% zoom levels

🚀 Getting Started

Prerequisites

• Node.js 18+ or compatible runtime
• Modern web browser with ES2020+ support

Installation

# Clone the repository
git clone https://github.com/a-side-project/ASCII-Motion.git
cd ASCII-Motion

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:3000 to start creating ASCII animations!

Live Demo

Experience ASCII Motion online at: http://ascii-motion.xiaoa.name/

Production Build

# Build for production
npm run build

# Start production server
npm start

🎯 Usage Guide

Creating Your First Animation

1. Start Drawing: Select the brush tool and choose your character from the character panel
2. Add Colors: Pick colors from the palette or use custom colors
3. Create Layers: Add new layers for complex compositions
4. Add Frames: Use the timeline to create multi-frame animations
5. Preview: Use the play button to see your animation in action
6. Export: Choose your preferred format and export your masterpiece

Pro Tips

• Use Layers: Separate different elements into layers for easier editing
• Onion Skin: Enable onion skin to see previous frames while drawing
• Keyboard Shortcuts: Learn the shortcuts for faster workflow
• Save Frequently: Use Ctrl+S to save your work (JSON format)
• Template Library: Start with templates for inspiration

🏗️ Architecture

This project showcases a modern React architecture with:

• Next.js 15.5.4: Latest App Router with server components
• React 19: Cutting-edge React features
• TypeScript: Full type safety throughout
• Radix UI: Accessible, unstyled components
• Tailwind CSS 4: Utility-first styling
• Modern State Management: React hooks and context

Key Design Patterns

• Component Composition: Modular, reusable components
• Custom Hooks: Business logic separation
• Type Safety: Comprehensive TypeScript coverage
• Performance Optimization: Efficient rendering and memory management

🤝 Contributing

We welcome contributions from the open-source community! This project is particularly interesting as it demonstrates the potential of AI-assisted development.

How to Contribute

1. Fork the Repository: Click the fork button on GitHub
2. Create a Feature Branch: git checkout -b feature/amazing-feature
3. Make Your Changes: Follow our coding standards
4. Add Tests: Ensure your code is well-tested
5. Submit a Pull Request: We'll review it promptly

Development Guidelines

• Code Style: We use ESLint and Prettier for consistent formatting
• Commits: Use conventional commit messages
• Testing: Add tests for new features
• Documentation: Update docs for user-facing changes

Areas for Contribution

• 🎨 New Character Sets: Add more ASCII character collections
• 🌐 Internationalization: Help translate the interface
• 🎭 Animation Presets: Create reusable animation templates
• 🔧 Tool Enhancements: Improve existing drawing tools
• 📱 Mobile Experience: Optimize for mobile devices
• 🎬 Export Formats: Add new export options

🧠 The AI-Human Collaboration Story

This project represents a fascinating experiment in AI-assisted software development:

🤖 AI Contribution (100% of Code)

• All source code was written by Claude Code (Anthropic's AI)
• Architecture implementation based on human specifications
• Bug fixes and optimizations performed by AI
• Feature implementation guided by human requirements

👨‍💻 Human Contribution (Creative Direction)

• Project concept and vision by Archer
• User experience design
• Feature requirements and specifications
• Architecture guidance and code review
• Testing and quality assurance

This collaboration demonstrates how AI can serve as a powerful development partner when guided by human creativity and domain expertise. The result is a professional-grade application that combines the best of both human insight and AI capability.

📊 Technical Specifications

Performance

• Bundle Size: Optimized for fast loading
• Runtime Performance: 60fps animation support
• Memory Management: Efficient canvas and state handling
• Browser Support: Modern browsers (Chrome 90+, Firefox 88+, Safari 14+)

Accessibility

• Keyboard Navigation: Full keyboard support
• Screen Reader: ARIA labels and semantic HTML
• High Contrast: Support for high contrast modes
• Responsive Design: Works on all device sizes

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Anthropic: For providing Claude Code, the AI assistant that wrote this entire codebase
• Archer: For the creative vision and architectural guidance
• Next.js Team: For the amazing React framework
• Radix UI: For accessible component primitives
• Open Source Community: For the tools and libraries that make this possible

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: Wiki

---

Built with ❤️ through AI-Human Collaboration

This project demonstrates the incredible potential when human creativity meets AI capability

⭐ Star this repo | 🔀 Fork | 📝 Report Bug