From e0fe9eda8b70c85be2688780b5ad78f549378246 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Tue, 3 Mar 2026 23:00:32 +1300
Subject: [PATCH] style: use 6-layer exponential box-shadow for smooth panel
 shadow

Apply Tobias Ahlin / Josh Comeau layered shadow technique: each
layer doubles offset and blur (1/2/4/8/16/32px) with decreasing
opacity. Each layer covers a narrow distance band so no single
layer interpolates over a large range, eliminating banding.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/ControlPanel.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/nodes/ControlPanel.tsx b/src/components/nodes/ControlPanel.tsx
index 748f6d55..a1ac836d 100644
--- a/src/components/nodes/ControlPanel.tsx
+++ b/src/components/nodes/ControlPanel.tsx
@@ -119,7 +119,16 @@ export function ControlPanel() {
     <div className="fixed top-0 right-6 h-screen z-[50] flex items-center pointer-events-none">
       <div
         className="w-80 bg-neutral-800 border border-neutral-700 rounded-xl max-h-[80vh] overflow-y-auto pointer-events-auto transition-opacity duration-200 nowheel"
-        style={{ boxShadow: '-40px 0 80px 20px rgba(0,0,0,0.5), -10px 0 30px 5px rgba(0,0,0,0.3)' }}
+        style={{
+          boxShadow: [
+            '-1px 0 2px rgba(0,0,0,0.18)',
+            '-2px 0 4px rgba(0,0,0,0.15)',
+            '-4px 0 8px rgba(0,0,0,0.12)',
+            '-8px 0 16px rgba(0,0,0,0.10)',
+            '-16px 0 32px rgba(0,0,0,0.08)',
+            '-32px 0 64px rgba(0,0,0,0.06)',
+          ].join(', '),
+        }}
       >
         <div className="p-4">
           {/* Header */}