Animate

Add purposeful animations and micro-interactions that improve usability — from page transitions to loading states to scroll-triggered reveals.

Features

• Transition Library — Pre-built enter, exit, and layout transition animations using CSS and Framer Motion
• Scroll Animations — Intersection Observer-based reveal animations with configurable thresholds
• Micro-Interactions — Button feedback, hover states, toggle animations, and form field responses
• Spring Physics — Natural-feeling motion with configurable spring tension, friction, and mass
• Performance Guard — Ensures animations use GPU-accelerated properties and respect prefers-reduced-motion

Quick Start

claude skill install animate

Usage

# Add entrance animations to a component
/animate "fade in the card list with staggered timing"

# Create a page transition effect
/animate "smooth slide transition between routes"

How It Works

Analyzes your component structure and suggests appropriate animation patterns based on the interaction context. Generates production-ready animation code using CSS transitions, Framer Motion, or native Web Animations API. All animations respect accessibility preferences and are optimized for 60fps performance.

Compatibility

Works with Claude Code, Codex, Gemini CLI, Cursor, Windsurf, and Aider.