Function ExplodedViewer

web/src/components/home/ExplodedViewer.tsx:118–139

()

}

export function ExplodedViewer() {
  const [ref, inView] = useInView("400px");
  const prefersReducedMotion = useReducedMotion();
  const isDarkMode = useDarkMode();

  return (
    <div ref={ref} className="exploded-viewer">
      {inView && (
        <Canvas
          camera={{ fov: 35, near: 1, far: 5000, position: [490, 350, 700] }}
          style={{ width: "100%", height: "100%" }}
          gl={{ antialias: true, alpha: true }}
          dpr={[1, 1.5]}
        >
          <color attach="background" args={[isDarkMode ? "#0a0a0b" : "#f8f8f8"]} />
          <ResponsiveCamera />
          <Scene enableRotation={!prefersReducedMotion} />
        </Canvas>
      )}
    </div>
  );
}