Kellie
Grant.

1import { useEffect, useMemo, useState } from 'react';
2
3type BuildStage = { label: string; detail: string; delay: number };
4
5const stages: ReadonlyArray<BuildStage> = [
6   { label: 'Compiling brilliance', detail: 'Negotiating with TypeScript…', delay: 700 },
7   { label: 'Running tests', detail: 'Asking the bugs to leave politely…', delay: 900 },
8   { label: 'Deploying', detail: 'Turning coffee into production code…', delay: 800 },
9   { label: 'Success', detail: 'It works! Please don\'t ask how. 😅', delay: 0 }
10] as const;
11
12export function DeveloperEasterEgg() {
13   const [step, setStep] = useState(0);
14   const current = stages[step];
15   const progress = useMemo(() =>
16      Math.round(((step + 1) / stages.length) * 100), [step]);
17
18   useEffect(() => {
19      if (step === stages.length - 1) {
20         console.info('☕ Achievement unlocked: shipped before the coffee got cold.');
21         return;
22      }
23
24      const timer = window.setTimeout(() =>
25         setStep(value => Math.min(value + 1, stages.length - 1)),
26         current.delay
27      );
28
29      return () => window.clearTimeout(timer);
30   }, [step, current.delay]);
31
32   return (
33      <output aria-live="polite" data-progress={progress}>
34         <strong>{current.label}</strong> — {current.detail} ({progress}%)
35      </output>
36   );
37}