init with react+axum+spacetimedb

src/components/game-canvas/GameCanvasOverlayLayer.tsx

@@ -0,0 +1,36 @@
+import {motion} from 'motion/react';
+
+interface GameCanvasOverlayLayerProps {
+  escapeLead: number;
+}
+
+export function GameCanvasOverlayLayer({escapeLead}: GameCanvasOverlayLayerProps) {
+  return (
+    <>
+      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20" />
+      {escapeLead > 0 && (
+        <>
+          <div
+            className="pointer-events-none absolute inset-0"
+            style={{
+              background: `linear-gradient(90deg, rgba(80, 180, 255, ${0.05 + escapeLead * 0.12}) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.18) 100%)`,
+            }}
+          />
+          <motion.div
+            className="pointer-events-none absolute inset-x-0 top-4 text-center"
+            animate={{opacity: [0.45, 0.95, 0.45], scale: [1, 1.03, 1]}}
+            transition={{
+              duration: Math.max(0.5, 1.1 - escapeLead * 0.4),
+              repeat: Infinity,
+              ease: 'easeInOut',
+            }}
+          >
+            <span className="rounded-full border border-sky-300/30 bg-sky-950/65 px-3 py-1 text-[10px] font-bold tracking-[0.25em] text-sky-100">
+              {escapeLead > 0.72 ? 'Escaped pursuit' : 'Creating distance'}
+            </span>
+          </motion.div>
+        </>
+      )}
+    </>
+  );
+}