PHOTOGRAPHIC DEPTH: subtle CSS vignette + soft top-down directional gradient over the canvas (multiply blend, z-index 5 under HUD, pointer-events none) — adds photographic corner falloff + depth with ZERO GL/render cost (does not touch the WebGL pipeline). Light touch per ART-DIRECTION, not a heavy post stack. FPS 72, errorCount 0

d2c6df4354aa29aba617adb8e4986b999f275eb8 · 2026-06-27 12:28:59 -0700 · Steve

Files touched

M public/showroom.html

Diff

commit d2c6df4354aa29aba617adb8e4986b999f275eb8
Author: Steve <steve@designerwallcoverings.com>
Date:   Sat Jun 27 12:28:59 2026 -0700

    PHOTOGRAPHIC DEPTH: subtle CSS vignette + soft top-down directional gradient over the canvas (multiply blend, z-index 5 under HUD, pointer-events none) — adds photographic corner falloff + depth with ZERO GL/render cost (does not touch the WebGL pipeline). Light touch per ART-DIRECTION, not a heavy post stack. FPS 72, errorCount 0
---
 public/showroom.html | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/public/showroom.html b/public/showroom.html
index c1a5836..f2f5ef0 100644
--- a/public/showroom.html
+++ b/public/showroom.html
@@ -42,7 +42,18 @@
     #dpad .dp-r { grid-column:3; grid-row:2; } #dpad .dp-b { grid-column:2; grid-row:3; }
     @media (pointer:coarse) { #dpad { display:grid; } }
     .room-thumb { margin-top:8px; width:100%; border-radius:6px; display:none; }
-  </style>
+    /* PHOTOGRAPHIC DEPTH — a faint vignette + soft top-down directional gradient over
+       the WebGL canvas (CSS only, zero render cost — does NOT touch the GL pipeline,
+       so FPS is untouched). Sits above the canvas, below the HUD; never eats clicks.
+       Kept SUBTLE per ART-DIRECTION: a touch of photographic falloff, not a heavy
+       post stack. multiply blend so it darkens the room, not the HUD. */
+    #photo-depth {
+      position:fixed; inset:0; z-index:5; pointer-events:none; mix-blend-mode:multiply;
+      background:
+        linear-gradient(180deg, rgba(28,28,34,0.10) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 80%, rgba(28,28,34,0.07) 100%),
+        radial-gradient(120% 90% at 50% 42%, rgba(255,255,255,0) 58%, rgba(20,18,22,0.10) 86%, rgba(16,14,18,0.20) 100%);
+    }
+</style>
 </head>
 <body>
   <!-- Loading Screen -->
@@ -178,6 +189,8 @@
   </div>
 
   <canvas id="showroom-canvas"></canvas>
+  <!-- Photographic depth: subtle CSS vignette + soft directional gradient (no GL cost) -->
+  <div id="photo-depth"></div>
 
   <!-- Mobile touch d-pad -->
   <div id="dpad">

← c49c3db CONTACT GROUNDING: soft radial-gradient contact shadows on t · back to Quadrille Showroom · auto-save: 2026-06-27T12:39:11 (1 files) — public/js/showroo b44c0aa →