react-animation-studio

Create CSS/JS-based 3D animations including flip cards, tilt effects, rotating cubes, parallax depth layers, and 3D carousels without WebGL.

Audit animations for performance, accessibility, and best practices compliance.

Generate stunning animated backgrounds for React applications using CSS gradients, particles, aurora effects, and more.

Add animations to existing React components with intelligent analysis and seamless integration.

Create artistic and experimental visual effects including morphing shapes, glitch effects, liquid animations, magnetic interactions, and creative loaders.

Export animations as reusable components, hooks, or design tokens.

Apply pre-built animation presets from a curated library of beautiful, tested animations.

Add scroll-triggered animations to elements and sections with intelligent viewport detection.

Create choreographed animation sequences with precise timing and orchestration.

Create expressive text animations including typewriter effects, character reveals, kinetic typography, and gradient text animations.

Create page transitions and route animations for seamless navigation experiences.

Generate beautiful, production-ready animation code from natural language descriptions. This command transforms creative descriptions into optimized TypeScript/React animations.

Master architect for complex animation systems and choreography in React/TypeScript applications. This agent establishes scalable animation architectures that drive engaging user experiences across your application.

You are a creative effects specialist who transforms ordinary interfaces into visually stunning, memorable experiences. You combine artistic vision with technical expertise to create unique visual effects that delight users while maintaining usability.

Micro-interactions, gesture animations, and responsive feedback specialist. This agent creates tactile, satisfying interactions that establish intuitive user experiences and clear visual communication.

Creative motion design specialist for physics-based animations, visual effects, and expressive movement in React/TypeScript applications. This agent transforms static interfaces into delightful, living experiences.

Animation performance optimization specialist ensuring 60fps smooth animations across devices while maintaining accessibility compliance. This agent establishes performance-first animation patterns that deliver measurable improvements to user experience.

Page transitions, route animations, and layout morphing specialist. This agent creates seamless navigation experiences that establish spatial relationships and maintain context during state changes.

Expert knowledge for CSS/JS-based 3D animations - perspective transforms, depth effects, card flips, cube rotations, and parallax depth without WebGL.

Expert knowledge for decorative accent animations - floating shapes, glowing orbs, animated borders, sparkle effects, and embellishments that add visual polish and delight to interfaces.

> Patterns from "Agentic Design Patterns" (Gulli & Sauco, 2025) applied to web animation composition, performance optimization, and multi-library orchestration for React and TypeScript.

Expert knowledge for creating stunning animated backgrounds - gradient flows, particle systems, mesh gradients, aurora effects, wave patterns, and dynamic textures that bring depth and life to your interfaces.

Expert knowledge for artistic and creative animation effects - morphing shapes, liquid animations, glitch effects, distortion, and experimental visual techniques that push creative boundaries.

Expert knowledge for pure CSS animations - lightweight, performant animations using CSS keyframes, transitions, and modern CSS features without JavaScript dependencies.

Expert knowledge for Framer Motion - the production-ready motion library for React. This skill enables declarative animations, gesture recognition, and layout animations with optimal performance.

Expert knowledge for GSAP (GreenSock Animation Platform) - the industry-standard JavaScript animation library for professional-grade animations with precise timeline control.

Expert knowledge for scroll-triggered animations, parallax effects, and scroll-linked interactions that create immersive storytelling experiences.

Expert knowledge for physics-based spring animations - natural, organic motion that follows real-world physics principles for delightful user experiences.

Expert knowledge for SVG path animations, morphing shapes, and vector graphics effects that create stunning visual experiences with resolution-independent graphics.

Expert knowledge for creative text animations - typewriter effects, character-by-character reveals, kinetic typography, split text animations, and expressive text motion.