index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Null Order</title>
    <meta name="description" content="An open community for the curious." />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="apple-touch-icon" href="nullorder.png" />
    <meta property="og:title" content="Null Order" />
    <meta
      property="og:description"
      content="An open community for the curious."
    />
    <meta property="og:image" content="og-image.png" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Null Order" />
    <meta
      name="twitter:description"
      content="An open community for the curious."
    />
    <meta name="twitter:image" content="og-image.png" />
    <link
      rel="preload"
      href="fonts/Pixelspace-Regular.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <style>
      @font-face {
        font-family: "Pixelspace";
        src: url("fonts/Pixelspace-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      html,
      body {
        margin: 0;
        height: 100%;
        background: #000;
        overflow: hidden;
        font-family: "Pixelspace", monospace;
        color: #fff;
      }
      canvas {
        display: block;
        width: 100%;
        height: 100%;
      }
      .social {
        position: fixed;
        left: 50%;
        top: 78%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.8s ease;
      }
      .social.show {
        opacity: 1;
      }
      .social a {
        display: inline-flex;
        align-items: center;
        color: #fff;
        text-decoration: none;
        font-size: 40px;
        line-height: 1;
        font-family: "Pixelspace", monospace;
        padding: 8px; /* roomier tap target */
        transition: opacity 0.2s ease;
        -webkit-tap-highlight-color: transparent;
      }
      @media (hover: hover) {
        .social a:hover {
          opacity: 0.7;
        }
      }
      .social svg {
        display: block;
        height: 30px;
        width: auto;
        fill: currentColor;
      }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
    <div class="social">
      <a
        href="https://x.com/orderofnull"
        target="_blank"
        rel="noopener"
        aria-label="X"
        >𝕏</a
      >
      <a
        href="https://discord.gg/AJMEeFXxXy"
        target="_blank"
        rel="noopener"
        aria-label="Discord"
      >
        <svg viewBox="0 0 127.14 96.36" role="img" aria-hidden="true">
          <path
            d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
          />
        </svg>
      </a>
    </div>
    <script>
      (() => {
        const c = document.getElementById("c");
        const ctx = c.getContext("2d");
        const off = document.createElement("canvas");
        const offCtx = off.getContext("2d", { willReadFrequently: true });
        const TITLE = ["NULLORDER"];
        const TITLE_SPLIT = ["NULL", "ORDER"]; // stacked title for narrow screens
        const TAGLINE = "An Open Guild";
        const CELL_MAX = 14; // css px per pixel-cell (each "box" of the letter)
        const CELL_MIN = 4;
        const CELL_SPLIT = 10; // below this cell size, try the stacked title
        const MARGIN = 2; // empty cells kept on each side of the text
        const SOCIAL_SPACE = 88; // css px reserved under the text for the links
        const BLOCK_RATIO = 0.78; // visible box is BLOCK_RATIO * cell, rest is gap
        const FLICKER_MIN = 60; // ms between random flickers
        const FLICKER_MAX = 180;
        const SETTLE_START = 1100; // ms after load before cells start locking in
        const SETTLE_DURATION = 4200;
        const TITLE_TAGLINE_GAP = 4; // empty pixel-rows between title and tagline
        const LINE_GAP = 2; // empty pixel-rows between wrapped tagline lines
        const xLink = document.querySelector(".social");
        let W, H, cell, cols, rows, cells, originX, originY, t0, xShown, blockTile;
        let raf = 0;

        // Render `text` in Pixelspace at its native 7-px grid into the offscreen
        // canvas, then read pixels back as a tight 0/1 bitmap.
        function sample(text) {
          const SIZE = 7; // native grid height
          const PAD = 2;
          offCtx.font = SIZE + "px 'Pixelspace', monospace";
          const m = offCtx.measureText(text);
          const pw = Math.ceil(m.width) + PAD * 2;
          const ph = SIZE * 2 + PAD * 2;
          off.width = pw;
          off.height = ph;
          offCtx.fillStyle = "#000";
          offCtx.fillRect(0, 0, pw, ph);
          offCtx.fillStyle = "#fff";
          offCtx.font = SIZE + "px 'Pixelspace', monospace";
          offCtx.textBaseline = "top";
          offCtx.fillText(text, PAD, PAD);
          const data = offCtx.getImageData(0, 0, pw, ph).data;
          let minX = pw,
            maxX = -1,
            minY = ph,
            maxY = -1;
          for (let y = 0; y < ph; y++) {
            for (let x = 0; x < pw; x++) {
              if (data[(y * pw + x) * 4] > 96) {
                if (x < minX) minX = x;
                if (x > maxX) maxX = x;
                if (y < minY) minY = y;
                if (y > maxY) maxY = y;
              }
            }
          }
          if (maxX < 0) return { w: 0, h: 0, bits: [] };
          const w = maxX - minX + 1,
            h = maxY - minY + 1;
          const bits = new Uint8Array(w * h);
          for (let y = 0; y < h; y++) {
            for (let x = 0; x < w; x++) {
              bits[y * w + x] =
                data[((y + minY) * pw + (x + minX)) * 4] > 96 ? 1 : 0;
            }
          }
          return { w, h, bits };
        }

        function wrap(text, maxW) {
          const words = text.split(" ");
          const lines = [];
          let cur = "";
          for (const word of words) {
            const trial = cur ? cur + " " + word : word;
            if (sample(trial).w > maxW && cur) {
              lines.push(cur);
              cur = word;
            } else {
              cur = trial;
            }
          }
          if (cur) lines.push(cur);
          return lines;
        }

        function stamp(targets, bm, row, cols) {
          const startCol = Math.floor((cols - bm.w) / 2);
          for (let y = 0; y < bm.h; y++) {
            for (let x = 0; x < bm.w; x++) {
              const gx = startCol + x,
                gy = row + y;
              // Clip instead of letting overflow wrap onto the next grid row.
              if (gx < 0 || gx >= cols || gy < 0 || gy >= rows) continue;
              if (bm.bits[y * bm.w + x]) targets.add(gy * cols + gx);
            }
          }
        }

        function stackHeight(lines) {
          return lines.reduce((s, l, i) => s + l.h + (i ? LINE_GAP : 0), 0);
        }

        // Try to lay the title + tagline out on a grid of `size`-px cells.
        // Returns null when something would overflow, unless `force` is set.
        function layout(titleLines, size, force) {
          const c = Math.floor(W / size);
          const maxW = Math.max(1, c - MARGIN * 2);
          const title = titleLines.map(sample);
          const tagline = wrap(TAGLINE, maxW).map(sample);
          const h = stackHeight(title) + TITLE_TAGLINE_GAP + stackHeight(tagline);
          const fits =
            title.concat(tagline).every((l) => l.w <= maxW) &&
            (h + MARGIN) * size + SOCIAL_SPACE <= H;
          if (!fits && !force) return null;
          return { size, title, tagline, h };
        }

        // Largest cell size at which `titleLines` fits the viewport.
        function fit(titleLines) {
          for (let s = CELL_MAX; s >= CELL_MIN; s--) {
            const l = layout(titleLines, s);
            if (l) return l;
          }
          return layout(titleLines, CELL_MIN, true);
        }

        // Prefer the one-line title; stack it when that buys noticeably
        // bigger cells (phones in portrait).
        function chooseLayout() {
          const one = fit(TITLE);
          if (one.size >= CELL_SPLIT) return one;
          const two = fit(TITLE_SPLIT);
          return two.size > one.size ? two : one;
        }

        // Pre-render the Pixelspace full-block glyph (U+2588) once into an
        // offscreen tile. In this font the block is itself a 5x7 grid of pixel
        // dots, so each lit cell becomes a real Pixelspace "pixel" rather than a
        // flat square. Cached as a bitmap so the per-frame cost stays a cheap
        // drawImage instead of thousands of fillText calls.
        function buildBlockTile() {
          const dpr = devicePixelRatio || 1;
          const block = Math.floor(cell * BLOCK_RATIO);
          const px = Math.max(1, Math.round(block * dpr));
          blockTile = document.createElement("canvas");
          blockTile.width = px;
          blockTile.height = px;
          const g = blockTile.getContext("2d");
          // Glyph ink box in font units (Pixelspace-Regular):
          // x:[0,610], y:[-235,625], unitsPerEm 875.
          const EM = 875,
            INK_W = 610,
            INK_H = 860,
            TOP = 625,
            FS = 100;
          g.font = FS + "px 'Pixelspace', monospace";
          g.textAlign = "left";
          g.textBaseline = "alphabetic";
          g.fillStyle = "#fff";
          const inkW = (INK_W * FS) / EM;
          const inkH = (INK_H * FS) / EM;
          const top = (TOP * FS) / EM;
          // Stretch the glyph's ink box to fill the square tile.
          g.setTransform(px / inkW, 0, 0, px / inkH, 0, 0);
          g.fillText("█", 0, top);
        }

        // `restart` replays the intro; otherwise (e.g. a resize, or a mobile
        // URL bar collapsing) the grid is rebuilt on the original timeline, so
        // cells that had already locked in stay locked in.
        function init(restart) {
          const dpr = devicePixelRatio || 1;
          W = innerWidth;
          H = innerHeight;
          c.width = W * dpr;
          c.height = H * dpr;
          c.style.width = W + "px";
          c.style.height = H + "px";
          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

          const lay = chooseLayout();
          cell = lay.size;
          buildBlockTile();
          cols = Math.floor(W / cell);
          rows = Math.floor(H / cell);
          originX = (W - cols * cell) / 2;
          originY = (H - rows * cell) / 2;

          // Vertically center the whole title+tagline block around 45% from
          // top, but keep room underneath for the social links.
          const maxRow = Math.floor((H - originY - SOCIAL_SPACE) / cell) - lay.h;
          let row = Math.max(
            Math.min(MARGIN, Math.max(0, maxRow)),
            Math.min(maxRow, Math.floor(rows * 0.45 - lay.h / 2)),
          );
          const targets = new Set();
          const blocks = [lay.title, lay.tagline];
          for (let b = 0; b < blocks.length; b++) {
            if (b) row += TITLE_TAGLINE_GAP - LINE_GAP;
            for (const line of blocks[b]) {
              stamp(targets, line, row, cols);
              row += line.h + LINE_GAP;
            }
          }
          row -= LINE_GAP;

          // Links sit midway between the text and the bottom edge.
          if (xLink) {
            const textBottom = originY + row * cell;
            xLink.style.top = (textBottom + H) / 2 + "px";
          }

          cells = new Array(cols * rows);
          for (let i = 0; i < cells.length; i++) {
            const isTarget = targets.has(i);
            cells[i] = {
              on: Math.random() < 0.5,
              nextFlip: 200 + Math.random() * 1400,
              isTarget,
              settleAt: SETTLE_START + Math.random() * SETTLE_DURATION,
              settled: false,
            };
          }
          if (restart) {
            t0 = performance.now();
            xShown = false;
            if (xLink) xLink.classList.remove("show");
          }
          if (!raf) raf = requestAnimationFrame(frame);
        }

        function frame(now) {
          ctx.fillStyle = "#000";
          ctx.fillRect(0, 0, W, H);
          ctx.fillStyle = "#fff";

          const elapsed = now - t0;
          const block = Math.floor(cell * BLOCK_RATIO);
          const inset = Math.floor((cell - block) / 2);
          let allSettled = true;
          for (let y = 0; y < rows; y++) {
            for (let x = 0; x < cols; x++) {
              const cc = cells[y * cols + x];
              if (!cc.settled) {
                if (now >= cc.nextFlip) {
                  cc.on = Math.random() < 0.5;
                  cc.nextFlip =
                    now +
                    FLICKER_MIN +
                    Math.random() * (FLICKER_MAX - FLICKER_MIN);
                }
                if (elapsed >= cc.settleAt) {
                  cc.settled = true;
                  cc.on = cc.isTarget;
                } else {
                  allSettled = false;
                }
              }
              if (cc.on) {
                ctx.drawImage(
                  blockTile,
                  originX + x * cell + inset,
                  originY + y * cell + inset,
                  block,
                  block,
                );
              }
            }
          }
          if (!xShown && allSettled) {
            xShown = true;
            if (xLink) xLink.classList.add("show");
          }
          // Stop once everything has locked in; the canvas keeps its last frame.
          raf = allSettled ? 0 : requestAnimationFrame(frame);
        }

        let resizeTimer;
        addEventListener("resize", () => {
          clearTimeout(resizeTimer);
          if (t0 === undefined) return; // fonts not ready yet; first init will size it
          resizeTimer = setTimeout(() => init(false), 100);
        });
        document.fonts.ready.then(() => init(true));
      })();
    </script>
  </body>
</html>