update: add a physic scenne

src/components/ui/Crosshair.tsx

@@ -1,11 +1,16 @@
 import { useCameraMode } from "@/hooks/debug/useCameraMode";
+import { useInteraction } from "@/hooks/useInteraction";
 
 export function Crosshair(): React.JSX.Element | null {
   const cameraMode = useCameraMode();
+  const { focused } = useInteraction();
 
-  if (cameraMode !== "player") {
-    return null;
-  }
+  if (cameraMode !== "player") return null;
 
-  return <div className="crosshair" aria-hidden="true" />;
+  return (
+    <div
+      className={focused ? "crosshair crosshair--interact" : "crosshair"}
+      aria-hidden="true"
+    />
+  );
 }

src/components/ui/InteractPrompt.tsx

@@ -0,0 +1,17 @@
+import { useCameraMode } from "@/hooks/debug/useCameraMode";
+import { useInteraction } from "@/hooks/useInteraction";
+
+export function InteractPrompt(): React.JSX.Element | null {
+  const cameraMode = useCameraMode();
+  const { focused, holding } = useInteraction();
+
+  if (cameraMode !== "player") return null;
+  if (!focused || holding || focused.kind !== "trigger") return null;
+
+  return (
+    <div className="interact-prompt" aria-live="polite">
+      <kbd className="interact-prompt__key">E</kbd>
+      <span className="interact-prompt__label">{focused.label}</span>
+    </div>
+  );
+}