How the stdout showcase site was designed and built.

The hero words fill the viewport exactly, at any width, even before the webfont loads. SVG textLength forces the type to a fixed advance width and preserveAspectRatio="none" lets the band stretch vertically like a xeroxed poster. One catch found in pass 1: letter-spacing on the text element breaks the textLength math in Chromium and the last glyph clips. Leave it off.

<div class="band">
  <svg viewBox="0 0 1000 116" preserveAspectRatio="none">
    <text x="0" y="111" textLength="1000"
          lengthAdjust="spacingAndGlyphs">YOUR LOGS</text>
  </svg>
</div>
/* CSS: the band owns the color pair, the text inherits */
.band svg{width:100%;height:100%}
.band text{font-family:'Archivo Black';font-size:150px;fill:currentColor}

No linear, no ease. Marquees run on steps(240) so they shudder like machinery, and the hover inversion plays a two-frame acid flash before settling. Un-hovering cuts instantly, which is the joke.

.mq-track{display:flex;width:max-content;
  animation:mq 20s steps(240) infinite}
@keyframes mq{to{transform:translateX(-50%)}}

.band:hover{background:#000;color:#fff;
  animation:acid .18s steps(2,end)}
@keyframes acid{
  0%{background:#C6FF00;color:#000}   /* frame 1 */
  50%{background:#000;color:#C6FF00}  /* frame 2 */
}

The terminal demo is one DOM row per log line with two children: the raw JSON string and a CSS grid of columns. A setTimeout timeline appends raw rows, slams a stamp, then flips rows to column mode one by one with a green flash. Monospace plus fixed ch column widths is what makes the "snap" read.

var rows = LOGS.map(rowEl);
rows.forEach(function(r,i){ at(120 + i*105, function(){ tlines.appendChild(r); }); });
var t0 = 120 + LOGS.length*105 + 520;
at(t0, function(){ stamp.classList.add('on'); });   // REFORMAT slams in
rows.forEach(function(r,i){
  at(t0 + 620 + i*85, function(){
    r.classList.add('is-fmt','flash');              // raw -> columns, hard cut
    setTimeout(function(){ r.classList.remove('flash'); }, 130);
  });
});
at(t0 + 620 + rows.length*85 + 3620, cycle);        // hold, then loop

The pointer is replaced with a terminal caret: a green block that snaps to a 6px grid (quantized, never smooth) and blinks when you stop moving. Fine pointers only, and it turns itself off under prefers-reduced-motion.

if (matchMedia('(pointer:fine)').matches && !RM) {
  document.body.classList.add('cur-on');   /* body.cur-on * {cursor:none} */
  document.addEventListener('mousemove', function(e){
    tx = e.clientX; ty = e.clientY;
    cur.classList.add('moving');           /* pauses the blink */
    clearTimeout(idleT);
    idleT = setTimeout(function(){ cur.classList.remove('moving'); }, 260);
  }, {passive:true});
  (function loop(){
    var q = 6;  /* snap to grid = mechanical, not floaty */
    cur.style.transform = 'translate(' + Math.round(tx/q)*q + 'px,' + Math.round(ty/q)*q + 'px)';
    requestAnimationFrame(loop);
  })();
}

The palette bans gray, so every mid-tone is a dot screen: four SVG patterns at different dot radii, stacked into ramps. The same four patterns build the hero ramp, the card corners, and the "photocopy fade" strips where white sections meet black ones.

<pattern id="ht4" width="9" height="9" patternUnits="userSpaceOnUse">
  <circle cx="4.5" cy="4.5" r="3.1" fill="#000"/>
</pattern>
<!-- ht3 r=2.2, ht2 r=1.4, ht1 r=.8 : one screen, four densities -->

<!-- a photocopy fade, white into black -->
<svg class="xfade">
  <rect y="0"  width="100%" height="9" fill="url(#ht1)"/>
  <rect y="9"  width="100%" height="9" fill="url(#ht2)"/>
  <rect y="18" width="100%" height="9" fill="url(#ht3)"/>
  <rect y="27" width="100%" height="9" fill="url(#ht4)"/>
</svg>