MIDNIGHT RADIO - Samin Sami

by Samin Sami

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Midnight Radio — a generative ambient station for late hours</title>
<style>
/* ============ MIDNIGHT RADIO ============
   analog hi-fi at 2AM · Built by Samin Sami
========================================== */
:root{
  --accent:#5EEAD4;
  --accent2:#38BDF8;
  --bg0:#0B0E1A;
  --bg1:#111B2E;
  --ink:#C9D2E4;
  --ink-dim:#5A6478;
  --panel:rgba(13,17,30,.72);
  --panel-edge:rgba(255,255,255,.06);
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg0);
  color:var(--ink);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible,#dial:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- scene layers ---------- */
#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 120% 90% at 50% 42%,transparent 55%,rgba(0,0,5,.55) 100%)}
#grain{position:fixed;inset:-100%;pointer-events:none;z-index:4;opacity:.045;
  animation:grainShift 7s steps(9) infinite}
@keyframes grainShift{
  0%{transform:translate(0,0)}11%{transform:translate(-4%,-6%)}22%{transform:translate(3%,-3%)}
  33%{transform:translate(-2%,5%)}44%{transform:translate(5%,2%)}55%{transform:translate(-5%,3%)}
  66%{transform:translate(2%,-5%)}77%{transform:translate(-3%,-2%)}88%{transform:translate(4%,4%)}
  100%{transform:translate(0,0)}}
#scanline{position:fixed;left:0;right:0;top:-2px;height:1px;pointer-events:none;z-index:4;opacity:.09;
 ...