generate.ps1

# emits index.html — a raytracer where the CSS engine does ALL the math.
# the output file has zero <script>, zero inline styles, zero per-pixel data.
# every pixel is an identical empty <div>; sibling-index() tells it who it is.
# this script exists only because typing 5184 divs by paw is undignified.

$W = 96
$H = 54
$N = $W * $H

# the shader. one rule, ~90 registered custom props per pixel.
# camera at (0, 1.05, -3.4) looking +z; floor y=0; two spheres resting on it.
# oc vectors and |oc|^2 - r^2 are precomputed by hand and baked in as literals:
#   S1 c=(-0.95, .72, 1.05) r=.72  -> oc=( .95, .33, -4.45)  c1=20.2955
#   S2 c=( .90, .50, 0.15) r=.50  -> oc=(-.90, .55, -3.55)  c2=13.465
$shader = @'
      /* who am i? grid position from nothing but my index */
      --i: calc(sibling-index() - 1);
      --cx: calc(mod(var(--i), 96));
      --cy: calc((var(--i) - var(--cx)) / 96);

      /* primary ray through this pixel (1.7778 = aspect, 1.55 = focal, .16 = pitch) */
      --u: calc(((var(--cx) + 0.5) / 96 * 2 - 1) * 1.7778);
      --ry0: calc(1 - (var(--cy) + 0.5) / 54 * 2 - 0.16);
      --rl: calc(1 / hypot(var(--u), var(--ry0), 1.55));
      --dx: calc(var(--u) * var(--rl));
      --dy: calc(var(--ry0) * var(--rl));
      --dz: calc(1.55 * var(--rl));

      /* sphere 1: b = oc.d, disc = b^2 - c, t = -b - sqrt(disc) */
      --b1: calc(0.95 * var(--dx) + 0.33 * var(--dy) - 4.45 * var(--dz));
      --h1: calc(var(--b1) * var(--b1) - 20.2955);
      --q1: calc(sqrt(max(var(--h1), 0)));
      --t1r: calc(0 - var(--b1) - var(--q1));
      --m1: calc(clamp(0, var(--h1) * 100000, 1) * clamp(0, var(--t1r) * 100000, 1));
      --t1: calc(var(--t1r) * var(--m1) + 100000 - 100000 * var(--m1));

      /* sphere 2 */
      --b2: calc(0 - 0.9 * var(--dx) + 0.55 * var(--dy) - 3.55 * var(--dz));
      --h2: calc(var(--b2) * var(--b2) - 13.465);
      --q2: calc(sqrt(max(var(--h2), 0)));
      --t2r: calc(0 - var(--b2) - var(--q2));
      --m2: calc(clamp(0, var(--h2) * 100000, 1) * clamp(0, var(--t2r) * 100000, 1));
      --t2: calc(var(--t2r) * var(--m2) + 100000 - 100000 * var(--m2));

      /* floor y=0 (camera is at y=1.05, so t = -1.05/dy when looking down) */
      --mf: calc(clamp(0, (0 - var(--dy)) * 100000, 1));
      --tf: calc(-1.05 / min(var(--dy), -0.00002));

      /* nearest hit wins; masks instead of branches. spheres beat floor on ties */
      --tm: calc(min(var(--t1), var(--t2), var(--tf)));
      --s1: calc(var(--m1) * clamp(0, (var(--tm) - var(--t1)) * 100000 + 1, 1));
      --s2: calc(var(--m2) * clamp(0, (var(--tm) - var(--t2)) * 100000 + 1, 1));
      --sfp: calc(var(--mf) * clamp(0, (var(--tm) - var(--tf)) * 100000 + 1, 1));
      --sf: calc(var(--sfp) * (1 - max(var(--s1), var(--s2))));
      --sk: calc(max(0, 1 - var(--s1) - var(--s2) - var(--sf)));

      /* floor: checkerboard + two real shadow rays toward the sun */
      --fx: calc(var(--tf) * var(--dx));
      --fz: calc(var(--tf) * var(--dz) - 3.4);
      --ck: calc(mod(round(down, var(--fx)) + round(down, var(--fz)), 2));
      --sb1: calc((var(--fx) + 0.95) * var(--SX) - 0.72 * var(--SY) + (var(--fz) - 1.05) * var(--SZ));
      --sc1: calc(pow(var(--fx) + 0.95, 2) + pow(var(--fz) - 1.05, 2));
      --sh1: calc(clamp(0, (var(--sb1) * var(--sb1) - var(--sc1)) * 100000, 1) * clamp(0, (0 - var(--sb1)) * 100000, 1));
      --sb2: calc((var(--fx) - 0.9) * var(--SX) - 0.5 * var(--SY) + (var(--fz) - 0.15) * var(--SZ));
      --sc2: calc(pow(var(--fx) - 0.9, 2) + pow(var(--fz) - 0.15, 2));
      --sh2: calc(clamp(0, (var(--sb2) * var(--sb2) - var(--sc2)) * 100000, 1) * clamp(0, (0 - var(--sb2)) * 100000, 1));
      --lit: calc(1 - 0.8 * max(var(--sh1), var(--sh2)));
      --fL: calc(0.18 + 0.85 * var(--lit) * var(--SY));
      --fog: calc(clamp(0, 1 - var(--tf) / 34, 1));
      --fr: calc((0.93 - 0.55 * var(--ck)) * var(--fL) * var(--fog) + 0.99 * (1 - var(--fog)));
      --fg: calc((0.87 - 0.61 * var(--ck)) * var(--fL) * var(--fog) + 0.66 * (1 - var(--fog)));
      --fb: calc((0.82 - 0.37 * var(--ck)) * var(--fL) * var(--fog) + 0.62 * (1 - var(--fog)));

      /* half-vector for blinn-phong, shared by both spheres */
      --hx: calc(var(--SX) - var(--dx));
      --hy: calc(var(--SY) - var(--dy));
      --hz: calc(var(--SZ) - var(--dz));
      --hl: calc(1 / max(hypot(var(--hx), var(--hy), var(--hz)), 0.0001));

      /* sphere 1, matte coral */
      --n1x: calc((var(--t1) * var(--dx) + 0.95) / 0.72);
      --n1y: calc((var(--t1) * var(--dy) + 0.33) / 0.72);
      --n1z: calc((var(--t1) * var(--dz) - 4.45) / 0.72);
      --df1: calc(clamp(0, var(--n1x) * var(--SX) + var(--n1y) * var(--SY) + var(--n1z) * var(--SZ), 1));
      --sp1: calc(pow(clamp(0, (var(--n1x) * var(--hx) + var(--n1y) * var(--hy) + var(--n1z) * var(--hz)) * var(--hl), 1), 60) * 0.9);
      --r1c: calc((0.20 + 0.85 * var(--df1)) * 0.98 + var(--sp1));
      --g1c: calc((0.20 + 0.85 * var(--df1)) * 0.45 + var(--sp1));
      --b1c: calc((0.20 + 0.85 * var(--df1)) * 0.58 + var(--sp1));

      /* sphere 2, mirror periwinkle: reflect the ray, re-trace it against the floor */
      --n2x: calc((var(--t2) * var(--dx) - 0.9) / 0.5);
      --n2y: calc((var(--t2) * var(--dy) + 0.55) / 0.5);
      --n2z: calc((var(--t2) * var(--dz) - 3.55) / 0.5);
      --df2: calc(clamp(0, var(--n2x) * var(--SX) + var(--n2y) * var(--SY) + var(--n2z) * var(--SZ), 1));
      --sp2: calc(pow(clamp(0, (var(--n2x) * var(--hx) + var(--n2y) * var(--hy) + var(--n2z) * var(--hz)) * var(--hl), 1), 90) * 1.2);
      --dn2: calc(var(--dx) * var(--n2x) + var(--dy) * var(--n2y) + var(--dz) * var(--n2z));
      --rx2: calc(var(--dx) - 2 * var(--dn2) * var(--n2x));
      --ry2: calc(var(--dy) - 2 * var(--dn2) * var(--n2y));
      --rz2: calc(var(--dz) - 2 * var(--dn2) * var(--n2z));
      --p2x: calc(var(--t2) * var(--dx));
      --p2y: calc(var(--t2) * var(--dy) + 1.05);
      --p2z: calc(var(--t2) * var(--dz) - 3.4);
      --tr2: calc((0 - var(--p2y)) / min(var(--ry2), -0.00002));
      --mr2: calc(clamp(0, (0 - var(--ry2)) * 100000, 1));
      --ck2: calc(mod(round(down, var(--p2x) + var(--tr2) * var(--rx2)) + round(down, var(--p2z) + var(--tr2) * var(--rz2)), 2));
      --fog2: calc(clamp(0, 1 - var(--tr2) / 30, 1));
      --glt: calc(pow(clamp(0, var(--rx2) * var(--SX) + var(--ry2) * var(--SY) + var(--rz2) * var(--SZ), 1), 250) * 1.4);
      --rfr: calc(((0.93 - 0.55 * var(--ck2)) * 0.75 * var(--fog2) + 0.99 * (1 - var(--fog2))) * var(--mr2) + (0.62 + var(--glt)) * (1 - var(--mr2)));
      --rfg: calc(((0.87 - 0.61 * var(--ck2)) * 0.75 * var(--fog2) + 0.66 * (1 - var(--fog2))) * var(--mr2) + (0.55 + var(--glt) * 0.8) * (1 - var(--mr2)));
      --rfb: calc(((0.82 - 0.37 * var(--ck2)) * 0.75 * var(--fog2) + 0.62 * (1 - var(--fog2))) * var(--mr2) + (0.68 + var(--glt) * 0.55) * (1 - var(--mr2)));
      --r2c: calc((0.10 + 0.25 * var(--df2)) * 0.62 + var(--rfr) * 0.62 + var(--sp2));
      --g2c: calc((0.10 + 0.25 * var(--df2)) * 0.68 + var(--rfg) * 0.62 + var(--sp2));
      --b2c: calc((0.10 + 0.25 * var(--df2)) * 1.00 + var(--rfb) * 0.62 + var(--sp2));

      /* dusk sky + the sun itself */
      --dyc: calc(clamp(0, var(--dy) + 0.12, 1));
      --vgr: calc(pow(var(--dyc), 0.55));
      --sd: calc(clamp(0, var(--dx) * var(--SX) + var(--dy) * var(--SY) + var(--dz) * var(--SZ), 1));
      --glo: calc(pow(var(--sd), 350) * 1.2 + pow(var(--sd), 12) * 0.3);
      --skr: calc(0.99 - 0.83 * var(--vgr) + var(--glo));
      --skg: calc(0.66 - 0.50 * var(--vgr) + var(--glo) * 0.85);
      --skb: calc(0.62 - 0.24 * var(--vgr) + var(--glo) * 0.6);

      /* composite. rgb() clamps for free */
      --R: calc((var(--s1) * var(--r1c) + var(--s2) * var(--r2c) + var(--sf) * var(--fr) + var(--sk) * var(--skr)) * 255);
      --G: calc((var(--s1) * var(--g1c) + var(--s2) * var(--g2c) + var(--sf) * var(--fg) + var(--sk) * var(--skg)) * 255);
      --B: calc((var(--s1) * var(--b1c) + var(--s2) * var(--b2c) + var(--sf) * var(--fb) + var(--sk) * var(--skb)) * 255);
      background-color: rgb(var(--R) var(--G) var(--B));
