Web3d Integration Patterns

If you're combining Three.js, GSAP ScrollTrigger, React Three Fiber, Motion, and React Spring in the same project, this gives you actual architecture patterns instead of figuring it out yourself. It covers layered separation (vanilla Three.js with GSAP scroll animations and a React UI overlay) and unified React approaches (R3F components with Motion or Spring for physics). The code examples show real integration points like syncing GSAP timelines with Three.js camera positions or managing state between 3D renders and UI animations. Honestly most useful when you're past the basics of each library and need to see how they fit together without performance falling apart.

Install to Claude Code

npx -y skills add freshtechbro/claudedesignskills --skill web3d-integration-patterns --agent claude-code