Videos backdrop: dim it behind the graphics + let Steve control its size

afdb60f843743580e8d13ba77208b2b3be8792be · 2026-09-03 11:09:44 -0700 · Steve Abrams

Steve: "put behind my graphics!! ... allow me to expand to the size i
need." The backdrop was rendering at full opacity/dominant scale,
washing out the generative scene on top. Now: opacity 1->0.5 + a dark
scrim, scene dimming eased (0.42->0.85) so the animated art reads
clearly in front, and a Backdrop Size slider (50-200%, localStorage-
persisted) so the video's scale is Steve's call, not a fixed guess.

Files touched

M room/index.html

Diff

commit afdb60f843743580e8d13ba77208b2b3be8792be
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Sep 3 11:09:44 2026 -0700

    Videos backdrop: dim it behind the graphics + let Steve control its size
    
    Steve: "put behind my graphics!! ... allow me to expand to the size i
    need." The backdrop was rendering at full opacity/dominant scale,
    washing out the generative scene on top. Now: opacity 1->0.5 + a dark
    scrim, scene dimming eased (0.42->0.85) so the animated art reads
    clearly in front, and a Backdrop Size slider (50-200%, localStorage-
    persisted) so the video's scale is Steve's call, not a fixed guess.
---
 room/index.html | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/room/index.html b/room/index.html
index e659ab5..7f6f8be 100644
--- a/room/index.html
+++ b/room/index.html
@@ -38,11 +38,14 @@
      archive-tied backdrop, so picking a video in the standalone Videos panel
      never touches that system's state. Muted (the panel's own iframe carries sound). ---- */
   #vrBackdrop{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:#000;opacity:0;transition:opacity 1.4s ease}
-  #vrBackdrop iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
+  #vrBackdrop iframe{position:absolute;top:50%;left:50%;
+    transform:translate(-50%,-50%) scale(var(--vr-bd-scale, 1));
     width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;border:0;pointer-events:none}
-  #stage.vr-bg #vrBackdrop{opacity:1}
-  #stage.vr-bg #sky{opacity:.12}
-  #stage.vr-bg #scene{opacity:.42}
+  /* dimmer + a dark scrim so it reads as BACKGROUND — the generative graphics stay the foreground */
+  #stage.vr-bg #vrBackdrop{opacity:.5}
+  #stage.vr-bg #vrBackdrop::after{content:'';position:absolute;inset:0;background:rgba(8,3,4,.45)}
+  #stage.vr-bg #sky{opacity:.20}
+  #stage.vr-bg #scene{opacity:.85}
   #stage.video-bg.yt-hero #orb{opacity:.5}
   .btn:disabled,button:disabled{opacity:.42;cursor:not-allowed}
   /* ---- Controls in a collapsed RIGHT drawer, opened by the top-right hamburger (TK-11178 UI) ---- */
@@ -290,6 +293,10 @@
     border:1px solid var(--panel-edge);border-radius:9px;padding:6px 10px;font-family:var(--sans);
     font-size:11px;cursor:pointer;margin-bottom:8px}
   .vr-bd-toggle[aria-pressed="true"]{color:var(--gold);border-color:rgba(242,182,74,.5)}
+  .vr-size{margin-bottom:9px}
+  .vr-size label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px}
+  .vr-size .val{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:12px;text-transform:none;letter-spacing:0}
+  .vr-size input[type=range]{width:100%}
   .vr-list{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:2px}
   .vr-row{display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;background:none;border:0;
     color:var(--ink-dim);font-family:var(--sans);font-size:11.5px;padding:6px 6px;cursor:pointer;border-radius:6px}
@@ -1727,6 +1734,24 @@ const MR_VIDEOS=[
     if (on) hideBackdrop(); else if (vr.dataset.curId) showBackdrop({ id: vr.dataset.curId });
   });
   vrEmbed.insertAdjacentElement('beforebegin', bdToggle);
+
+  // size control — how large the backdrop video renders, so it can be dialed to taste
+  const SCALE_KEY = 'vr-bd-scale';
+  const savedScale = parseFloat(localStorage.getItem(SCALE_KEY)) || 1;
+  document.documentElement.style.setProperty('--vr-bd-scale', savedScale);
+  const sizeWrap = document.createElement('div');
+  sizeWrap.className = 'vr-size';
+  sizeWrap.innerHTML = `<label for="vrSize">Backdrop size <span class="val" id="vrSizeV">${Math.round(savedScale*100)}%</span></label>
+    <input type="range" id="vrSize" min="50" max="200" step="5" value="${Math.round(savedScale*100)}" aria-label="Backdrop video size">`;
+  vrEmbed.insertAdjacentElement('beforebegin', sizeWrap);
+  const sizeInput = sizeWrap.querySelector('#vrSize');
+  const sizeVal = sizeWrap.querySelector('#vrSizeV');
+  sizeInput.addEventListener('input', () => {
+    const pct = +sizeInput.value;
+    document.documentElement.style.setProperty('--vr-bd-scale', pct / 100);
+    sizeVal.textContent = pct + '%';
+    localStorage.setItem(SCALE_KEY, pct / 100);
+  });
   MR_VIDEOS.forEach(v => {
     const row = document.createElement('button');
     row.type = 'button';

← ecd6824 Music room UI: tuck chapters, camera views + Museum Label in · back to Dead Agentabrams · Backdrop: full drapery behind the stage, never a cropped clo 8e80e02 →