Animation Generator

Quick Start

npx ai-animation "fade in from left with bounce"

What It Does

• Converts plain English descriptions to actual animation code
• Supports CSS keyframes and Framer Motion variants
• Handles complex multi-step animations
• Outputs production-ready code you can drop in

Usage Examples

# Get CSS keyframes
npx ai-animation "pulse glow effect" -f css

# Get Framer Motion variant
npx ai-animation "staggered list entrance" -f framer

# Save to file
npx ai-animation "smooth slide up reveal" -f both -o animations.ts

# Complex animation
npx ai-animation "shake horizontally three times then settle"

Best Practices

• Be descriptive - "bounce twice then fade" beats "make it move"
• Mention timing - include "slow", "fast", "0.5s" if timing matters
• Specify direction - "from left", "upward", "diagonal" helps a lot
• Test on device - animations feel different on mobile

When to Use This

• Building landing pages and need attention-grabbing effects
• Adding micro-interactions to your UI
• You can picture the animation but can't write the math
• Prototyping quickly before fine-tuning manually

Part of the LXGIC Dev Toolkit

• GitHub: https://github.com/LXGIC-Studios
• Twitter: https://x.com/lxgicstudios
• Substack: https://lxgicstudios.substack.com
• Website: https://lxgicstudios.com

Requirements

npx ai-animation --help

How It Works

License

• GitHub: github.com/lxgicstudios/ai-animation
• Twitter: @lxgicstudios