web3d-integration-patterns

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 the stack. Triggers on tasks involving library integration, multi-library architectures, scroll-driven 3D experiences, physics-based 3D animations, or complex interactive 3D applications.

Category
Engineering
Skill
203 of 261
Source
Kevin wiki

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

Progressive Disclosure

This SKILL.md is the routing layer. Detailed recipes, examples, integration notes, and troubleshooting guidance live in references/details.md so they are loaded only when the task needs them.

Before producing concrete output, making a design recommendation, or debugging an implementation, load the relevant reference section below. Do not rely on memory for branch-specific APIs, examples, or caveats.

Task branchRead first
Architecture Patternsreferences/details.md#architecture-patterns
Common Integration Patternsreferences/details.md#common-integration-patterns
State Management Strategiesreferences/details.md#state-management-strategies
Performance Optimizationreferences/details.md#performance-optimization
Common Pitfallsreferences/details.md#common-pitfalls
Decision Matrixreferences/details.md#decision-matrix
Resourcesreferences/details.md#resources

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.