'@

# the sun lives on the container: one animated number, everything downstream re-solves
$globals = @'
      --az: calc(var(--T) * 6.283185);
      --sx0: calc(cos(var(--az)));
      --sz0: calc(sin(var(--az)));
      --sl: calc(1 / hypot(var(--sx0), 0.82, var(--sz0)));
      --SX: calc(var(--sx0) * var(--sl));
      --SY: calc(0.82 * var(--sl));
      --SZ: calc(var(--sz0) * var(--sl));
'@

# every intermediate MUST be registered as <number>, otherwise custom props
# substitute as raw token soup and the chains blow past the substitution cap
$perDivNames = [regex]::Matches($shader, '(?m)^\s*(--[a-zA-Z0-9]+):') | ForEach-Object { $_.Groups[1].Value }
$globalNames = [regex]::Matches($globals, '(?m)^\s*(--[a-zA-Z0-9]+):') | ForEach-Object { $_.Groups[1].Value }

$props = New-Object System.Text.StringBuilder
[void]$props.AppendLine('    @property --T { syntax: "<number>"; inherits: true; initial-value: 0; }')
foreach ($n in $globalNames) {
  [void]$props.AppendLine("    @property $n { syntax: `"<number>`"; inherits: true; initial-value: 0; }")
}
foreach ($n in $perDivNames) {
  [void]$props.AppendLine("    @property $n { syntax: `"<number>`"; inherits: false; initial-value: 0; }")
}

