feat: futuristic fx suite (3D grid, node map, vault viz)

Author: Vito416

desktop/src/renderer/App.tsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useRef } from "react";
+import * as THREE from "three";
+
+type BackgroundCanvasProps = {
+  active: boolean;
+};
+
+const FRAME_INTERVAL = 1000 / 30; // cap to ~30fps
+
+const BackgroundCanvas: React.FC<BackgroundCanvasProps> = ({ active }) => {
+  const mountRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!active) return;
+    const mount = mountRef.current;
+    const canvas = canvasRef.current;
+    if (!mount || !canvas) return;
+
+    let renderer: THREE.WebGLRenderer | null = null;
+    let scene: THREE.Scene | null = null;
+    let camera: THREE.PerspectiveCamera | null = null;
+    let grid: THREE.LineSegments | null = null;
+    let aurora: THREE.Mesh | null = null;
+    let auroraMaterial: THREE.ShaderMaterial | null = null;
+    let raf = 0;
+    let disposed = false;
+    let lastFrame = 0;
+
+    try {
+      renderer = new THREE.WebGLRenderer({
+        canvas,
+        alpha: true,
+        antialias: false,
+        powerPreference: "low-power",
+        preserveDrawingBuffer: false,
+      });
+    } catch {
+      return;
+    }
+
+    const css = getComputedStyle(document.documentElement);
+    const accent = css.getPropertyValue("--accent").trim() || "#2ff5ff";
+    const accentStrong = css.getPropertyValue("--accent-strong").trim() || "#ff45e6";
+    const bg = css.getPropertyValue("--bg").trim() || "#050910";
+
+    const setSize = () => {
+      const { clientWidth, clientHeight } = mount;
+      renderer!.setSize(clientWidth, clientHeight, false);
+      renderer!.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5));
+      if (camera) {
+        camera.aspect = clientWidth / clientHeight;
+        camera.updateProjectionMatrix();
+      }
+    };
+
+    setSize();
+
+    scene = new THREE.Scene();
+    scene.fog = new THREE.FogExp2(new THREE.Color(bg), 0.035);
+
+    camera = new THREE.PerspectiveCamera(52, 1, 0.1, 200);
+    camera.position.set(0, 10, 28);
+    camera.lookAt(0, 0, 0);
+
+    // Grid geometry (wireframe plane)
+    const gridSize = 64;
+    const step = 1.6;
+    const points: number[] = [];
+    for (let i = -gridSize; i <= gridSize; i += step) {
+      points.push(-gridSize, 0, i, gridSize, 0, i); // lines parallel X
+      points.push(i, 0, -gridSize, i, 0, gridSize); // lines parallel Z
+    }
+    const gridGeometry = new THREE.BufferGeometry();
+    gridGeometry.setAttribute("position", new THREE.Float32BufferAttribute(points, 3));
+    const gridMaterial = new THREE.LineBasicMaterial({
+      color: new THREE.Color(accent),
+      transparent: true,
+      opacity: 0.22,
+      depthWrite: false,
+      blending: THREE.AdditiveBlending,
+    });
+    grid = new THREE.LineSegments(gridGeometry, gridMaterial);
+    grid.rotation.x = -0.4;
+    grid.position.y = -6;
+    scene.add(grid);
+
+    // Aurora sheet
+    const auroraGeometry = new THREE.PlaneGeometry(80, 60, 1, 1);
+    auroraMaterial = new THREE.ShaderMaterial({
+      transparent: true,
+      depthWrite: false,
+      uniforms: {
+        time: { value: 0 },
+        color1: { value: new THREE.Color(accent) },
+        color2: { value: new THREE.Color(accentStrong) },
+      },
+      vertexShader: `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+      fragmentShader: `
+        uniform float time;
+        uniform vec3 color1;
+        uniform vec3 color2;
+        varying vec2 vUv;
+        float noise(vec2 p){
+          return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
+        }
+        void main() {
+          float n = noise(vUv * 40.0 + time * 0.3);
+          float wave = sin((vUv.y + time * 0.08) * 12.0) * 0.5 + 0.5;
+          float alpha = smoothstep(0.05, 0.35, wave) * 0.35;
+          vec3 tint = mix(color1, color2, wave * 0.6 + n * 0.25);
+          gl_FragColor = vec4(tint, alpha);
+        }
+      `,
+      blending: THREE.AdditiveBlending,
+    });
+    aurora = new THREE.Mesh(auroraGeometry, auroraMaterial);
+    aurora.position.set(0, 6, -18);
+    aurora.rotation.x = -0.3;
+    scene.add(aurora);
+
+    const resizeObserver = new ResizeObserver(setSize);
+    resizeObserver.observe(mount);
+
+    const renderFrame = (now: number) => {
+      if (disposed || !renderer || !scene || !camera) return;
+      if (now - lastFrame < FRAME_INTERVAL) {
+        raf = requestAnimationFrame(renderFrame);
+        return;
+      }
+      lastFrame = now;
+      const t = now * 0.001;
+      if (grid) {
+        grid.position.z = (t * 4) % step;
+      }
+      if (auroraMaterial) {
+        auroraMaterial.uniforms.time.value = t;
+      }
+      renderer.render(scene, camera);
+      raf = requestAnimationFrame(renderFrame);
+    };
+
+    raf = requestAnimationFrame(renderFrame);
+
+    return () => {
+      disposed = true;
+      cancelAnimationFrame(raf);
+      resizeObserver.disconnect();
+      renderer?.dispose();
+      grid?.geometry.dispose();
+      if (Array.isArray(grid?.material)) {
+        grid?.material.forEach((m) => m.dispose());
+      } else {
+        grid?.material.dispose();
+      }
+      auroraGeometry.dispose();
+      auroraMaterial?.dispose();
+      scene?.clear();
+    };
+  }, [active]);
+
+  if (!active) return null;
+
+  return (
+    <div className="background-canvas" ref={mountRef} aria-hidden>
+      <canvas ref={canvasRef} />
+    </div>
+  );
+};
+
+export default BackgroundCanvas;

desktop/src/renderer/components/BackgroundCanvas.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import useFocusTrap from "../hooks/useFocusTrap";
 import { useI18n } from "../locales";
@@ -33,6 +33,16 @@ interface CommandPaletteProps {
   onClose: () => void;
 }
 
+const FX_STORAGE_KEY = "darkmesh-palette-fx";
+
+const getInitialFxSetting = (): boolean => {
+  if (typeof window === "undefined") return true;
+  const stored = window.localStorage.getItem(FX_STORAGE_KEY);
+  if (stored === "off") return false;
+  if (stored === "on") return true;
+  return true;
+};
+
 const CommandPalette: React.FC<CommandPaletteProps> = ({
   open,
   query,
@@ -48,11 +58,18 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
   const { messages } = useI18n();
   const paletteText = messages.paletteUi;
   const dialogRef = useRef<HTMLDivElement>(null);
+  const [fxEnabled, setFxEnabled] = useState<boolean>(() => getInitialFxSetting());
+
   useEffect(() => {
     if (!open) return;
     window.setTimeout(() => inputRef.current?.focus(), 0);
   }, [inputRef, open]);
 
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(FX_STORAGE_KEY, fxEnabled ? "on" : "off");
+  }, [fxEnabled]);
+
   useFocusTrap(dialogRef, { active: open, initialFocus: inputRef.current, onEscape: onClose });
 
   if (!open) return null;
@@ -61,10 +78,10 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
   const descriptionId = "command-palette-hint";
 
   return (
-    <div className="command-palette-backdrop" role="presentation" onMouseDown={onClose}>
+    <div className={`command-palette-backdrop ${fxEnabled ? "fx-on" : "fx-off"}`} role="presentation" onMouseDown={onClose}>
       <section
         ref={dialogRef}
-        className="command-palette"
+        className={`command-palette ${fxEnabled ? "fx-on" : "fx-off"}`}
         role="dialog"
         aria-modal="true"
         aria-labelledby={titleId}
@@ -76,9 +93,20 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
             <p className="eyebrow">{paletteText.eyebrow}</p>
             <h3 id={titleId}>{paletteText.title}</h3>
           </div>
-          <button className="ghost small" type="button" onClick={onClose}>
-            {paletteText.close}
-          </button>
+          <div className="command-palette-actions">
+            <button
+              className="ghost small"
+              type="button"
+              onClick={() => setFxEnabled((prev) => !prev)}
+              aria-pressed={fxEnabled}
+              title={fxEnabled ? "Turn off palette visuals" : "Turn on palette visuals"}
+            >
+              {fxEnabled ? "FX on" : "FX off"}
+            </button>
+            <button className="ghost small" type="button" onClick={onClose}>
+              {paletteText.close}
+            </button>
+          </div>
         </div>
 
         <label className="command-palette-input">