Under the hood

Each counter is value = base + rate × secondsElapsed, recomputed from Date.now() on a timer so the running totals stay consistent across reloads.

'use client';

import * as React from 'react';

const YEAR_START = Date.UTC(2026, 0, 1) / 1000;

function startOfTodaySec() {
  const d = new Date();
  d.setHours(0, 0, 0, 0);
  return +d / 1000;
}

interface Counter {
  label: string;
  value: (nowSec: number) => number;
}

// Rough real-world rates — running estimates from a base + per-second rate.
const COUNTERS: Counter[] = [
  { label: 'People on Earth', value: (n) => 8_150_000_000 + (n - YEAR_START) * 2.4 },
  { label: 'Babies born today', value: (n) => (n - startOfTodaySec()) * 4.3 },
  { label: 'Tonnes of CO₂ emitted this year', value: (n) => (n - YEAR_START) * 1186 },
  { label: 'Google searches today', value: (n) => (n - startOfTodaySec()) * 99_000 },
  { label: 'Bananas eaten today', value: (n) => (n - startOfTodaySec()) * 3340 },
];

export function LiveCountersGame() {
  const [now, setNow] = React.useState<number | null>(null);

  React.useEffect(() => {
    const tick = () => setNow(Date.now() / 1000);
    tick();
    const id = window.setInterval(tick, 80);
    return () => window.clearInterval(id);
  }, []);

  if (now == null) return null;

  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      {COUNTERS.map((c) => (
        <div key={c.label} className="flex items-baseline justify-between gap-4 border-b border-foreground/15 pb-2">
          <span className="text-sm opacity-70">{c.label}</span>
          <span className="font-mono text-xl font-bold tabular-nums sm:text-2xl">
            {Math.floor(c.value(now)).toLocaleString('en-US')}
          </span>
        </div>
      ))}
      <p className="mt-2 text-center font-mono text-[11px] uppercase tracking-[0.12em] opacity-45">
        estimates from rough global rates · since this year / midnight
      </p>
    </div>
  );
}