animation-gen

What This Skill Does

The animation-gen skill is a powerful tool designed to simplify the process of creating web animations. It translates natural language descriptions of desired animations into production-ready CSS keyframes or Framer Motion code. This eliminates the need for developers to manually write complex timing functions, easing curves, and keyframe percentages, which can be time-consuming and prone to mathematical errors. The skill supports a wide range of animation types, from simple fades and slides to more complex, multi-step sequences like 'shake horizontally three times then settle' or 'pulse glow effect'. It aims for a 'one command, zero config' experience, allowing users to quickly generate animations that can be directly integrated into their projects.

Installation

This skill can be installed using the following command:

clawhub install openclaw/skills/skills/lxgicstudios/ai-animation

No further installation is required. The skill runs via npx and recommends Node.js version 18 or higher. It necessitates the OPENAI_API_KEY environment variable to be set for its operation.

Use Cases

This skill is ideal for a variety of scenarios:

• Landing Page Development: Create attention-grabbing entrance effects, hero section animations, or subtle interactive elements to enhance user engagement.
• UI Micro-interactions: Add polish to user interfaces by implementing smooth transitions for buttons, form elements, or navigation menus.
• Prototyping: Rapidly visualize animation ideas by describing them in plain English, allowing for quick iteration before manual refinement.
• Developers Lacking Animation Expertise: Bridge the gap between conceptualizing an animation and implementing the intricate code required, especially for those who find CSS animations or Framer Motion syntax challenging.
• Streamlining Development Workflow: Save significant development time by automating the generation of animation code, allowing focus on core application logic.

Example Prompts

1. npx ai-animation "Animate a button to subtly grow and shrink on hover, with a gentle ease-out effect" -f framer
2. npx ai-animation "Create a loading spinner that rotates continuously, using CSS keyframes, and make it blue" -f css
3. npx ai-animation "Make text fade in from the bottom and slide up 20 pixels over 1 second" -o intro-animation.css

Tips & Limitations

• Be Descriptive: The more detailed your description, the more accurate the generated animation will be. Specify elements like direction (e.g., 'from left', 'upward'), intensity (e.g., 'subtle', 'strong'), and number of repetitions (e.g., 'twice', 'three times').
• Mention Timing and Easing: Include terms like 'slow', 'fast', 'ease-in', 'ease-out', or specific durations (e.g., '0.5s') if they are important for the desired effect.
• Specify Output Format: Use the -f flag to explicitly request css, framer, or both. If omitted, the skill might default or provide a common format.
• Saving Output: Utilize the -o flag to save the generated code directly to a file, specifying the filename and extension (e.g., animations.ts, styles.css).
• Complex Animations: While capable of handling multi-step animations, extremely intricate or highly specific physics-based movements might still require manual fine-tuning.
• Testing: Always test the generated animations across different browsers and devices, as their appearance and performance can vary.