(function () {
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced) { document.documentElement.className = 'static'; document.body.className = 'static'; return; }
var stack = document.getElementById('stack');
var endEl = document.getElementById('end');
var endDoor = document.querySelector('#end .door');
var skip = document.getElementById('skip');
var elMade = document.getElementById('cmade');
var elRead = document.getElementById('cread');
var made = document.querySelector('#barMade i');
var read = document.querySelector('#barRead i');
var lines = Array.prototype.slice.call(document.querySelectorAll('.line'));
// Real figures from the disclosure. LOGS is what the investigation had to go through;
// READ is what one person could have covered in the same 74 days at a log a second
// without ever sleeping. The lower bar never moves, because that number cannot move.
var LOGS = 7e9, READ = 6393600;
// hold ms, share of the incident elapsed by the end of this beat
var HOLD = [2600, 2600, 2800, 2800, 2600, 3000, 2800, 3000, 3000, 3000, 3600, 3600];
var PROG = [0.02, 0.05, 0.09, 0.20, 0.46, 0.55, 0.62, 0.90, 1.00, 1.00, 1.00, 1.00];
var OUT = 900, DARK = 1200, ENDIN = 1500;
var TOTAL = 0, k;
for (k = 0; k < HOLD.length; k++) TOTAL += HOLD[k];
var t = 0, lastT = 0, i = -1, held = 0, shown = 0;
function clamp(v,a,b){ return vb?b:v; }
function smooth(a,b,x){ var q=clamp((x-a)/(b-a),0,1); return q*q*(3-2*q); }
function commas(n){ return String(Math.round(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
function show(n) {
for (var m = 0; m < lines.length; m++) {
if (m === n) { lines[m].style.transitionDuration = '200ms'; lines[m].classList.add('on'); }
else if (lines[m].classList.contains('on')) lines[m].classList.remove('on');
}
}
function frame(now) {
var dt = lastT ? Math.min((now - lastT)/1000, 0.1) : 0.016;
lastT = now; t += dt*1000;
if (i < HOLD.length) {
if (i < 0) { i = 0; held = 0; show(0); }
else { held += dt*1000;
if (held >= HOLD[i]) { held -= HOLD[i]; i++; if (i < HOLD.length) show(i); } }
}
if (i >= 0 && i < HOLD.length) {
var from = i ? PROG[i-1] : 0;
var p = from + (PROG[i]-from) * smooth(0, 0.8, held/HOLD[i]);
shown = Math.max(shown, p);
var n = LOGS * shown;
elMade.textContent = commas(n);
elRead.textContent = commas(Math.min(READ, n));
// one scale for both bars, so the white one is visibly nothing
made.style.width = (shown * 100).toFixed(3) + '%';
read.style.width = (Math.min(READ, n) / LOGS * 100).toFixed(5) + '%';
}
var after = t - TOTAL;
var out = 1 - smooth(0, OUT, after);
stack.style.opacity = out.toFixed(3);
skip.style.opacity = out.toFixed(3);
skip.style.pointerEvents = out < 0.04 ? 'none' : 'auto';
skip.tabIndex = out < 0.04 ? -1 : 0;
var e = smooth(OUT+DARK, OUT+DARK+ENDIN, after);
endEl.style.opacity = e.toFixed(3);
var on = e > 0.9;
endEl.classList.toggle('on', on);
if (endDoor && endDoor.tabIndex !== (on ? 0 : -1)) endDoor.tabIndex = on ? 0 : -1;
if (e < 1) requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
})();
(function () {
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced) { document.documentElement.className = 'static'; document.body.className = 'static'; return; }
var grid = document.getElementById('grid');
var stack = document.getElementById('stack');
var endEl = document.getElementById('end');
var endDoor = document.querySelector('#end .door');
var skip = document.getElementById('skip');
var elMade = document.getElementById('cmade');
var elRead = document.getElementById('cread');
var lines = Array.prototype.slice.call(document.querySelectorAll('.line'));
// A person gets through roughly two hundred commits in a day, and that number is the
// same in every frame below. Everything else multiplies. The bright squares are what
// you read; the dim ones are the rest of the day's work — present, legible, unread.
var READ = 200;
// year agents made/day hold
var YEARS = [
['2023', 8, 3000],
['2024', 25, 2800],
['2025', 90, 2800],
['2026', 600, 3000],
['2027', 6000, 2800],
['2028', 60000, 2800],
['2029', 600000, 3400]
];
var OUT = 900, DARK = 1200, ENDIN = 1500;
var TOTAL = 0, k;
for (k = 0; k < YEARS.length; k++) TOTAL += YEARS[k][2];
var running = false, t = 0, lastT = 0, i = -1, held = 0;
function clamp(v, a, b) { return v < a ? a : v > b ? b : v; }
function smooth(a, b, x) { var q = clamp((x - a) / (b - a), 0, 1); return q * q * (3 - 2 * q); }
function commas(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
var ROWS = 7, gp = 3;
var availW = Math.min(stack.getBoundingClientRect().width - 4, 900);
var sq = availW < 470 ? 9 : 11;
var COLS = clamp(Math.floor((availW + gp) / (sq + gp)), 10, 53);
var CELLS = ROWS * COLS;
grid.style.setProperty('--sq', sq + 'px');
grid.style.setProperty('--gap', gp + 'px');
var frag = document.createDocumentFragment();
for (k = 0; k < CELLS; k++) frag.appendChild(document.createElement('i'));
grid.appendChild(frag);
var cells = grid.children;
function show(n) {
for (var m = 0; m < lines.length; m++) {
if (m === n) { lines[m].style.transitionDuration = '180ms'; lines[m].classList.add('on'); }
else if (lines[m].classList.contains('on')) lines[m].classList.remove('on');
}
}
function frame(now) {
var dt = lastT ? Math.min((now - lastT) / 1000, 0.1) : 0.016;
lastT = now;
t += dt * 1000;
if (i < YEARS.length) {
if (i < 0) { i = 0; held = 0; show(0); }
else {
held += dt * 1000;
if (held >= YEARS[i][2]) { held -= YEARS[i][2]; i++; if (i < YEARS.length) show(i); }
}
}
if (i >= 0 && i < YEARS.length) {
var made = YEARS[i][1];
var read = Math.min(READ, made);
var ease = smooth(0, 0.55, held / YEARS[i][2]); // the year settles into place
var target = Math.max(1, Math.round(CELLS * (read / made)));
var lit = Math.round(CELLS + (target - CELLS) * ease);
for (var c = 0; c < CELLS; c++) {
var on = c < lit;
if (cells[c].className !== (on ? 'on' : '')) cells[c].className = on ? 'on' : '';
}
elMade.textContent = commas(made);
elRead.textContent = commas(read);
}
var after = t - TOTAL;
var out = 1 - smooth(0, OUT, after);
stack.style.opacity = out.toFixed(3);
skip.style.opacity = out.toFixed(3);
skip.style.pointerEvents = out < 0.04 ? 'none' : 'auto';
skip.tabIndex = out < 0.04 ? -1 : 0;
var e = smooth(OUT + DARK, OUT + DARK + ENDIN, after);
endEl.style.opacity = e.toFixed(3);
var on2 = e > 0.9;
endEl.classList.toggle('on', on2);
if (endDoor && endDoor.tabIndex !== (on2 ? 0 : -1)) endDoor.tabIndex = on2 ? 0 : -1;
if (running && e < 1) requestAnimationFrame(frame);
}
document.getElementById('go').addEventListener('click', function () {
document.getElementById('gate').remove();
running = true;
requestAnimationFrame(frame);
});
})();