feat: minecraft splash text + fix music pause on navigation (#189)

* feat: add splash text + fix music pause on navigation

- Add Minecraft-style bouncing yellow splash text on the landing page
  with 30 inference-themed phrases (only visible in minecraft mode)
- Use Next.js Link for all header navigation to prevent music from
  pausing when switching between pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* revert: restore layoutGroup NavLink workaround for cross-layout soft nav bug

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Alec Ibarra <93070681+adibarra@users.noreply.github.com>

Author: 3 people

packages/app/src/app/globals.css

@@ -285,6 +285,47 @@
   display: none;
 }
 
+/* Minecraft splash text — yellow bouncing rotated text like the title screen */
+@keyframes minecraft-splash-bounce {
+  0%,
+  100% {
+    transform: rotate(-15deg) scale(1);
+  }
+  50% {
+    transform: rotate(-15deg) scale(1.1);
+  }
+}
+
+.minecraft-splash-wrapper {
+  position: absolute;
+  top: -1.75rem;
+  right: 0;
+  z-index: 10;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.minecraft-splash {
+  display: inline-block;
+  color: #ffff00;
+  font-weight: bold;
+  font-size: 0.85rem;
+  white-space: nowrap;
+  text-shadow: 2px 2px 0px #3f3f00;
+  animation: minecraft-splash-bounce 1.5s ease-in-out infinite;
+  transform-origin: right center;
+}
+
+@media (min-width: 640px) {
+  .minecraft-splash {
+    font-size: 1.1rem;
+  }
+  .minecraft-splash-wrapper {
+    top: -2rem;
+    right: 1rem;
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

packages/app/src/components/intro-section.tsx

@@ -1,6 +1,7 @@
 import { Quote } from 'lucide-react';
 
 import { Card } from '@/components/ui/card';
+import { MinecraftSplash } from '@/components/minecraft/minecraft-splash';
 import { QuoteCarousel } from '@/components/quote-carousel';
 import { QUOTES, CAROUSEL_ORGS, CAROUSEL_LABELS } from '@/components/quotes/quotes-data';
 
@@ -15,11 +16,12 @@ export function IntroSection() {
   return (
     <section>
       <Card data-testid="intro-section">
-        <div className="flex items-center gap-2 mb-4">
+        <div className="relative flex items-center gap-2 mb-4">
           <Quote className="h-5 w-5 text-brand" />
           <h2 className="text-lg font-semibold">
             Open Source Continuous Inference Benchmark Trusted by GigaWatt Token Factories
           </h2>
+          <MinecraftSplash />
         </div>
         <div>
           <QuoteCarousel

packages/app/src/components/minecraft/minecraft-splash.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+const SPLASHES = [
+  'Now with more tokens!',
+  'GPU go brrr!',
+  'Also try SGLang!',
+  'Tensor cores activated!',
+  'FP8 is the new FP16!',
+  '100% open source!',
+  'Benchmarked on real hardware!',
+  'Not just vibes!',
+  'Tokens per second!',
+  'Time to first token!',
+  'May contain NaN!',
+  'Works on my GPU!',
+  'DeepSeek approved!',
+  'Lower latency!',
+  'Higher throughput!',
+  'Runs on a single node!',
+  'NVLink go brrr!',
+  'Attention is all you need!',
+  'Powered by CUDA!',
+  'Batch size = 1!',
+  'No synthetic benchmarks!',
+  'Real-world workloads!',
+  'Out of VRAM!',
+  'KV cache optimized!',
+  'Prefill gang!',
+  'Disagg or no disagg?',
+  'GB200 NVL72!',
+  'More flops!',
+  'PCIe bottleneck!',
+  'Roofline analysis!',
+];
+
+/**
+ * Minecraft-style splash text — yellow, rotated, bouncing text
+ * that appears on the landing page when minecraft mode is active.
+ */
+export function MinecraftSplash() {
+  const [isMinecraft, setIsMinecraft] = useState(false);
+  const [splash, setSplash] = useState('');
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    function check() {
+      setIsMinecraft(document.documentElement.classList.contains('minecraft'));
+    }
+    check();
+
+    const observer = new MutationObserver(check);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (isMinecraft && !hasInitialized.current) {
+      hasInitialized.current = true;
+      setSplash(SPLASHES[Math.floor(Math.random() * SPLASHES.length)]);
+    }
+    if (!isMinecraft) {
+      hasInitialized.current = false;
+    }
+  }, [isMinecraft]);
+
+  if (!isMinecraft || !splash) return null;
+
+  return (
+    <div className="minecraft-splash-wrapper">
+      <span className="minecraft-splash">{splash}</span>
+    </div>
+  );
+}