r3f

Project-specific R3F patterns for the Brain Visualization 18k-node graph renderer — one InstancedMesh + LineSegments2/GL_LINES edge batches, in-place attribute rewrites, frameloop='demand' discipline, settle-debounced scans, additive-blend brightness budgeting, SpriteText font races, drei OrbitControls event topology, window-hook E2E probes, and the multi-agent git serialization discipline. Use when touching src/components/BrainScene.tsx, GraphCanvas.tsx, CameraRig.tsx, or building any new large-scale (10k+ instance) R3F scene in this repo.

React Three Fiber animation - useFrame, useAnimations, spring physics, keyframes. Use when animating objects, playing GLTF animations, creating procedural motion, or implementing physics-based movement.

React Three Fiber fundamentals - Canvas, hooks (useFrame, useThree), JSX elements, events, refs. Use when setting up R3F scenes, creating components, handling the render loop, or working with Three.js objects in React.

React Three Fiber geometry - built-in shapes, BufferGeometry, instancing with Drei. Use when creating 3D shapes, custom meshes, point clouds, lines, or optimizing with instanced rendering.

React Three Fiber interaction - pointer events, controls, gestures, selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.