import React, { useState, useEffect, useRef } from "react"; import { useFireproof } from "use-vibes"; const ACCENT = "#4ade80"; const BG = "#0b0e14"; const PANEL = "#131721"; const BORDER = "#2a3040"; const INK = "#e6e9f0"; const MUTED = "#8b93a7"; const DOWN_SIZES = [1e5, 1e6, 1e7, 2.5e7]; const UP_SIZES = [1e5, 1e6]; const LAT_SAMPLES = 10; const DIAL_MAX = 250; // Mbps at full sweep function useFonts() { useEffect(() => { if (document.getElementById("web-utils-fonts")) return; const pre1 = document.createElement("link"); pre1.rel = "preconnect"; pre1.href = "https://fonts.googleapis.com"; const pre2 = document.createElement("link"); pre2.rel = "preconnect"; pre2.href = "https://fonts.gstatic.com"; pre2.crossOrigin = "anonymous"; const link = document.createElement("link"); link.id = "web-utils-fonts"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap"; document.head.appendChild(pre1); document.head.appendChild(pre2); document.head.appendChild(link); }, []); } function fmt(n, d = 1) { if (n === null || n === undefined || Number.isNaN(n)) return "--"; return n.toFixed(d); } function median(arr) { if (!arr.length) return null; const s = [...arr].sort((a, b) => a - b); const m = Math.floor(s.length / 2); return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2; } function Dial({ mbps, running, phase }) { const val = mbps == null ? 0 : mbps; const frac = Math.max(0, Math.min(1, Math.sqrt(val / DIAL_MAX))); const R = 120; const C = 140; const startA = 135; const sweep = 270; const circ = 2 * Math.PI * R; const arcLen = (sweep / 360) * circ; const dash = arcLen * frac; const rot = startA; const ticks = []; for (let i = 0; i <= 10; i++) { const a = ((startA + (sweep * i) / 10) * Math.PI) / 180; const x1 = C + Math.cos(a) * (R + 8); const y1 = C + Math.sin(a) * (R + 8); const x2 = C + Math.cos(a) * (R + 16); const y2 = C + Math.sin(a) * (R + 16); ticks.push( ); } return ( ); } function Tile({ label, value, unit }) { return (

{label}

{value} {unit}

); } async function measureLatency(onTick) { const samples = []; for (let i = 0; i < LAT_SAMPLES; i++) { const t0 = performance.now(); try { await fetch("https://speed.cloudflare.com/__down?bytes=0", { cache: "no-store" }); samples.push(performance.now() - t0); } catch (e) { /* skip failed sample */ } onTick && onTick((i + 1) / LAT_SAMPLES); } return samples; } async function measureDownload(onTick) { let best = 0; for (let idx = 0; idx < DOWN_SIZES.length; idx++) { const bytes = DOWN_SIZES[idx]; const t0 = performance.now(); let received = 0; try { const res = await fetch(`https://speed.cloudflare.com/__down?bytes=${bytes}`, { cache: "no-store", }); const reader = res.body.getReader(); while (true) { const { done, value } = await reader.read(); if (done) break; received += value.length; } } catch (e) { continue; } const secs = (performance.now() - t0) / 1000; if (secs > 0 && received > 0) { const mbps = (received * 8) / secs / 1e6; // weight toward larger transfers (more accurate) if (bytes >= 1e7) best = Math.max(best, mbps); else if (best === 0) best = mbps; } onTick && onTick((idx + 1) / DOWN_SIZES.length, best); } return best || null; } async function measureUpload(onTick) { let best = 0; for (let idx = 0; idx < UP_SIZES.length; idx++) { const bytes = UP_SIZES[idx]; const payload = new Uint8Array(bytes); for (let i = 0; i < bytes; i += 4096) payload[i] = i & 0xff; const t0 = performance.now(); try { await fetch("https://speed.cloudflare.com/__up", { method: "POST", body: payload, cache: "no-store", }); } catch (e) { continue; } const secs = (performance.now() - t0) / 1000; if (secs > 0) { const mbps = (bytes * 8) / secs / 1e6; best = Math.max(best, mbps); } onTick && onTick((idx + 1) / UP_SIZES.length); } return best || null; } export default function App() { useFonts(); const { useLiveQuery, database } = useFireproof("speed-check"); const { docs } = useLiveQuery("at", { descending: true, limit: 8 }); const runs = docs.filter((d) => d.type === "run"); const [running, setRunning] = useState(false); const [phase, setPhase] = useState(""); const [progress, setProgress] = useState(0); const [live, setLive] = useState({ down: null, up: null, latencyMs: null, jitterMs: null }); const [error, setError] = useState(""); const runningRef = useRef(false); const last = runs[0]; const display = running ? live : last ? { down: last.down, up: last.up, latencyMs: last.latencyMs, jitterMs: last.jitterMs } : { down: null, up: null, latencyMs: null, jitterMs: null }; async function runTest() { if (runningRef.current) return; runningRef.current = true; setRunning(true); setError(""); setLive({ down: null, up: null, latencyMs: null, jitterMs: null }); try { setPhase("PINGING"); const lat = await measureLatency((p) => setProgress(p * 0.25)); if (!lat.length) throw new Error("network"); const med = median(lat); const mean = lat.reduce((a, b) => a + b, 0) / lat.length; const jitter = Math.sqrt(lat.reduce((a, b) => a + (b - mean) ** 2, 0) / lat.length); setLive((s) => ({ ...s, latencyMs: med, jitterMs: jitter })); setPhase("DOWNLOAD"); const down = await measureDownload((p, cur) => { setProgress(0.25 + p * 0.5); if (cur) setLive((s) => ({ ...s, down: cur })); }); setLive((s) => ({ ...s, down })); setPhase("UPLOAD"); const up = await measureUpload((p) => setProgress(0.75 + p * 0.25)); setLive((s) => ({ ...s, up })); await database.put({ type: "run", down, up, latencyMs: med, jitterMs: jitter, at: Date.now(), }); setProgress(1); } catch (e) { setError("Network unreachable — check your connection and try again."); } finally { setRunning(false); runningRef.current = false; setPhase(""); setTimeout(() => setProgress(0), 600); } } return (

WEB-UTILS

Speed Check

Measure your connection against Cloudflare's global edge — latency, download, upload.

{running && (

)}

= 100 ? 0 : 1)} unit="Mbps" />

{error && (

{error}

)}

History

{runs.length === 0 ? (

No runs yet — hit Run Test to record your first measurement.

) : (

{runs.map((r) => (

{new Date(r.at).toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", })} {fmt(r.down, 1)}↓ {fmt(r.up, 1)}↑ {fmt(r.latencyMs, 0)}ms

))}

)}

); }