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
Generate polished broadcast scripts from talking points, verify facts against sports data in real time, and prepare anchors with comprehensive interview prep including player history and context. You'll produce show-ready scripts with proper pacing, tone optimization for on-air delivery, and talking points for live ad-libs.
by majiayu000
You can debug, write, and optimize Python scripts for Cinema 4D with structured workflows and production-ready templates. This skill helps you resolve API errors, improve script performance, and automate complex 3D workflows with confidence, reducing iteration time and minimizing runtime issues in production pipelines.
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'll learn to structure mobile apps using Expo Router's file-based routing system, implement native iOS controls like tabs, switches, and pickers, create smooth animations with Reanimated, and apply advanced styling with blur effects, gradients, and glassmorphism. This skill covers everything from routing fundamentals to production-ready patterns for building polished, performant applications.
by majiayu000
You can structure complex motion graphics projects by decomposing compositions into layers, sequences, and timing breakdowns before implementation. Claude helps you document creative direction, plan animation strategies, and create comprehensive production briefs that eliminate ambiguity and reduce After Effects rework.
by majiayu000
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
You can architect efficient multi-camera editing workflows optimized for Final Cut Pro, plan robust synchronization strategies across multiple camera angles, and design realistic production timelines that prevent bottlenecks. This skill transforms complex multicam shoots into streamlined editorial pipelines tailored to your team size, budget, and output deadlines.
by majiayu000
Convert raw news wire copy and story notes into polished, anchor-ready scripts with proper pacing, vocal tone guidance, and delivery cues. You get timing estimates, emphasis markers, pronunciation guides, and transition language that keeps listeners engaged and maintains your station's voice throughout every segment.
by majiayu000