/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;
const THEME = {
bg: "#f4f1ea",
ink: "#0a0a0a",
dim: "#7a7569",
line: "#d8d2c4",
accent: "#0a0a0a",
};
const HEADLINE = "catching the next wave";
const SUB = "We're offline while we ship some upgrades. Back online shortly.";
const INTENSITY = 1;
// Layered sine waves drawn on a canvas, behind everything.
function WaveField({ intensity }) {
const canvasRef = useRef(null);
const rafRef = useRef(0);
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
let w = 0, h = 0;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const resize = () => {
w = canvas.clientWidth;
h = canvas.clientHeight;
canvas.width = w * dpr;
canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
};
resize();
const ro = new ResizeObserver(resize);
ro.observe(canvas);
const layers = Array.from({ length: 9 }).map((_, i) => ({
yFrac: 0.18 + i * 0.085,
amp: (10 + i * 3) * intensity,
freq: 0.0035 + i * 0.0006,
speed: 0.00018 + i * 0.00009,
phase: i * 1.7,
width: i < 2 ? 1.4 : 0.7,
alphaMul: i < 2 ? 1 : 0.5 + (1 - i / 9) * 0.5,
}));
const draw = (t) => {
ctx.clearRect(0, 0, w, h);
for (const L of layers) {
const y0 = h * L.yFrac;
ctx.beginPath();
const step = 4;
for (let x = 0; x <= w; x += step) {
const y =
y0 +
Math.sin(x * L.freq + t * L.speed + L.phase) * L.amp +
Math.sin(x * L.freq * 0.4 + t * L.speed * 1.6 + L.phase * 0.7) *
(L.amp * 0.3);
if (x === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.lineWidth = L.width;
ctx.strokeStyle = THEME.ink;
ctx.globalAlpha = 0.10 * L.alphaMul;
ctx.stroke();
}
ctx.globalAlpha = 1;
rafRef.current = requestAnimationFrame(draw);
};
rafRef.current = requestAnimationFrame(draw);
return () => {
cancelAnimationFrame(rafRef.current);
ro.disconnect();
};
}, [intensity]);
return ;
}
// The three triangular wave-motifs from the WAVERUNNER mark, animated.
function HeroMark() {
return (
);
}
// Full WAVERUNNER wordmark for the top-left.
function Wordmark() {
return (
);
}
const LOG_LINES = [
"warming inference cores",
"rotating model weights",
"rebalancing routing tables",
"patching ingestion pipeline",
"vacuuming database indices",
"rolling forward to v2.6.4",
"warming feature store cache",
"verifying signal integrity",
"draining stale connections",
"regenerating embeddings",
"tightening rate limiters",
"redeploying edge workers",
"reseeding prediction queue",
"calibrating confidence bands",
"syncing replicas → us-west-2",
"purging stale auth tokens",
];
function timestamp(offsetMin) {
const d = new Date(Date.now() + offsetMin * 60000);
return d.toUTCString().slice(17, 25);
}
function SystemLog() {
const [lines, setLines] = useState(() => [
{ id: 0, t: timestamp(-12), msg: "maintenance window opened", state: "ok" },
{ id: 1, t: timestamp(-9), msg: "draining live traffic", state: "ok" },
{ id: 2, t: timestamp(-5), msg: "warming inference cores", state: "run" },
]);
const idRef = useRef(3);
useEffect(() => {
const tick = () => {
setLines((prev) => {
const updated = prev.map((l) => (l.state === "run" ? { ...l, state: "ok" } : l));
const next = {
id: idRef.current++,
t: timestamp(0),
msg: LOG_LINES[Math.floor(Math.random() * LOG_LINES.length)],
state: "run",
};
return [...updated, next].slice(-7);
});
};
const id = setInterval(tick, 2400);
return () => clearInterval(id);
}, []);
return (
system log
live · /maintenance
{lines.map((l) => (
{l.t}
›
{l.msg}
{l.state === "run" ? … : "ok"}
))}
);
}
// Initial return date is ~15 days out. If that lapses, auto-extend by 7 days at a time.
// Persisted to localStorage so a single visitor sees a stable target across reloads.
const INITIAL_TARGET = new Date("2026-05-23T17:00:00Z").getTime();
const EXTENSION_MS = 7 * 24 * 60 * 60 * 1000;
const STORAGE_KEY = "wr_maintenance_target";
function getCurrentTarget() {
let target = INITIAL_TARGET;
try {
const stored = parseInt(localStorage.getItem(STORAGE_KEY) || "", 10);
if (!isNaN(stored) && stored > 0) target = stored;
} catch (_) {}
const now = Date.now();
while (target <= now) target += EXTENSION_MS;
try {
localStorage.setItem(STORAGE_KEY, String(target));
} catch (_) {}
return target;
}
function Countdown() {
const [target, setTarget] = useState(() => getCurrentTarget());
const [now, setNow] = useState(Date.now());
useEffect(() => {
const id = setInterval(() => {
const t = Date.now();
setNow(t);
if (t >= target) setTarget(getCurrentTarget());
}, 1000);
return () => clearInterval(id);
}, [target]);
const TARGET_DATE = new Date(target);
const diff = Math.max(0, target - now);
const days = Math.floor(diff / 86400000);
const hours = Math.floor((diff % 86400000) / 3600000);
const mins = Math.floor((diff % 3600000) / 60000);
const returnDate = TARGET_DATE.toLocaleDateString(undefined, {
month: "short",
day: "numeric",
}).toLowerCase();
return (
estimated return
{String(days).padStart(2, "0")}
d
:
{String(hours).padStart(2, "0")}
h
:
{String(mins).padStart(2, "0")}
m
back on · {returnDate}
);
}
function StatusPill() {
return (
scheduled maintenance · in progress
);
}
function Ticker() {
const items = [
"● scheduled maintenance",
"v2.6.4 rolling out",
"no data loss",
"back shortly",
"status.waverunner.ai",
"● scheduled maintenance",
"v2.6.4 rolling out",
"no data loss",
"back shortly",
"status.waverunner.ai",
];
return (
{[...items, ...items].map((t, i) => (
{t}
))}
);
}
function App() {
return (
{HEADLINE.split(" ").map((w, i, arr) => (
{w}
{i < arr.length - 1 ? " " : ""}
))}
{SUB}
);
}
ReactDOM.createRoot(document.getElementById("root")).render();