Under the hood

Picks a random URL from a small curated pool (weighted toward Wikipedia Special:Random) and opens it in a new tab.

'use client';

import * as React from 'react';

import { Win98Button } from '@/components/ui/win-98-button';

// A curated pool of genuinely interesting corners of the web, weighted toward
// Wikipedia's random article. Everything opens in a new tab.
const POOL = [
  'https://en.wikipedia.org/wiki/Special:Random',
  'https://en.wikipedia.org/wiki/Special:Random',
  'https://en.wikipedia.org/wiki/Special:Random',
  'https://www.atlasobscura.com/random',
  'https://neal.fun',
  'https://pudding.cool',
  'https://radio.garden',
  'https://www.openculture.com',
  'https://aeon.co/essays',
  'https://www.windy.com',
  'https://earth.nullschool.net',
  'https://www.zombo.com',
];

export function StumbleGame() {
  const [count, setCount] = React.useState(0);

  const stumble = () => {
    const url = POOL[Math.floor(Math.random() * POOL.length)];
    window.open(url, '_blank', 'noreferrer');
    setCount((c) => c + 1);
  };

  return (
    <div className="flex flex-col items-center gap-7">
      <button
        type="button"
        onClick={stumble}
        className="flex h-44 w-44 items-center justify-center rounded-full border-2 border-foreground bg-[var(--accent-blue)] text-center text-lg font-bold text-white shadow-[0_10px_30px_rgba(20,17,11,0.25)] transition-transform active:scale-90"
      >
        Stumble
      </button>
      <p className="max-w-[36ch] text-center text-sm leading-snug opacity-70">
        One tap launches you somewhere worth seeing — a random Wikipedia article, an interactive
        toy, a wind map, a strange archive. Opens in a new tab.
      </p>
      <div className="font-mono text-[11px] uppercase tracking-[0.12em] opacity-45">
        {count === 0 ? 'go on, then' : `${count} stumble${count === 1 ? '' : 's'} so far`}
      </div>
    </div>
  );
}