Easter eggs hidden inside the buttons

app/globals.css

@@ -709,3 +709,308 @@ html.dark .docs-content .shiki span {
     100% 100%,
     100% 100%;
 }
+
+/*
+ * Easter eggs (components/easter-eggs). Overlays stack under the detonation
+ * (2147483000) and the egg toast (2147483100).
+ */
+html[data-hell] body {
+  filter: sepia(1) saturate(6) hue-rotate(-48deg) brightness(0.85) contrast(1.15);
+}
+
+html[data-hell],
+html[data-hell] * {
+  cursor:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32'%3E%3Cpath d='M4 3v7a8 8 0 0 0 16 0V3M12 3v27' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 3v7a8 8 0 0 0 16 0V3M12 3v27' fill='none' stroke='%23ff2a14' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+      12 3,
+    auto !important;
+}
+
+.hell-vignette {
+  position: fixed;
+  inset: 0;
+  z-index: 2147482000;
+  pointer-events: none;
+  background: radial-gradient(ellipse at center, transparent 40%, rgb(110 0 0 / 0.6) 100%);
+  mix-blend-mode: multiply;
+  animation: hell-flicker 3.2s steps(1) infinite;
+}
+
+@keyframes hell-flicker {
+  0%, 100% { opacity: 1; }
+  41% { opacity: 0.7; }
+  43% { opacity: 1; }
+  77% { opacity: 0.85; }
+  78% { opacity: 1; }
+}
+
+.lights-out {
+  position: fixed;
+  inset: 0;
+  z-index: 2147482500;
+  pointer-events: none;
+  background: radial-gradient(
+    circle at var(--x, 50%) var(--y, 50%),
+    transparent 0,
+    transparent 70px,
+    rgb(0 0 0 / 0.9) 150px,
+    rgb(0 0 0 / 0.97) 320px
+  );
+  animation: lights-off 0.7s steps(1);
+}
+
+.lights-out[data-phase="flicker"] {
+  animation: lights-on 1s steps(1) forwards;
+}
+
+@keyframes lights-off {
+  0% { opacity: 0; }
+  15% { opacity: 1; }
+  30% { opacity: 0.2; }
+  45% { opacity: 1; }
+  60% { opacity: 0.5; }
+  70%, 100% { opacity: 1; }
+}
+
+@keyframes lights-on {
+  0% { opacity: 1; }
+  20% { opacity: 0; }
+  32% { opacity: 1; }
+  50% { opacity: 0.1; }
+  60% { opacity: 0.9; }
+  75%, 100% { opacity: 0; }
+}
+
+@keyframes lights-fade {
+  to { opacity: 0; }
+}
+
+.watching-eyes {
+  position: fixed;
+  inset: 0;
+  z-index: 2147482400;
+  pointer-events: none;
+  transition: opacity 0.25s;
+}
+
+.watching-eyes::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at center, transparent 30%, rgb(0 0 0 / 0.85) 100%);
+  animation: eyes-dim 3s ease-out backwards;
+}
+
+.watching-eyes[data-leaving] {
+  opacity: 0;
+}
+
+.watching-eyes-pair {
+  position: absolute;
+  translate: -50% -50%;
+  overflow: visible;
+  filter: drop-shadow(0 0 6px rgb(255 30 20 / 0.85));
+  animation: eyes-open 0.9s ease-out backwards;
+}
+
+.watching-eyes-lids {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: eyes-blink 5s infinite;
+  transition: transform 0.15s;
+}
+
+.watching-eyes[data-leaving] .watching-eyes-lids {
+  animation: none;
+  transform: scaleY(0.05);
+}
+
+@keyframes eyes-dim {
+  from { opacity: 0; }
+}
+
+@keyframes eyes-open {
+  from { opacity: 0; transform: scaleY(0.05); }
+}
+
+@keyframes eyes-blink {
+  0%, 92%, 100% { transform: none; }
+  95% { transform: scaleY(0.08); }
+}
+
+.screen-crack {
+  position: absolute;
+  overflow: visible;
+  animation: crack-life 4.5s ease-out forwards;
+}
+
+@keyframes crack-life {
+  0% { opacity: 0; transform: scale(0.92); }
+  4% { opacity: 1; transform: none; }
+  80% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hell-vignette,
+  .lights-out,
+  .watching-eyes-lids {
+    animation: none;
+  }
+
+  .lights-out[data-phase="flicker"] {
+    animation: lights-fade 0.4s forwards;
+  }
+}
+
+@keyframes egg-wobble {
+  0%, 84%, 100% { transform: none; }
+  87% { transform: rotate(-14deg); }
+  90% { transform: rotate(10deg); }
+  93% { transform: rotate(-6deg); }
+  96% { transform: rotate(3deg); }
+}
+
+html[data-glitch] body {
+  animation: page-glitch 0.42s steps(1) infinite;
+}
+
+@keyframes page-glitch {
+  0% { transform: none; filter: none; clip-path: none; }
+  12% { transform: translate(-6px, 2px) skewX(-2deg); filter: hue-rotate(90deg) saturate(3); }
+  24% { transform: translate(5px, -1px); filter: invert(1) hue-rotate(180deg); clip-path: inset(18% 0 52% 0); }
+  36% { transform: none; filter: contrast(2.2) saturate(0); clip-path: none; }
+  48% { transform: translate(9px, 0) skewX(4deg); filter: hue-rotate(-60deg); clip-path: inset(0 0 70% 0); }
+  60% { transform: translate(-3px, 3px); filter: none; clip-path: inset(40% 0 20% 0); }
+  72% { transform: translate(2px, -4px) scaleY(1.02); filter: saturate(4) contrast(1.4); clip-path: none; }
+  86% { transform: translate(-8px, 0); filter: invert(1); clip-path: inset(62% 0 8% 0); }
+}
+
+.glitch-storm {
+  position: fixed;
+  inset: 0;
+  z-index: 2147482700;
+  pointer-events: none;
+  overflow: hidden;
+  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px);
+}
+
+.glitch-storm > span {
+  position: absolute;
+  left: 0;
+  right: 0;
+  mix-blend-mode: difference;
+  opacity: 0.85;
+}
+
+.glitch-storm-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: clamp(2rem, 7vw, 5rem);
+  color: #fff;
+  mix-blend-mode: difference;
+  text-shadow: 3px 0 #ff2a3c, -3px 0 #00f0ff;
+  animation: glitch-label 0.2s steps(1) infinite;
+}
+
+@keyframes glitch-label {
+  0% { transform: translate(0, 0); opacity: 1; }
+  33% { transform: translate(-4px, 2px); opacity: 0.6; }
+  66% { transform: translate(5px, -2px); opacity: 1; }
+}
+
+.everything-deleted[data-phase="restoring"] {
+  animation: deleted-restore 1.6s ease-in forwards;
+}
+
+.everything-deleted-progress {
+  animation: deleted-progress 1.2s ease-out forwards;
+}
+
+@keyframes deleted-progress {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+@keyframes deleted-restore {
+  0%, 70% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-glitch] body,
+  .glitch-storm-label {
+    animation: none;
+  }
+}
+
+html[data-flip-turning] body {
+  transition: transform 0.9s cubic-bezier(0.6, -0.3, 0.3, 1.3);
+}
+
+html[data-flipped] body {
+  transform: rotate(180deg);
+}
+
+.creeper {
+  position: fixed;
+  z-index: 2147482900;
+  pointer-events: none;
+  translate: -50% -50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.creeper-face {
+  width: 120px;
+  height: 120px;
+  image-rendering: pixelated;
+  box-shadow: 0 0 0 4px #0c160a, 0 18px 40px -10px rgb(0 0 0 / 0.6);
+  animation: creeper-swell 1.7s ease-in forwards;
+}
+
+.creeper-hiss {
+  color: #6cc957;
+  font-size: 22px;
+  text-shadow: 0 0 2px #0c160a, 0 2px 0 #0c160a;
+  animation: glitch-label 0.12s steps(1) infinite;
+}
+
+/* Swells and flashes white, like it's about to go. */
+@keyframes creeper-swell {
+  0% { transform: scale(0.3) translateY(40px); opacity: 0; filter: none; }
+  20% { transform: scale(1); opacity: 1; }
+  45%, 65%, 85% { filter: brightness(3) saturate(0); }
+  55%, 75% { filter: none; }
+  100% { transform: scale(1.35); filter: brightness(4) saturate(0); }
+}
+
+.creeper-flash {
+  position: fixed;
+  inset: 0;
+  z-index: 2147482900;
+  pointer-events: none;
+  background: #fff;
+  animation: creeper-flash 0.5s ease-out forwards;
+}
+
+@keyframes creeper-flash {
+  from { opacity: 0.85; }
+  to { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-flip-turning] body {
+    transition: none;
+  }
+
+  .creeper-face,
+  .creeper-hiss {
+    animation: none;
+  }
+}

app/layout.tsx

@@ -15,6 +15,7 @@ import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { TracwellAnalytics } from "@/components/tracwell-analytics";
 import { PageDetonation } from "@/components/detonation/page-detonation";
+import { EasterEggs } from "@/components/easter-eggs/easter-eggs";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -93,6 +94,7 @@ export default function RootLayout({
         */}
         <ThemeProvider>{children}</ThemeProvider>
         <PageDetonation />
+        <EasterEggs />
       </body>
     </html>
   );

app/not-found.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { SlideToDetonate } from "@/components/detonation/slide-to-detonate";
 
 export default function NotFound() {
   return (
@@ -29,6 +30,8 @@ export default function NotFound() {
           Browse docs
         </Link>
       </div>
+
+      <SlideToDetonate label="Slide to burn this 404" className="mt-4" />
     </main>
   );
 }