Fig. 1 — Free & Open Source

Turn any page into a destructible canvas.

Fifteen tools and more to come.

Docs

A product page after a session: a hammer crater through the headline showing the void behind the page, bullet holes across the stat cards, fire spreading over the chart, paint splats, and the RageLayer toolbar along the bottom

Fig. 2 — Parts list

Fifteen tools, drawn from code.

T-01·Base

Hammer

Cracks, then debris

Click to strike. Each spot takes escalating blows — dent, spreading cracks, deep splintering — then fractures into rigid-body debris that tumbles and piles up.

Read in docs

01 / 15

Fig. 3 — Install

Two imports and a button.

ragelayer/react

import { useState } from "react";
import { RageLayer } from "ragelayer/react";

export function DestroyButton() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Destroy this page</button>
      {open && <RageLayer onClose={() => setOpen(false)} />}
    </>
  );
}

Marked "use client" — drops into a Next.js Client Component.