Backdrop: full drapery behind the stage, never a cropped close-up

8e80e027dee6880a4e382f8a415b3a33baa71f49 · 2026-09-03 11:42:07 -0700 · Steve Abrams

Steve: "use as the draperies on a stage basically.. this is bad" —
the previous cover/crop sizing meant a high zoom setting showed an
illegible close-up mush of the poster texture. Switched to
contain-fit (min(100vw,177.78vh) x min(100vh,56.25vw)): the WHOLE
frame is always visible, letterboxed, like a curtain hung behind the
stage riser — zoom now just makes the curtain bigger, never crops
it. Lowered default to 82% and slider range to 40-150%; clamp any
stale localStorage value from the old cover-based slider so a
returning visitor's saved setting doesn't reintroduce the bad look.

Files touched

M room/index.html

Diff

commit 8e80e027dee6880a4e382f8a415b3a33baa71f49
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Sep 3 11:42:07 2026 -0700

    Backdrop: full drapery behind the stage, never a cropped close-up
    
    Steve: "use as the draperies on a stage basically.. this is bad" —
    the previous cover/crop sizing meant a high zoom setting showed an
    illegible close-up mush of the poster texture. Switched to
    contain-fit (min(100vw,177.78vh) x min(100vh,56.25vw)): the WHOLE
    frame is always visible, letterboxed, like a curtain hung behind the
    stage riser — zoom now just makes the curtain bigger, never crops
    it. Lowered default to 82% and slider range to 40-150%; clamp any
    stale localStorage value from the old cover-based slider so a
    returning visitor's saved setting doesn't reintroduce the bad look.
---
 room/index.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/room/index.html b/room/index.html
index 7f6f8be..13502ac 100644
--- a/room/index.html
+++ b/room/index.html
@@ -37,10 +37,13 @@
   /* ---- Videos-panel backdrop — a SEPARATE layer from #venueVideo/TK-11178's
      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%) scale(var(--vr-bd-scale, 1));
-    width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;border:0;pointer-events:none}
+  /* A drapery hung behind the stage, not a wallpaper covering it — the WHOLE frame stays
+     visible (letterboxed), never cropped/zoomed into an illegible close-up. */
+  #vrBackdrop{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:#000;opacity:0;transition:opacity 1.4s ease;
+    display:flex;align-items:center;justify-content:center}
+  #vrBackdrop iframe{border:0;pointer-events:none;
+    width:min(100vw, 177.78vh); height:min(100vh, 56.25vw);
+    transform:scale(var(--vr-bd-scale, .82));}
   /* 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)}
@@ -1737,12 +1740,14 @@ const MR_VIDEOS=[
 
   // 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;
+  // clamp — an old saved value from the pre-fix cover/crop version (which allowed up to 200%)
+  // would look far too large now that the backdrop is fully-contained, never cropped
+  const savedScale = Math.min(1.5, Math.max(.4, parseFloat(localStorage.getItem(SCALE_KEY)) || .82));
   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">`;
+    <input type="range" id="vrSize" min="40" max="150" 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');

← afdb60f Videos backdrop: dim it behind the graphics + let Steve cont · back to Dead Agentabrams · Music room: CONSOLIDATE the two video-backdrop systems into 8f1b9bf →