Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By markus41
Generate React components for animations like text effects, 3D transforms, backgrounds, particles, scroll triggers, and page transitions using Framer Motion, GSAP, or CSS. Add animations to existing code, apply presets, set up route transitions in Next.js/Remix, and audit/optimize for performance and accessibility.
npx claudepluginhub markus41/claude --plugin react-animation-studioCreate 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.
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.
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.
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Modern animation library for React and JavaScript. Create smooth, production-ready animations with motion components, variants, gestures (hover/tap/drag), layout animations, AnimatePresence exit animations, spring physics, and scroll-based effects. Use when building interactive UI components, micro-interactions, page transitions, or complex animation sequences.
Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.
Claude Code skill pack for Anima (18 skills)
Official GSAP skills for Claude, Cursor, and other AI agents — animations, timelines, ScrollTrigger, plugins, utilities, React, and performance
Build accessible React UIs with Base UI (@base-ui/react). Covers all 35+ unstyled, headless components (Dialog, Menu, Select, Combobox, Tabs, Accordion, Toast, Form, Slider, etc.), styling patterns (Tailwind, CSS Modules, CSS-in-JS), animations, composition via render props, form integration, and TypeScript types.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
AI-powered upgrade intelligence platform. Multi-agent council analyzes your codebase across 8 dimensions, produces confidence-scored suggestions with visual impact heatmaps, upgrade roadmaps, framework-specific deep dives, and before/after impact previews. Features innovation radar, tech debt forecasting, and coordinated upgrade bundles.
Enterprise development toolkit for teams - DevOps, code quality, integrations, workflow automation, documentation, and performance optimization across multi-cloud and full-stack platforms
Professional-grade multi-LLM agent coordination with comprehensive registry system, mandatory orchestration protocol, and production-ready DevOps workflows. Portable and customizable for any project.
Streamline development on the-lobbi/keycloak-alpha with Keycloak management, service orchestration, and test generation
The Conduit-Artisan Hybrid - AWS EKS deployments with Helm, Keycloak authentication, and Harness CI/CD. Combines pipeline excellence with developer velocity.
A plugin-based AI agent orchestration platform that combines a visual workflow builder with a deep Claude Code configuration system. Fourteen domain plugins extend the platform across cloud infrastructure, enterprise SaaS, home automation, and more. The root plugin (claude-orchestration v4.0.1) ships 137 agents, 55 skills, and 100+ slash commands that activate automatically through a registry-backed keyword system.
The frontend (@accos/frontend v1.0.0) is the control surface: a React 18 application where you design, visualize, and manage multi-agent workflows and the plugin marketplace.
┌─────────────────────────────────────────────────────────────────┐
│ Visual Workflow Builder │
│ ReactFlow canvas · Zustand state · WebSocket │
└────────────────────────┬────────────────────────────────────────┘
│
┌────────────────────────▼────────────────────────────────────────┐
│ Plugin System Core │
│ Discovery · Installation · Validation · Dependency resolution │
│ Health checking · Sandboxing · Federated registry │
└───────────┬────────────────────────────────┬────────────────────┘
│ │
┌───────────▼──────────┐ ┌────────────▼───────────────────┐
│ 14 Domain Plugins │ │ Agent Fleet │
│ jira-orchestrator │ │ 137 agents · 30+ categories │
│ tvs-microsoft-deploy│ │ 55 skills · 100+ commands │
│ home-assistant-arch │ │ Activated via registry index │
│ fastapi-backend │ └────────────────────────────────┘
│ ... and 10 more │
└───────────┬──────────┘
│
┌───────────▼──────────────────────────────────────────────────────┐
│ MCP Servers │
│ deploy-intelligence · lessons-learned · project-metrics │
│ code-quality-gate · workflow-bridge · perplexity · firecrawl │
└──────────────────────────────────────────────────────────────────┘
Task toolPrerequisites: Node.js 18+, pnpm
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Opens at http://localhost:5173
# Build for production
pnpm build