Function CameraController

web/src/components/home/HowItWorksViewer.tsx:66–99

({ step }: CameraControllerProps)

}

function CameraController({ step }: CameraControllerProps) {
  const { camera } = useThree();
  const targetRef = useRef(new THREE.Vector3());

  useEffect(() => {
    const config = stepCameras[step];
    const targetPosition = new THREE.Vector3(...config.position);
    const targetLookAt = new THREE.Vector3(...config.target);

    // Animate camera position
    const startPosition = camera.position.clone();
    const startTime = performance.now();
    const duration = 800;

    function animate() {
      const elapsed = performance.now() - startTime;
      const progress = Math.min(elapsed / duration, 1);
      // Ease out cubic
      const eased = 1 - Math.pow(1 - progress, 3);

      camera.position.lerpVectors(startPosition, targetPosition, eased);
      targetRef.current.lerpVectors(targetRef.current, targetLookAt, eased * 0.1);
      camera.lookAt(targetLookAt);

      if (progress < 1) {
        requestAnimationFrame(animate);
      }
    }

    animate();
  }, [step, camera]);

  return null;
}

interface SceneProps {
  step: HowItWorksStep;