By name: react-three-webgl description: Build scroll-driven WebGL + DOM sites with React Three Fiber and three.js, with progressive enhancement, Next.js integration, and animation stacks. targets: ["codexcli"] user-invocable: false
React Three / three.js / R3F / Scroll + DOM
Purpose
- Build accessible, SEO-friendly websites that progressively enhance into cinematic WebGL experiences.
- Mix DOM and 3D without sacrificing layout, accessibility, or performance.
How to use this skill
- Start with overview.md for architecture, mental models, and core primitives.
- Use scroll.md for scroll rigs, DOM tracking, and multi-view layouts.
- Use nextjs.md for Next.js integration patterns and client boundaries.
- Use animation.md for transitions and animation stacks (GSAP, Motion, Theatre.js, react-spring).
- Use performance.md for performance scaling and scene optimization.
Quick principles
- Progressive enhancement first: HTML and CSS are the baseline; WebGL is optional.
- Prefer a single shared WebGL canvas across routes.
- DOM is the layout source of truth; WebGL tracks DOM proxies.
- Scroll is a timeline; keep scroll and rendering in sync.
- Optimize early: reduce draw calls, reuse resources, render on demand.