Lovable Animation Choreographer
Choreograph sophisticated animations & micro-interactions for Lovable UIs
What You Can Do
You can transform static Lovable UIs into motion-forward experiences by orchestrating complex animation sequences across multiple elements. Define entrance animations, scroll-triggered reveals, hover micro-interactions, and state transitions with granular control over timing, easing curves, and stagger patterns. Apply animations selectively to specific UI sections (hero, navigation, cards, CTAs) or globally across your entire interface.
Features
Choreograph staggered entrance animations with configurable timing, easing (smooth/bouncy/snappy/cinematic), and intensity levels (subtle/moderate/expressive)
Reveal elements and animate content as users scroll with intersection observer patterns and progress-based transforms
Add responsive hover states, scale transforms, color transitions, and tooltip animations for enhanced interactivity
Smoothly animate between UI states (loading, success, error, expanded/collapsed) with coordinated multi-element sequences
Leverage Framer Motion's variant system, gesture controls, and layout animations already available in Lovable projects
Use pure CSS transitions and animations for lightweight, performant micro-interactions where appropriate
Apply animations to specific sections (hero, navigation, content, cards, CTA, footer) or orchestrate app-wide motion design
Pre-configured timing curves and duration tables for different animation styles to maintain visual consistency
Example Output
Example 1: Hero Section Entrance with Stagger
- Hero headline fades in and slides up (duration: 500ms)
- Subheading follows with 80ms stagger, same motion
- CTA button bounces in at 600ms with cubic-bezier(0.34, 1.56, 0.64, 1) easing
- Hero image scales from 0.9 to 1 while fading in across 500ms
Example 2: Scroll-Triggered Card Reveals
- Cards remain invisible until 200px before entering viewport
- On scroll, each card slides in from left with 8px translateX transform
- Staggered timing (100ms apart) creates cascading effect
- Opacity animates from 0 to 1 over 400ms with easeOut curve
Example 3: Interactive Navigation Hover
- Nav links scale to 1.05 and shift color on hover (200ms transition)
- Underline appears with scaleX from 0 to 1 (300ms cubic-bezier easing)
- Child dropdown items slide down with 50ms stagger between each item
What's Included
- SKILL.md: Complete animation choreography framework with timing system, trigger definitions, and parameter reference
- Timing Presets Table: Easing curves, durations, and stagger values for smooth, bouncy, snappy, and cinematic animation styles
- Framer Motion Code Templates: Reusable component patterns for entrance sequences, scroll triggers, and gesture animations
- CSS Animation Utilities: Pure CSS keyframes and transition classes for lightweight micro-interactions
- Parameter Map: Quick-reference guide for intensity, style, trigger, and target options
Who It's For
- React/TypeScript developers — Building sophisticated UI experiences with Lovable
- Motion design specialists — Orchestrating complex animation sequences and micro-interactions
- UX engineers — Creating intentional, performance-optimized motion design systems
- Startup founders — Elevating Lovable-generated MVPs with polished, memorable animations
- Product designers implementing prototypes — Translating design specs into motion-enabled code
Best For
- Landing page entrance animations and scroll reveals
- E-commerce product card choreography and carousel interactions
- Form state transitions and validation feedback animations
- Navigation menu and dropdown micro-interactions
- Hero sections and above-the-fold storytelling sequences
- Loading states, skeleton screens, and progressive disclosure patterns
- Modal and dialog entrance/exit animations
You might also like
Analyze your Premiere Pro projects to identify performance bottlenecks, memory issues, and rendering inefficiencies. You'll receive targeted optimization recommendations, automation scripts, and troubleshooting guidance tailored to your specific system configuration and project complexity. Claude becomes your technical production consultant, helping you resolve crashes, slow timelines, and resource conflicts.
by majiayu000
Get instant expert guidance on setting up remote broadcast gear, troubleshooting signal problems, and solving connectivity issues before they derail your show. You describe your equipment, network conditions, or specific error, and receive actionable diagnostics and step-by-step fixes tailored to your exact broadcast scenario.
by majiayu000
You can build interactive UI components with purposeful motion—transitions, hover states, micro-interactions, and enter/exit animations—or audit existing motion design and receive detailed feedback. The skill operates in two focused modes: Create mode helps you implement motion that serves a clear purpose, while Audit mode evaluates your animations against industry-standard principles and reports specific findings with improvement recommendations.
by kylezantos
You generate production-ready design briefs from client requirements, automatically check dozens of designs for brand consistency violations, and orchestrate batch workflows with approval checkpoints. This skill ensures every design aligns with your brand guidelines while accelerating your design approval cycle by weeks.
by majiayu000
You can architect scalable component systems in Framer that maintain design consistency across projects. Claude helps you establish reusable patterns, manage component variants systematically, and generate comprehensive design system documentation that bridges design and code.
by majiayu000
You can rapidly produce news stories from research to publication, automatically optimizing content for web, social media, and email platforms. Claude helps you generate SEO-friendly headlines, craft engaging social snippets, structure compelling narratives, and manage your publishing workflow—all while maintaining editorial quality and deadline pressure.
by majiayu000
You can organize intricate multi-track timelines with nested sequences, manage high-resolution and proxy workflows, and generate detailed technical specifications for multi-format delivery across broadcast, streaming, and archival standards. Claude analyzes your project structure, tracks media dependencies, and creates implementation roadmaps that ensure smooth handoff to colorists, sound designers, and delivery teams.
by majiayu000
Generate complete sports news packages in minutes—including researched facts, talking points, interview questions, and live broadcast scripts. You get verified information with proper attribution, multiple story angles, and production-ready content that's camera-and-microphone ready for immediate air.
by majiayu000