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.