bolyai/CIS490
3
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

training/dashboard(vaporwave): restore scanlines, sky-only, off-resonance, no blend

Browse source 
The scanlines were genuinely the source of the orthogonal-in-3D
artifact, in two compounding ways:

1. mix-blend-mode: multiply on a fullscreen overlay forces an
   isolation group: the browser composites the 3D-rotated floor
   into a flat 2D bitmap underneath the blend, and that
   flattening interacts badly with how Chromium rasterizes
   perspective transforms.

2. The 4px stripe period beats against the perspective floor's
   per-row line spacing (which is dense near the horizon and
   sparse near the viewer). At the screen y where the floor's
   row-spacing crosses 4px, the patterns interfere — producing
   moiré bands that look like a phantom grid orthogonal to the
   floor plane.

Fix: confine scanlines to the sky region above the horizon
(they never touch the perspective grid), drop the multiply
blend (regular alpha compositing), and use a 5px period that
avoids resonance with anything else in the scene.
This commit is contained in:
Max Gorog 2026-05-07 23:57:08 -05:00
parent 775930d35d
commit 243c1d019c
2 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
training/dashboard/static/dashboard.css
View file

@ -217,20 +217,25 @@ body[data-theme="laser"] .bg-laser { display: block; }
to { transform: rotateX(var(--vw-perspective, 62deg))
translateY(var(--vw-grid-size, 80px)); }
}
/* Scanlines: confined to the sky above the horizon. Earlier they
covered the full viewport with mix-blend-mode: multiply — that
created an isolation group that flattened the 3D-rotated floor
into a 2D bitmap below the blend, AND the 4px stripe period
beat against the perspective grid's per-row line spacing
(which crosses 4px at some screen y), producing the
"orthogonal-in-3D" moiré pattern. Confining them to the sky
means they never overlap the floor; dropping the multiply
blend means no 3D-flattening isolation group; the 5px period
is intentionally off any other vaporwave pattern's frequency
so even any subpixel leakage can't resonate. */
.vw-scanlines {
position: absolute; inset: 0; pointer-events: none;
position: absolute; left: 0; right: 0; top: 0;
height: var(--vw-horizon, 55%);
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
transparent 0 2px,
rgba(0, 0, 0, 0.18) 2px 4px);
mix-blend-mode: multiply;
/* Diagnostic: hidden while we hunt the orthogonal-in-3D artifact.
The 4px scanline period beats against the perspective floor's
varying line spacing (which crosses 4px somewhere mid-screen),
potentially producing a moiré pattern that reads as phantom
orthogonal lines. If hiding fixes it, we re-add at a non-resonant
period or without the multiply blend. */
display: none;
transparent 0 3px,
rgba(0, 0, 0, 0.14) 3px 5px);
}
/* laser show — long beams rotating from screen center, palette colors.

2
training/dashboard/static/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CIS490 — live</title>
<link rel="stylesheet" href="/static/dashboard.css?v=667470df">
<link rel="stylesheet" href="/static/dashboard.css?v=24c08b51">
</head>
<body>
<!-- SVG filter defs for the lava-lamp goo effect. Width/height 0