From c05b185b991ab69b10b5fdf6b6bac97e7aeb9ff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=97=D0=B5=D1=84=D0=B8?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B2?= <d3piis@gmail.com>
Date: Sun, 12 Jul 2026 00:13:14 +0400
Subject: [PATCH] feat: crisp HUD charts (drop blur glow) + richer cyber
 backdrop

- Remove the drop-shadow blur from SlippageCurve/DepthHistory/HealthRadial so
  the segmented meter, depth trace and health dial render crisp.
- CyberGrid: add a dotted survey field, two targeting reticles, a katakana
  lexicon rail, corner brackets and a coordinate header alongside the existing
  survey lines and decoding labels.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/web/src/components/DepthHistory.tsx  |  7 +--
 apps/web/src/components/HealthRadial.tsx  |  2 +-
 apps/web/src/components/SlippageCurve.tsx |  1 -
 apps/web/src/components/fx/CyberGrid.tsx  | 71 +++++++++++++++++++----
 4 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/components/DepthHistory.tsx b/apps/web/src/components/DepthHistory.tsx
index d90b279..ea60f5d 100644
--- a/apps/web/src/components/DepthHistory.tsx
+++ b/apps/web/src/components/DepthHistory.tsx
@@ -45,12 +45,7 @@ export function DepthHistory({
   const gid = `dh-${salt}`;
 
   return (
-    <svg
-      viewBox={`0 0 ${W} ${H}`}
-      className="h-14 w-full"
-      aria-hidden
-      style={{ filter: "drop-shadow(0 0 3px rgba(200, 255, 0, 0.4))" }}
-    >
+    <svg viewBox={`0 0 ${W} ${H}`} className="h-14 w-full" aria-hidden>
       <defs>
         <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
           <stop offset="0%" stopColor="#c8ff00" stopOpacity="0.22" />
diff --git a/apps/web/src/components/HealthRadial.tsx b/apps/web/src/components/HealthRadial.tsx
index 594d48d..b66c958 100644
--- a/apps/web/src/components/HealthRadial.tsx
+++ b/apps/web/src/components/HealthRadial.tsx
@@ -24,7 +24,7 @@ export function HealthRadial({ score }: { score: number }) {
         <circle cx={CX} cy={CY} r="37" fill="none" stroke="#1c1c1c" strokeWidth="1" />
 
         {/* dial ticks */}
-        <g style={{ filter: `drop-shadow(0 0 2.5px ${color})` }}>
+        <g>
           {Array.from({ length: TICKS }, (_, i) => {
             const deg = START + (i / (TICKS - 1)) * SWEEP;
             const on = i < lit;
diff --git a/apps/web/src/components/SlippageCurve.tsx b/apps/web/src/components/SlippageCurve.tsx
index f4f8a20..8357af5 100644
--- a/apps/web/src/components/SlippageCurve.tsx
+++ b/apps/web/src/components/SlippageCurve.tsx
@@ -32,7 +32,6 @@ export function SlippageCurve({ liquidityUsd }: { liquidityUsd: number }) {
               preserveAspectRatio="none"
               viewBox={`0 0 ${CELLS * STEP} 12`}
               aria-hidden
-              style={{ filter: `drop-shadow(0 0 2.5px ${color})` }}
             >
               {Array.from({ length: CELLS }, (_, i) => {
                 const lit = i < on;
diff --git a/apps/web/src/components/fx/CyberGrid.tsx b/apps/web/src/components/fx/CyberGrid.tsx
index 2265470..e8aabf0 100644
--- a/apps/web/src/components/fx/CyberGrid.tsx
+++ b/apps/web/src/components/fx/CyberGrid.tsx
@@ -1,9 +1,31 @@
+import type { CSSProperties } from "react";
 import { Scramble } from "./Scramble";
 
+/** A small targeting reticle: dashed halo, ring, crosshair ticks, center dot. */
+function Reticle({ className, style }: { className?: string; style?: CSSProperties }) {
+  return (
+    <svg viewBox="0 0 64 64" className={className} style={style} aria-hidden>
+      <circle cx="32" cy="32" r="27" fill="none" stroke="#8a5cff" strokeWidth="0.6" strokeOpacity="0.22" strokeDasharray="1.5 4.5" />
+      <circle cx="32" cy="32" r="19" fill="none" stroke="#8a5cff" strokeWidth="1" strokeOpacity="0.55" />
+      <circle cx="32" cy="32" r="1.8" fill="#8a5cff" fillOpacity="0.8" />
+      <g stroke="#8a5cff" strokeWidth="1" strokeOpacity="0.55">
+        <line x1="32" y1="5" x2="32" y2="14" />
+        <line x1="32" y1="50" x2="32" y2="59" />
+        <line x1="5" y1="32" x2="14" y2="32" />
+        <line x1="50" y1="32" x2="59" y2="32" />
+      </g>
+    </svg>
+  );
+}
+
+// Romanised DeFi lexicon in katakana/kanji, read top-to-bottom on the rail.
+const TERMS = "ハッシュ ・ 流動性 ・ デプス ・ ヴォルト ・ チェーン ・ 報酬 ・ 清算 ・ スプレッド ・ 市場深度";
+
 /**
- * Site-wide cyber backdrop: survey column lines, cross marks, barcode ticks and
- * decoding mono/kanji labels. Fixed behind all content, palette-clean, static
- * except the two decoding labels. Drop one per non-hero screen.
+ * Site-wide cyber backdrop: dotted survey field, column lines with cross
+ * marks, targeting reticles, decoding mono/kanji labels and corner brackets.
+ * Fixed behind all content, palette-clean, static except the decoding labels.
+ * Drop one per non-hero screen.
  */
 export function CyberGrid() {
   return (
@@ -11,6 +33,15 @@ export function CyberGrid() {
       aria-hidden
       className="pointer-events-none fixed inset-0 -z-10 overflow-hidden"
     >
+      {/* dotted survey field */}
+      <div
+        className="absolute inset-0 opacity-40"
+        style={{
+          backgroundImage: "radial-gradient(#3d3d3d 0.5px, transparent 0.6px)",
+          backgroundSize: "24px 24px",
+        }}
+      />
+
       {/* survey column lines with cross marks */}
       <div className="relative mx-auto h-full max-w-7xl px-4 md:px-8">
         {[25, 50, 75].map((p) => (
@@ -32,23 +63,41 @@ export function CyberGrid() {
         ))}
       </div>
 
-      {/* corner locators */}
+      {/* corner brackets */}
+      <div className="absolute left-3 top-3 hidden h-6 w-6 border-l border-t border-edge/60 md:block" />
+      <div className="absolute bottom-3 right-3 hidden h-6 w-6 border-b border-r border-edge/60 md:block" />
+
+      {/* top coordinate header */}
+      <span className="absolute right-4 top-4 hidden font-mono text-[9px] uppercase tracking-[0.3em] text-fog-dim/45 md:block">
+        チェーン ・ RH-L2 4663 ・ E-2026.07
+      </span>
+
+      {/* targeting reticles */}
+      <Reticle className="absolute right-8 top-16 hidden h-16 w-16 xl:block" style={{ opacity: 0.55 }} />
+      <Reticle className="absolute left-[7%] top-[46%] hidden h-11 w-11 xl:block" style={{ opacity: 0.35 }} />
+
+      {/* katakana lexicon rail */}
+      <span
+        className="absolute right-5 top-1/2 hidden -translate-y-1/2 font-mono text-[9px] uppercase tracking-[0.28em] text-fog-dim/40 xl:block"
+        style={{ writingMode: "vertical-rl" }}
+      >
+        {TERMS}
+      </span>
+
+      {/* corner locators (decoding labels) */}
       <span className="absolute left-4 top-28 hidden font-mono text-[9px] uppercase leading-[1.6] tracking-[0.24em] text-fog-dim/45 md:block">
         <Scramble text="Desk 00 // Surface data" interval={13000} />
         <br />
         ▚▞▚▚ ▞▚▞▚
       </span>
 
-      <span
-        className="absolute right-4 top-1/3 hidden font-mono text-[9px] uppercase tracking-[0.3em] text-fog-dim/45 xl:block"
-        style={{ writingMode: "vertical-rl" }}
-      >
-        流動性デスク // RH-L2 4663
-      </span>
-
       <span className="absolute bottom-8 left-4 hidden font-mono text-[9px] uppercase tracking-[0.22em] text-fog-dim/40 md:block">
         <Scramble text="Accuracy not guaranteed" interval={15000} /> // 市場深度
       </span>
+
+      <span className="absolute bottom-8 right-4 hidden font-mono text-[9px] uppercase tracking-[0.22em] text-fog-dim/35 lg:block">
+        市場深度 // Surface data
+      </span>
     </div>
   );
 }