From 731ce1a3ce58a817702afc1562176623a76af842 Mon Sep 17 00:00:00 2001 From: Chris Bongers Date: Thu, 5 Feb 2026 11:42:04 +0200 Subject: [PATCH 1/3] Add AI vibe easter egg typing game --- .../components/ai-vibe/AiVibeEasterEgg.tsx | 820 ++++++++++++++++++ packages/webapp/pages/_app.tsx | 2 + 2 files changed, 822 insertions(+) create mode 100644 packages/webapp/components/ai-vibe/AiVibeEasterEgg.tsx diff --git a/packages/webapp/components/ai-vibe/AiVibeEasterEgg.tsx b/packages/webapp/components/ai-vibe/AiVibeEasterEgg.tsx new file mode 100644 index 0000000000..35b324c0f3 --- /dev/null +++ b/packages/webapp/components/ai-vibe/AiVibeEasterEgg.tsx @@ -0,0 +1,820 @@ +import type { ChangeEvent, ReactElement } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import classNames from 'classnames'; +import { + Button, + ButtonSize, + ButtonVariant, +} from '@dailydotdev/shared/src/components/buttons/Button'; +import { ProgressBar } from '@dailydotdev/shared/src/components/fields/ProgressBar'; + +const VIBE_WORDS = [ + 'agent', + 'alignment', + 'api', + 'attention', + 'batch', + 'cache', + 'chain', + 'chunk', + 'context', + 'cuda', + 'dataset', + 'distill', + 'drift', + 'embed', + 'eval', + 'flow', + 'guardrail', + 'hallucinate', + 'latency', + 'logits', + 'lora', + 'memory', + 'metric', + 'multimodal', + 'observe', + 'orchestrate', + 'prompt', + 'proxy', + 'rag', + 'rerank', + 'retry', + 'safety', + 'sampler', + 'sandbox', + 'spec', + 'stream', + 'temperature', + 'token', + 'tooling', + 'tuning', + 'vector', + 'vibe', +]; + +const INCIDENT_WORDS = [ + 'hotfix', + 'rollback', + 'failover', + 'mitigation', + 'recovery', + 'pagerduty', + 'patch', + 'restart', +]; + +const MAX_TOKENS_TARGET = 260; +const SPEEDRUN_DURATION_MS = 60000; +const BASE_SPEED_RANGE = [12, 20]; +const INCIDENT_SPEED_BOOST = 1.6; +const INCIDENT_DURATION_MS = 10000; +const INCIDENT_SPAWN_INTERVAL_MS = 520; +const NORMAL_SPAWN_INTERVAL_MS = 900; +const TOKEN_DROP_PENALTY = 6; +const INCIDENT_BONUS = 18; + +const MOCK_LEADERBOARD = [ + { name: 'VectorVera', score: 980 }, + { name: 'LatencyLiam', score: 910 }, + { name: 'PromptPia', score: 840 }, + { name: 'AgentAda', score: 790 }, + { name: 'ChunkyChen', score: 740 }, +]; + +const randomBetween = (min: number, max: number): number => + Math.random() * (max - min) + min; + +const pickRandom = (items: T[]): T => + items[Math.floor(Math.random() * items.length)]; + +const sanitizeInput = (value: string): string => + value.toLowerCase().replace(/[^a-z0-9-]/g, ''); + +const getWordPoints = (word: string): number => + Math.max(4, Math.min(14, word.length + 2)); + +const formatDuration = (ms: number): string => { + const totalSeconds = Math.max(0, Math.ceil(ms / 1000)); + const minutes = Math.floor(totalSeconds / 60); + const seconds = totalSeconds % 60; + return `${minutes}:${seconds.toString().padStart(2, '0')}`; +}; + +type FallingToken = { + id: number; + word: string; + x: number; + y: number; + speed: number; + isIncident?: boolean; +}; + +type IncidentState = { + word: string; + endsAt: number; +}; + +const findBestMatch = ( + tokens: FallingToken[], + value: string, +): FallingToken | null => { + if (!value) { + return null; + } + + let bestMatch: FallingToken | null = null; + + for (const token of tokens) { + if (!token.word.startsWith(value)) { + continue; + } + + if (!bestMatch || token.y > bestMatch.y) { + bestMatch = token; + } + } + + return bestMatch; +}; + +export default function AiVibeEasterEgg(): ReactElement | null { + const [isOpen, setIsOpen] = useState(false); + const [tokens, setTokens] = useState([]); + const [input, setInput] = useState(''); + const [score, setScore] = useState(0); + const [maxTokens, setMaxTokens] = useState(0); + const [streak, setStreak] = useState(0); + const [incident, setIncident] = useState(null); + const [status, setStatus] = useState<'playing' | 'won' | 'timeup'>('playing'); + const [timeLeftMs, setTimeLeftMs] = useState(SPEEDRUN_DURATION_MS); + const [notice, setNotice] = useState(null); + + const tokenIdRef = useRef(0); + const inputRef = useRef(null); + const rafRef = useRef(null); + const lastTimeRef = useRef(0); + const spawnAccumulatorRef = useRef(0); + const nextIncidentAtRef = useRef(0); + const noticeTimeoutRef = useRef(null); + const runEndsAtRef = useRef(0); + const lastTimerSecondRef = useRef(null); + + const maxTokensProgress = Math.min(1, maxTokens / MAX_TOKENS_TARGET); + const isHyper = !!incident; + const isTimeCritical = timeLeftMs <= 10000; + const timeProgress = Math.max(0, timeLeftMs / SPEEDRUN_DURATION_MS); + const formattedTime = formatDuration(timeLeftMs); + + const leaderboardEntries = useMemo(() => { + const topFive = [...MOCK_LEADERBOARD] + .sort((a, b) => b.score - a.score) + .slice(0, 5); + const entries = [...topFive, { name: 'You', score }]; + + return entries.map((entry, index) => ({ + ...entry, + rank: index + 1, + isYou: entry.name === 'You', + })); + }, [score]); + + const yourRank = leaderboardEntries.find((entry) => entry.isYou)?.rank; + + const showNotice = useCallback((message: string): void => { + if (noticeTimeoutRef.current) { + window.clearTimeout(noticeTimeoutRef.current); + } + + setNotice(message); + noticeTimeoutRef.current = window.setTimeout(() => { + setNotice(null); + }, 2200); + }, []); + + const createToken = useCallback( + (overrides: Partial = {}): FallingToken => { + const id = tokenIdRef.current; + tokenIdRef.current += 1; + + return { + id, + word: overrides.word ?? pickRandom(VIBE_WORDS), + x: overrides.x ?? randomBetween(8, 92), + y: overrides.y ?? randomBetween(-18, -8), + speed: + overrides.speed ?? randomBetween(BASE_SPEED_RANGE[0], BASE_SPEED_RANGE[1]), + isIncident: overrides.isIncident ?? false, + }; + }, + [], + ); + + const scheduleNextIncident = useCallback((now: number): void => { + nextIncidentAtRef.current = now + randomBetween(16000, 24000); + }, []); + + const endIncident = useCallback( + (message?: string): void => { + setIncident(null); + scheduleNextIncident(performance.now()); + if (message) { + showNotice(message); + } + }, + [scheduleNextIncident, showNotice], + ); + + const startIncident = useCallback( + (now: number): void => { + const word = pickRandom(INCIDENT_WORDS); + setIncident({ word, endsAt: now + INCIDENT_DURATION_MS }); + setTokens((prev) => [ + ...prev, + createToken({ + word, + isIncident: true, + speed: randomBetween(BASE_SPEED_RANGE[0] + 2, BASE_SPEED_RANGE[1] + 4), + }), + ]); + showNotice('Service down! Hyper mode engaged.'); + }, + [createToken, showNotice], + ); + + const resetGame = useCallback((): void => { + tokenIdRef.current = 0; + const now = performance.now(); + lastTimeRef.current = now; + spawnAccumulatorRef.current = 0; + scheduleNextIncident(now); + runEndsAtRef.current = now + SPEEDRUN_DURATION_MS; + lastTimerSecondRef.current = null; + + setTokens([ + createToken({ y: randomBetween(-10, 0) }), + createToken({ y: randomBetween(-18, -6) }), + createToken({ y: randomBetween(-24, -10) }), + ]); + setInput(''); + setScore(0); + setMaxTokens(0); + setStreak(0); + setIncident(null); + setStatus('playing'); + setNotice(null); + setTimeLeftMs(SPEEDRUN_DURATION_MS); + }, [createToken, scheduleNextIncident]); + + const openGame = useCallback((): void => { + setIsOpen(true); + resetGame(); + }, [resetGame]); + + const closeGame = useCallback((): void => { + setIsOpen(false); + }, []); + + useEffect(() => { + const handleKeydown = (event: KeyboardEvent): void => { + if (event.defaultPrevented) { + return; + } + + const isHotkey = + (event.metaKey || event.ctrlKey) && + event.shiftKey && + event.key.toLowerCase() === 'k'; + + if (isHotkey) { + event.preventDefault(); + if (isOpen) { + closeGame(); + return; + } + + openGame(); + return; + } + + if (isOpen && (event.key === 'Escape' || event.key === 'Esc')) { + event.preventDefault(); + closeGame(); + } + }; + + window.addEventListener('keydown', handleKeydown); + return () => window.removeEventListener('keydown', handleKeydown); + }, [closeGame, isOpen, openGame]); + + useEffect(() => { + if (!isOpen) { + return; + } + + inputRef.current?.focus(); + const originalOverflow = document.body.style.overflow; + document.body.style.overflow = 'hidden'; + + return () => { + document.body.style.overflow = originalOverflow; + }; + }, [isOpen]); + + useEffect(() => { + if (!isOpen || status !== 'playing') { + if (rafRef.current !== null) { + cancelAnimationFrame(rafRef.current); + rafRef.current = null; + } + return; + } + + const step = (time: number): void => { + const deltaMs = time - lastTimeRef.current; + lastTimeRef.current = time; + const delta = Math.max(0, deltaMs / 1000); + const remainingMs = Math.max(0, runEndsAtRef.current - time); + const remainingSeconds = Math.ceil(remainingMs / 1000); + + if (remainingSeconds !== lastTimerSecondRef.current) { + lastTimerSecondRef.current = remainingSeconds; + setTimeLeftMs(remainingMs); + } + + spawnAccumulatorRef.current += deltaMs; + const spawnInterval = incident + ? INCIDENT_SPAWN_INTERVAL_MS + : NORMAL_SPAWN_INTERVAL_MS; + + while (spawnAccumulatorRef.current >= spawnInterval) { + spawnAccumulatorRef.current -= spawnInterval; + setTokens((prev) => [...prev, createToken()]); + } + + if (!incident && time >= nextIncidentAtRef.current) { + startIncident(time); + } + + if (incident && time >= incident.endsAt) { + endIncident('Incident auto-resolved. Carry on.'); + } + + const speedBoost = incident ? INCIDENT_SPEED_BOOST : 1; + + setTokens((prev) => { + let dropped = 0; + + const updated = prev + .map((token) => { + const nextY = token.y + token.speed * speedBoost * delta; + if (nextY > 105) { + dropped += 1; + return { ...token, y: nextY }; + } + + return { ...token, y: nextY }; + }) + .filter((token) => token.y <= 105); + + if (dropped > 0) { + setStreak(0); + setMaxTokens((value) => Math.max(0, value - dropped * TOKEN_DROP_PENALTY)); + } + + return updated; + }); + + if (maxTokensProgress >= 1 && status !== 'won') { + setStatus('won'); + showNotice('Max tokens reached. Ship it!'); + return; + } + + if (remainingMs <= 0 && status === 'playing') { + setStatus('timeup'); + showNotice('Speedrun complete. Time!'); + return; + } + + rafRef.current = requestAnimationFrame(step); + }; + + rafRef.current = requestAnimationFrame(step); + + return () => { + if (rafRef.current !== null) { + cancelAnimationFrame(rafRef.current); + rafRef.current = null; + } + }; + }, [ + createToken, + endIncident, + incident, + isOpen, + maxTokensProgress, + showNotice, + startIncident, + status, + ]); + + const activeToken = useMemo( + () => findBestMatch(tokens, input), + [tokens, input], + ); + + const hasMatch = !input || !!activeToken; + + const resolveToken = useCallback( + (match: FallingToken): void => { + const basePoints = getWordPoints(match.word); + const incidentBoost = incident ? 2 : 1; + const streakBonus = Math.min(6, streak); + + setTokens((prev) => prev.filter((token) => token.id !== match.id)); + setInput(''); + setScore((value) => value + basePoints * incidentBoost + streakBonus); + setMaxTokens((value) => + Math.min( + MAX_TOKENS_TARGET, + value + basePoints + (incident ? 6 : 0), + ), + ); + setStreak((value) => value + 1); + + if (match.isIncident) { + setMaxTokens((value) => + Math.min(MAX_TOKENS_TARGET, value + INCIDENT_BONUS), + ); + endIncident('Incident resolved. Bonus tokens!'); + } + }, + [endIncident, incident, streak], + ); + + const handleInputChange = (event: ChangeEvent): void => { + if (status !== 'playing') { + return; + } + + const nextValue = sanitizeInput(event.target.value); + setInput(nextValue); + + const match = findBestMatch(tokens, nextValue); + if (!match) { + setStreak(0); + return; + } + + if (match.word === nextValue) { + resolveToken(match); + } + }; + + const handleInputKeyDown = ( + event: React.KeyboardEvent, + ): void => { + if (event.key === 'Escape' || event.key === 'Esc') { + event.preventDefault(); + closeGame(); + return; + } + + if (event.key === 'Enter') { + event.preventDefault(); + if (!input || !activeToken) { + return; + } + if (activeToken.word === input) { + resolveToken(activeToken); + return; + } + showNotice('Finish the word to submit.'); + return; + } + + if (event.key === ' ') { + event.preventDefault(); + } + }; + + if (!isOpen) { + return null; + } + + return ( +
{ + inputRef.current?.focus(); + }} + role="dialog" + aria-modal="true" + aria-label="AI vibes typing game" + > +
+
+
+
+
+ +
+
+

+ secret mode // ai hub overload +

+

+ Vibe Overdrive +

+

+ Type like the model depends on it. Stack tokens, dodge drops, and + survive the service meltdowns. +

+
+ +
+
+
+

Objective

+

Max Tokens

+
+ +
+

+ {maxTokens}/{MAX_TOKENS_TARGET} tokens +

+
+ +
+

Speedrun

+

+ {formattedTime} +

+
+ +
+

+ 1 run · no pause +

+
+ +
+

Score

+

{score}

+

+ Streak x{streak} +

+
+ +
+

Status

+

+ {isHyper ? 'Hyper Mode' : 'Stable'} +

+

+ {isHyper ? `Fix: ${incident?.word ?? ''}` : 'All services green'} +

+
+
+ +
+ +
+
+
+ +
+
+
+ {Array.from({ length: 10 }).map((_, index) => ( + + ))} + {Array.from({ length: 6 }).map((_, index) => ( + + ))} +
+ {tokens.map((token) => ( +
+
+
+ + + + + + + {token.word} + + {activeToken?.id === token.id && ( + locked + )} + {token.isIncident && ( + + incident + + )} +
+
+
+ ))} + {notice && ( +
+ {notice} +
+ )} + {status !== 'playing' && ( +
+
+

+ {status === 'won' + ? 'Max tokens achieved.' + : 'Speedrun complete.'} +

+

+ {status === 'won' + ? 'You shipped the AI vibes. The hub is safe (for now).' + : 'Time is up. The model survived. For now.'} +

+
+
+

Final score

+

{score}

+
+
+

Rank

+

+ {yourRank ? `#${yourRank}` : '—'} +

+
+
+
+ + +
+
+
+ )} +
+ +
+
+
+

+ Type the falling AI vibe words to rack up max tokens. +

+

+ Shortcut: Cmd/Ctrl + Shift + K +

+
+ +
+ + +
+
+
+ ); +} diff --git a/packages/webapp/pages/_app.tsx b/packages/webapp/pages/_app.tsx index 9278554f94..8e784fa9ae 100644 --- a/packages/webapp/pages/_app.tsx +++ b/packages/webapp/pages/_app.tsx @@ -52,6 +52,7 @@ import { useCheckLocation } from '@dailydotdev/shared/src/hooks/useCheckLocation import Seo, { defaultSeo, defaultSeoTitle } from '../next-seo'; import useWebappVersion from '../hooks/useWebappVersion'; import { PixelsProvider } from '../context/PixelsContext'; +import AiVibeEasterEgg from '../components/ai-vibe/AiVibeEasterEgg'; structuredCloneJsonPolyfill(); @@ -263,6 +264,7 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement { }} /> )} +
); From d92f6eca8a052afd42ddd705b33630adc50997f2 Mon Sep 17 00:00:00 2001 From: Chris Bongers Date: Thu, 5 Feb 2026 11:42:42 +0200 Subject: [PATCH 2/3] Improve AI vibe game contrast --- .../components/ai-vibe/AiVibeEasterEgg.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/webapp/components/ai-vibe/AiVibeEasterEgg.tsx b/packages/webapp/components/ai-vibe/AiVibeEasterEgg.tsx index 35b324c0f3..8568ebfa58 100644 --- a/packages/webapp/components/ai-vibe/AiVibeEasterEgg.tsx +++ b/packages/webapp/components/ai-vibe/AiVibeEasterEgg.tsx @@ -699,30 +699,30 @@ export default function AiVibeEasterEgg(): ReactElement | null {
))} {notice && ( -
+
{notice}
)} {status !== 'playing' && (
-
-

+

+

{status === 'won' ? 'Max tokens achieved.' : 'Speedrun complete.'}

-

+

{status === 'won' ? 'You shipped the AI vibes. The hub is safe (for now).' : 'Time is up. The model survived. For now.'}

-
-

Final score

+
+

Final score

{score}

-
-

Rank

+
+

Rank

{yourRank ? `#${yourRank}` : '—'}

@@ -750,12 +750,12 @@ export default function AiVibeEasterEgg(): ReactElement | null {
-
+
-

+

Type the falling AI vibe words to rack up max tokens.

-

+

Shortcut: Cmd/Ctrl + Shift + K

@@ -776,10 +776,10 @@ export default function AiVibeEasterEgg(): ReactElement | null { />
-