update: add a physic scenne

src/index.css

@@ -31,12 +31,51 @@ canvas {
   position: fixed;
   top: 50%;
   left: 50%;
-  width: 12px;
-  height: 12px;
-  border: 2px solid rgba(255, 255, 255, 0.92);
+  width: 6px;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.92);
   border-radius: 999px;
   transform: translate(-50%, -50%);
-  box-sizing: border-box;
   pointer-events: none;
   z-index: 10;
 }
+
+.crosshair--interact {
+  width: 12px;
+  height: 12px;
+  background: transparent;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+}
+
+.interact-prompt {
+  position: fixed;
+  bottom: 30%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.interact-prompt__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: white;
+  font-style: normal;
+}
+
+.interact-prompt__label {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.85);
+  letter-spacing: 0.03em;
+}