Meta-skill for combining Three.js, GSAP ScrollTrigger, React Three Fiber, Motion, and React Spring for complex 3D web experiences. Use when building applications that integrate multiple 3D and animation libraries, requiring architecture patterns, state management, and performance optimization across

Web 3D Integration Patterns Overview This meta skill provides architectural patterns, best practices, and integration strategies for combining multiple 3D and animation libraries in web applications. It synthesizes knowledge from the threejs webgl, gsap scrolltrigger, react three fiber, motion framer, and react spring physics skills into cohesive patterns for building complex, performant 3D web experiences. When to use this skill: Building complex 3D applications that combine multiple libraries Creating scroll driven 3D experiences with animation orchestration Implementing physics based interactions with 3D scenes Managing state across 3D rendering and UI animations Optimizing performance in multi library architectures Designing reusable component architectures for 3D applications Migrating between or combining animation approaches Core Integration Combinations: 1. Three.js + GSAP Scroll driven 3D animations, timeline orchestration 2. React Three Fiber + Motion State based 3D with declarative animations 3. React Three Fiber + GSAP Complex 3D sequences in React 4. React Three Fiber + React Spring Physics based 3D interactions 5. Three.js + GSAP + React Hybrid imperative/declarative 3D Architecture Patterns Pattern 1: Layered Separation (Three.js + GSAP + React UI) Use case: 3D scene with overlaid UI, scroll driven animations Architecture: Implementation: Benefits: Clear separation of concerns Easy to reason about data flow Performance optimization per layer Independent testing of layers Trade offs: More boilerplate Manual synchronization between layers State management complexity Pattern 2: Unified React Component (React Three Fiber + Motion) Use case: React first architecture with declarative 3D and animations Architecture: Implementation: Benefits: Declarative, React first approach Unified state management Component reusability Easy testing with React tools Trade offs: R3F learning curve Less control over render loop Potential React re render issues Pattern 3: Hybrid Approach (R3F + GSAP Timelines) Use case: Complex animation sequences with React state management Implementation: Pattern 4: Physics Based 3D (R3F + React Spring) Use case: Natural, physics driven 3D interactions Implementation: Common Integration Patterns 1. Scroll Driven Camera Movement Three.js + GSAP: R3F + ScrollControls (Drei): 2. Gesture Driven 3D Manipulation R3F + Motion (Framer Motion 3D): 3. State Synchronized Animations R3F + Zustand + GSAP: State Management Strategies 1. Zustand for Global 3D State Best for: Shared state across 3D scene and UI Usage in R3F: Performance Optimization Cross Library Performance Patterns 1. Render Loop Optimization Coordinate render loops between Three.js and animation libraries: 2. On Demand Rendering (R3F) Common Pitfalls 1. Animation Conflicts Problem: Multiple libraries trying to animate the same property Solution: Choose one library per property or coordinate timing 2. State Synchronization Issues Problem: React state out of sync with Three.js scene Solution: Use refs or state management 3. Memory Leaks from Abandoned Animations Problem: Not cleaning up animations on unmount Solution: Always cleanup in useEffect return Decision Matrix When to Use Which Combination Use Case Recommended Stack Rationale Marketing landing page with scroll driven 3D Three.js + GSAP + React UI GSAP excels at scroll orchestration React app with interactive 3D product viewer R3F + Motion Declarative, state driven, component based Complex animation sequences (timeline based) R3F + GSAP GSAP timeline control with R3F components Physics based interactions (drag, momentum) R3F + React Spring Spring physics feel natural for gestures High performance particle systems Three.js + GSAP Imperative control, instancing, minimal overhead Rapid prototyping, quick iterations R3F + Drei + Motion High level abstractions, fast development Game like experiences with physics R3F + React Spring + Cannon (physics) Physics engine + spring based UI feedback Resources This skill includes bundled resources for multi library integration: references/ architecture patterns.md Detailed architectural patterns and trade offs performance optimization.md Performance strategies across the stack state management.md State management patterns for 3D applications scripts/ integration helper.py Generate integration boilerplate for library combinations pattern generator.py Scaffold common integration patterns assets/ starter unified/ Complete starter template combining R3F + GSAP + Motion examples/ Real world integration examples Related Skills Foundation Skills (use these for library specific details): threejs webgl Three.js fundamentals, scene setup, rendering gsap scrolltrigger GSAP animations, ScrollTrigger, timelines react three fiber R3F components, hooks, Drei helpers motion framer Motion components, gestures, layout animations react spring physics Spring physics, React Spring hooks When to Reference Foundation Skills: Three.js specific API questions → threejs webgl ScrollTrigger syntax → gsap scrolltrigger R3F hooks and patterns → react three fiber Motion gesture handling → motion framer Spring configuration → react spring physics This Meta Skill Covers: Architecture patterns for combining libraries State management across libraries Performance optimization strategies Common integration pitfalls Decision making frameworks Use this skill when building complex 3D web applications that integrate multiple animation and rendering libraries. For library specific implementation details, reference the individual foundation skills.

web3d-integration-patterns