nullorder.github.io/index.html at main · nullorder/nullorder.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Silkscreen&display=swap" rel="stylesheet">
<style>
  html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:'Silkscreen',monospace;color:#fff}
  canvas{display:block;width:100%;height:100%}
  a.x{position:fixed;left:50%;top:78%;transform:translate(-50%,-50%);color:#fff;text-decoration:none;font-size:28px;font-family:'Silkscreen',monospace;z-index:1;opacity:0;transition:opacity .8s ease}
  a.x.show{opacity:1}
  a.x:hover{opacity:.7}
</style>
</head>
<body>
<canvas id="c"></canvas>
<a class="x" href="https://x.com/orderofnull" target="_blank" rel="noopener">𝕏</a>
<script>
(() => {
  const c = document.getElementById('c');
  const ctx = c.getContext('2d');
  const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.';
  const FILL_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  const TITLE = 'NULLORDER';
  const TAGLINE = 'An open community for the curious';
  const TAGLINE_OFFSET = 3; // empty-row gap below title before tagline starts
  const CELL = 28; // css px per character cell
  const FLIP_MS = 45; // time per flap step
  const BLACKOUT_START = 2500; // ms after load before non-target cells start going black
  const BLACKOUT_DURATION = 6000; // ms over which they all go black
  const xLink = document.querySelector('a.x');
  let W, H, cols, rows, cells, startX, startY, t0, xShown;

  function init() {
    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);

    cols = Math.floor(W / CELL);
    rows = Math.floor(H / CELL);
    startX = (W - cols * CELL) / 2;
    startY = (H - rows * CELL) / 2;

    // Build a map of target positions → character. Title at 40% from top, tagline
    // word-wrapped to fit the viewport and centered below it.
    const baseRow = (rows * 0.4) | 0;
    const targets = new Map();
    const place = (text, r) => {
      const cStart = ((cols - text.length) / 2) | 0;
      for (let i = 0; i < text.length; i++) {
        // Leave spaces as regular fill cells so they black out into real gaps
        // instead of resolving to a stray character.
        if (text[i] === ' ') continue;
        targets.set(r * cols + (cStart + i), text[i]);
      }
    };
    place(TITLE, baseRow);

    const maxWidth = Math.max(8, cols - 4);
    const wrapped = [];
    let cur = '';
    for (const word of TAGLINE.split(' ')) {
      if (!cur) { cur = word; }
      else if (cur.length + 1 + word.length <= maxWidth) { cur += ' ' + word; }
      else { wrapped.push(cur); cur = word; }
    }
    if (cur) wrapped.push(cur);
    for (let li = 0; li < wrapped.length; li++) {
      place(wrapped[li], baseRow + TAGLINE_OFFSET + li);
    }

    cells = new Array(cols * rows);
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < cols; x++) {
        const key = y * cols + x;
        let isTarget = false;
        let target;
        if (targets.has(key)) {
          target = targets.get(key);
          isTarget = true;
        } else {
          // Non-target cells settle on a random letter (so the whole board reads
          // as a wall of characters, then individually blacks out later).
          target = FILL_CHARS[(Math.random() * FILL_CHARS.length) | 0];
        }
        const targetIdx = CHARS.indexOf(target);
        const startIdx = (Math.random() * CHARS.length) | 0;
        const distance = (targetIdx - startIdx + CHARS.length) % CHARS.length;
        // Extra full cycles must be whole multiples of CHARS.length so we land on target.
        const flips = distance + CHARS.length * (1 + ((Math.random() * 3) | 0));
        cells[y * cols + x] = {
          idx: startIdx,
          flipsLeft: flips,
          nextAt: 200 + Math.random() * 1500,
          isTarget,
          // When this non-target cell goes black, randomly distributed over the blackout window
          blackAt: isTarget ? Infinity : BLACKOUT_START + Math.random() * BLACKOUT_DURATION,
          black: false,
        };
      }
    }
    t0 = performance.now();
    xShown = false;
    if (xLink) xLink.classList.remove('show');
  }

  function frame(now) {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, W, H);
    ctx.fillStyle = '#fff';
    ctx.font = Math.floor(CELL * 0.8) + "px 'Silkscreen', monospace";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const elapsed = now - t0;
    let allTargetsDone = true;
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < cols; x++) {
        const cc = cells[y * cols + x];
        if (cc.flipsLeft > 0 && now >= cc.nextAt) {
          cc.idx = (cc.idx + 1) % CHARS.length;
          cc.flipsLeft--;
          cc.nextAt = now + FLIP_MS + Math.random() * 30;
        }
        if (cc.isTarget && cc.flipsLeft > 0) allTargetsDone = false;
        if (!cc.black && elapsed >= cc.blackAt) cc.black = true;
        if (cc.black) continue;
        const ch = CHARS[cc.idx];
        ctx.fillText(ch, startX + x * CELL + CELL / 2, startY + y * CELL + CELL / 2);
      }
    }
    if (!xShown && allTargetsDone) {
      xShown = true;
      if (xLink) xLink.classList.add('show');
    }
    requestAnimationFrame(frame);
  }

  addEventListener('resize', init);
  document.fonts.ready.then(() => { init(); requestAnimationFrame(frame); });
})();
</script>
</body>
</html>