T45b Site · Iso: isometric line miniatures on a canvas, hidden lines removed, cells on a marimba beat, playable under the pointer, still under reduced motion

frontend/src/iso/Iso.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+import { useMode } from "../theme";
+import { miniature } from "./draw";
+import type { Block } from "./engine";
+
+/** Grows once it shows, and again when pressed. */
+export function Iso({ model, label, className }: { model: Block[]; label: string; className?: string }) {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const mini = useRef<ReturnType<typeof miniature> | null>(null);
+  const theme = useMode();
+
+  useEffect(() => {
+    const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const m = miniature(canvas.current!, model, still);
+    mini.current = m;
+    const seen = new IntersectionObserver(([e]) => e.isIntersecting && m.start(), { threshold: 0.35 });
+    seen.observe(canvas.current!);
+    return () => {
+      seen.disconnect();
+      m.stop();
+    };
+  }, [model]);
+
+  useEffect(() => mini.current?.repaint(), [theme]);
+
+  return <canvas ref={canvas} className={className} role="img" aria-label={label} onClick={() => mini.current?.replay()} />;
+}