# the entire screen: N identical empty divs, one per pixel
$row = '<div></div>' * $W
$pixels = New-Object System.Text.StringBuilder
for ($y = 0; $y -lt $H; $y++) { [void]$pixels.AppendLine("    $row") }

$html = @"
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>the overnight raytracer — 100% css</title>
  <style>
$($props.ToString())
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      min-height: 100vh;
      display: grid;
      place-content: center;
      gap: 14px;
      background: #0b0a12;
      color: #b9b2cc;
      font: 14px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
      padding: 24px;
    }
    h1 { font-size: 15px; font-weight: 600; color: #e8e2f7; letter-spacing: .02em; }
    p  { font-size: 12px; max-width: 62ch; color: #8d86a5; }
    a  { color: #c9a6ff; }
    .warn { display: none; color: #ffb3c1; font-size: 12px; max-width: 62ch; }
    @supports not (width: calc(sibling-index() * 1px)) {
      .warn { display: block; }
      .rt { display: none; }
    }
    .frame { max-width: 100%; overflow-x: auto; border-radius: 10px; }

    .rt {
      display: grid;
      /* integer-px cells: 1fr tracks land on fractional pixels and leave seams */
      grid-template-columns: repeat($W, 10px);
      grid-auto-rows: 10px;
      border-radius: 10px;
      overflow: hidden;
      animation: sun 26s linear infinite;
$globals
    }
    @keyframes sun { from { --T: 0; } to { --T: 1; } }
    @media (prefers-reduced-motion: reduce) { .rt { animation-play-state: paused; } }

    .rt div {
      contain: strict;
$shader
    }
  </style>
</head>
<body>
  <h1>the overnight raytracer</h1>
  <p class="warn">your browser doesn't know sibling-index() yet — this needs chrome/edge 138+ (or safari 26.2+).</p>
  <div class="frame"><div class="rt">
$($pixels.ToString())  </div></div>
  <p>every pixel above is an identical, empty &lt;div&gt;. no javascript, no canvas, no images,
     no svg, no inline styles, no per-pixel data. each div works out which pixel it is with
     sibling-index(), builds a camera ray, intersects two spheres and a floor, casts shadow
     rays, bounces a reflection, and paints itself with one rgb(). the sun is a css animation
     on a single registered custom property — your css engine is re-raytracing this scene
     every frame. sweet dreams~ &nbsp;(bonus: <a href="mandelbrot.html">a fractal it also computed</a>)</p>
</body>
</html>
"@

$out = Join-Path $PSScriptRoot 'index.html'
[System.IO.File]::WriteAllText($out, $html, [System.Text.UTF8Encoding]::new($false))
"$out  ($([math]::Round((Get-Item $out).Length / 1KB, 1)) KB, $N pixel divs, $($perDivNames.Count) props per pixel)"