core-3d-animation
By freshtechbro
Build interactive 3D web scenes and smooth animations with Three.js, Babylon.js, React Three Fiber, GSAP ScrollTrigger, and Framer Motion. Automate code generation for meshes, scenes, timelines, and variants via interactive command prompts; architect complex setups and optimize performance using specialized agents.
npx claudepluginhub freshtechbro/claudedesignskills --plugin core-3d-animationComponent Overview
Component Details
Commands (9)
Babylon.js - Mesh Builder
Babylon.js - Scene Generator
GSAP ScrollTrigger - Generate Animation
GSAP ScrollTrigger - Timeline Builder
Framer Motion - Animation Generator
Framer Motion - Variant Builder
React Three Fiber - Component Generator
React Three Fiber - Scene Setup
Three.js WebGL - Setup Scene
Agents (6)
Expert 3D/graphics architect specializing in Babylon.js scene design, optimization, and best practices.
Expert integration specialist for combining Core 3D & Animation technologies into cohesive applications.
Expert animation choreographer specializing in GSAP ScrollTrigger animation design, timing, and orchestration.
Expert animation choreographer specializing in Framer Motion animation design, timing, and orchestration.
Expert 3D/graphics architect specializing in React Three Fiber scene design, optimization, and best practices.
Expert 3D/graphics architect specializing in Three.js WebGL scene design, optimization, and best practices.
Skills (5)
Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js. Use when building interactive 3D experiences in React applications with component-based architecture, state management, and reusable abstractions. Ideal for product configurators, portfolios, games, data visualization, and immersive web experiences.
Comprehensive skill for Babylon.js 3D web rendering engine. Use this skill when building real-time 3D experiences, browser-based games, interactive visualizations, or immersive web applications. Triggers on tasks involving Babylon.js, 3D scenes, WebGL/WebGPU rendering, entity-component systems, physics simulations, PBR materials, shadow mapping, or 3D model loading. Alternative to Three.js with built-in editor integration and game engine features.
Comprehensive skill for GSAP (GreenSock Animation Platform) and ScrollTrigger plugin. Use this skill when creating web animations, scroll-driven experiences, timelines, tweens, scroll-triggered animations, pinning, scrubbing, parallax effects, or animating DOM elements, SVG, Canvas, WebGL, or Three.js. Triggers on tasks involving GSAP, ScrollTrigger, smooth animations, scroll effects, or animation sequencing.
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.
Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations, textures, or WebGL/WebGPU rendering.
README
Similar Plugins
ui-design
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Uses power tools
Uses Bash, Write, or Edit tools