Add Mouse-Driven Orbit

Turn one damped pointer target into a shallow camera arc and smaller object rotations. Reach for threejs with OrbitControls when the user must inspect a product directly; reach for build-game-camera-controls for drag, zoom, occlusion, or gameplay cameras. This Skill is passive cinematic depth, not direct manipulation.

Extracted from inner-green-3d.html, where a procedural moss root had to turn toward the pointer without sliding away from the headline, cards, and pinned silhouette landmarks.

Record intent, not layout

In the pointer handler, write normalized coordinates only:

function recordPointer(event) {
  if (event.pointerType === "touch") return;
  target.x = (event.clientX / viewport.width) * 2 - 1;
  target.y = (event.clientY / viewport.height) * 2 - 1;
}

Cache the interactive rectangle from ResizeObserver. Do not call getBoundingClientRect() for every layer on every pointermove; synchronous layout turns a light effect into frame spikes.