fix(ux): HelpModal backdrop flicker on mousemove over canvas

User-reported (screenshot 2026-05-23 20:22): clicking '?' on a brick
in the left Palette opens the HelpModal; moving the cursor right
across the canvas underneath caused the whole screen to flicker.

Root cause: HelpModal backdrop used backdropFilter:blur(8px) on a
position:fixed inset:0 overlay. Chrome was forced to recompose the
GPU backdrop layer on every mousemove event because the React Flow
canvas underneath schedules per-frame cursor-tracking repaints —
each canvas paint invalidated the backdrop, which then forced a
fresh blur pass, looping at frame rate.

Fix:
  - Drop backdropFilter:blur entirely; keep the rgba(15,23,42,0.55)
    flat scrim — still visually distinct enough to anchor focus.
  - Add transform: translateZ(0) + willChange: opacity to promote
    the backdrop to its own compositing layer, isolating it from
    the canvas paint underneath.

1 new vitest pins the contract that backdropFilter is empty and
transform contains translateZ — any future re-introduction of blur
will trip this test.

Author: apstenku123

vbgui/src/components/HelpIcon.tsx

@@ -921,8 +921,16 @@ export function HelpModal({ topic, onClose }: HelpModalProps): JSX.Element {
       style={{
         position: "fixed",
         inset: 0,
-        background: "rgba(15, 23, 42, 0.75)",
-        backdropFilter: "blur(8px)",
+        // UX-fix: backdropFilter: blur(8px) forced Chrome to recompose
+        // the GPU layer on every mousemove (cursor crossing the
+        // overlay → repaint loop with React Flow canvas underneath
+        // → visible flicker). Plain rgba(0,0,0,0.5) keeps focus on
+        // the modal without forcing per-frame backdrop recomposite.
+        background: "rgba(15, 23, 42, 0.55)",
+        // Promote to its own compositing layer so mousemove over the
+        // backdrop doesn't invalidate the canvas paint underneath.
+        transform: "translateZ(0)",
+        willChange: "opacity",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",

vbgui/tests/HelpIcon.test.tsx

@@ -40,4 +40,18 @@ describe("HelpIcon + HelpModal", () => {
     fireEvent.click(screen.getByTestId("help-modal-close"));
     expect(screen.queryByTestId("help-modal-dim_env_nh")).toBeNull();
   });
+
+  // UX-fix: prior implementation set backdropFilter:blur(8px) on the
+  // fixed inset:0 overlay. Chrome recomposed the GPU layer on every
+  // mousemove that crossed the overlay → visible flicker over the
+  // React Flow canvas underneath. Fix drops the blur and promotes
+  // the backdrop to its own compositing layer via translateZ(0).
+  it("backdrop has no backdropFilter:blur (anti-flicker fix)", () => {
+    render(<HelpIcon topic="dim_env_H" />);
+    fireEvent.click(screen.getByTestId("help-icon-dim_env_H"));
+    const backdrop = screen.getByTestId("help-modal-backdrop") as
+      HTMLElement;
+    expect(backdrop.style.backdropFilter || "").toBe("");
+    expect(backdrop.style.transform).toContain("translateZ");
+  });
 });