{"enrichment":{"faq":[{"a":"web3d-integration-patterns teaches you to orchestrate Three.js rendering with GSAP timelines by synchronizing scroll events to camera movements and object animations. The skill covers establishing a shared state layer (often Zustand) that both libraries read from, using GSAP's ScrollTrigger to drive Three.js scene updates without conflicts, and structuring your render loop so GSAP tweens and Three.js frame updates stay coordinated. This prevents double-rendering and keeps performance predictable.","q":"How do I combine Three.js with GSAP for scroll animations?"},{"a":"web3d-integration-patterns covers hybrid declarative-imperative architectures where R3F manages 3D canvas state and Framer Motion handles UI layer animations separately. Key patterns include using refs to bridge component trees, maintaining a single source of truth for shared values (like scroll position), and keeping animation responsibilities clear: R3F for 3D transforms, Framer Motion for overlaid React elements. This separation prevents library conflicts while enabling synchronized experiences.","q":"What patterns work for React Three Fiber with Framer Motion?"},{"a":"web3d-integration-patterns emphasizes layered architecture: a state management core (Zustand recommended), a 3D rendering tier (Three.js or Babylon.js), an animation orchestration layer (GSAP or React Spring), and a UI presentation layer (React + Framer Motion). Each library owns specific responsibilities\u2014rendering, tweening, UI\u2014with explicit data flow between them. This prevents tangled dependencies and makes performance optimization and library migration straightforward.","q":"How should I structure multi-library 3D web architecture?"},{"a":"web3d-integration-patterns recommends centralizing state in a store (Zustand works well) that all libraries subscribe to rather than having each library maintain separate state. Define clear interfaces for 3D scene state, animation progress, physics bodies, and user input. Libraries read from this store and dispatch updates through it, creating a single source of truth. This approach simplifies debugging, enables predictable re-renders, and makes it easier to coordinate complex multi-library interactions.","q":"What's the best way to manage state across 3D rendering libraries?"},{"a":"web3d-integration-patterns covers render loop coordination to avoid redundant calculations. Key techniques include batching updates from multiple libraries into a single frame, using requestAnimationFrame strategically, throttling state updates, and profiling to identify which library is the bottleneck. The skill teaches you to separate concerns\u2014let Three.js handle geometry, GSAP handle tweens, React handle UI\u2014so each library's optimization strategies work independently without interference.","q":"How can I optimize performance in multi-library 3D stacks?"},{"a":"web3d-integration-patterns helps you recognize when to switch approaches: use Three.js + GSAP for scroll-heavy experiences, R3F + React Spring for gesture-driven interactions, or Babylon.js for physics-intensive scenes. The skill teaches migration patterns so you can refactor incrementally\u2014extracting state management first, then swapping rendering or animation layers. This modular approach means you're never locked into one stack and can adopt new libraries as your project evolves.","q":"When should I migrate between different 3D animation approaches?"}],"shadow_tags":["multi-library-orchestration","scroll-driven-3d","declarative-3d","physics-interactions","render-optimization","gesture-control","state-synchronization","component-architecture","animation-sequencing","performance-patterns"],"summary_rewrite":"This skill equips developers with proven architectural patterns for integrating multiple 3D rendering and animation frameworks into cohesive web applications. Learn how to combine Three.js, Babylon.js, React Three Fiber, and GSAP effectively while managing complexity and performance across modern web stacks."},"files":[{"bytes":21184,"path":".claude/skills/web3d-integration-patterns/SKILL.md","sha256":"3c5f22042307a59751de6684fdae033c011048d5fe8d3a7525b9e51564254034","url":"https://skillfed.io/files/freshtechbro/claudedesignskills/web3d-integration-patterns/aa93308e/SKILL.md"}],"id":"freshtechbro/claudedesignskills/web3d-integration-patterns","links":{"html":"https://skillfed.io/freshtechbro/claudedesignskills/web3d-integration-patterns","md":"https://skillfed.io/freshtechbro/claudedesignskills/web3d-integration-patterns.md","repo":"https://github.com/freshtechbro/claudedesignskills"},"meta":{"agents_supported":["claude-code"],"first_seen":"2026-07-28","forks":101,"language":"Python","last_updated":"2025-11-20","license":"MIT","name":"web3d-integration-patterns","publisher":"freshtechbro","stars":618},"relations":{"similar":[{"id":"liuchiawei/agent-skills/3d-web-experience"},{"id":"freshtechbro/claudedesignskills/react-three-fiber"},{"id":"organvm/a-i--skills/react-three-fiber-patterns"},{"id":"EnzeD/r3f-skills/r3f-fundamentals"},{"id":"Bbeierle12/Skill-MCP-Claude/r3f-fundamentals"},{"id":"freshtechbro/claudedesignskills/spline-interactive"},{"id":"freshtechbro/claudedesignskills/gsap-scrolltrigger"},{"id":"EnzeD/r3f-skills/r3f-animation"},{"id":"EnzeD/r3f-skills/r3f-interaction"},{"id":"notque/vexjoy-agent/threejs-builder"}]},"slug":{"owner":"freshtechbro","repo":"claudedesignskills","skill":"web3d-integration-patterns"},"version":"aa93308e"}