SlideToDetonate easter egg: the page actually burns

[radiumcoders]

What

Sliding any SlideToDetonate on the site now really detonates:

1. Blast at the handle: white-hot flash, shockwave ring, fireball, a spray of sparks and a short screen shake.
2. Burn: a ragged, noise-driven burn front spreads across the whole viewport. The paper browns ahead of it, a glowing edge eats it, flames lick upward, embers drift off and smouldering char with glowing cracks is left behind.
3. Aftermath: "You burned it all down." with a Rebuild the page button (or Esc), which rewinds the fire back into the handle.

How

• components/detonation/slide-to-detonate.tsx is a site-only wrapper around the registry component. On confirm it fires a evilbuttons:detonate window event from the handle's position. The registry component (components/evil-buttons/slide-to-detonate.tsx) is unchanged.
• components/detonation/page-detonation.tsx is mounted in the root layout and lazy-loads the overlay with next/dynamic (ssr: false). The chunk is prefetched when someone grabs or focuses a slider.
• components/detonation/detonation-overlay.tsx draws scorch, char, flames, fireball, shockwave and flash in one WebGL2 pass, with a 2D canvas on top for sparks and embers. JS owns the timeline. There's a CSS clip-path fallback when WebGL2 isn't available.
• The docs MDX, landing previews and showcase now import the wrapper.

Accessibility

• prefers-reduced-motion: no flash, shake, fireball or particles, and a faster spread.
• The end card is an alertdialog and its button takes focus. Focus goes back to the slider afterwards.
• A status region announces the fire.

Checks

• pnpm typecheck and pnpm lint pass (the only warnings are the existing <img> ones in the hero).
• Ran it end to end in headless Chromium (SwiftShader WebGL) on /docs/slide-to-detonate: drag, blast, burn, end card, rebuild, overlay removed. No console errors.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
evil-buttons	Building	Preview	Oct 9, 2026 10:08am UTC

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: ae5b55d7-65f6-4b5c-b25c-e9e1616d30a1

---

📥 Commits

Reviewing files that changed from the base of the PR and between fd7cdfa and 1b50719.

---

📒 Files selected for processing (9)

• app/layout.tsx
• components/detonation/detonation-overlay.tsx
• components/detonation/events.ts
• components/detonation/page-detonation.tsx
• components/detonation/slide-to-detonate.tsx
• components/landing/previews/interaction.tsx
• components/landing/previews/static.tsx
• components/landing/showcase-preview.tsx
• components/mdx-custom-components.tsx

---

 _____________________________________________________
< Code Wars Episode III: Revenge of the Shared State. >
 -----------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}