MAGMA - SAMIN

by Samin Sami

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>MAGMA — A Liquid Light Instrument</title>
<style>
/* ============================================================
   MAGMA — museum-grade lava lamp
   All chrome recolors from --accent, derived from the palette.
   ============================================================ */
:root{
  --bg:#0B0B0E;
  --accent:#E4572E;
  --accent-r:228; --accent-g:87; --accent-b:46;
  --glowC:rgba(179,58,22,0.85);
  --glowB:0.5;       /* floor glow opacity (JS-driven) */
  --glowT:0.0;       /* ceiling glow opacity (JS-driven) */
  --wmFlip:0;        /* 0 = lit from below, 1 = lit from above */
  --hair:rgba(255,255,255,0.10);
  --ink:rgba(255,255,255,0.82);
  --ink-dim:rgba(255,255,255,0.42);
  --vesselW:min(400px, 84vw, 47vh);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  overflow:hidden;
  user-select:none;-webkit-user-select:none;
}
/* ---------- ambient glows (GPU-composited, opacity driven from JS) ---------- */
#glowFloor,#glowTop{
  position:fixed;left:50%;transform:translateX(-50%);
  width:130vmin;height:46vmin;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, var(--glowC), rgba(0,0,0,0) 72%);
  will-change:opacity;
}
#glowFloor{bottom:-16vmin;opacity:var(--glowB)}
#glowTop{top:-16vmin;opacity:var(--glowT)}
#vignette{
  position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(120% 90% at 50% 46%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
/* ---------- giant wordmark BEHIND the vessel ---------- */
#wordmark{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
 ...