Introducing RageLayer · a web toy for every framework

Turn any web page into a destructible canvas.

Sixteen procedural tools smash, burn, cut, corrode and explode the real DOM — then sweep every piece back into place.

Read the docs

This page is the demo. Everything below is destructible.

Tools

Sixteen tools, drawn from code.

No model assets and no network requests. They ship in three entry points, so you only pay for the ones you register.

A page covered in hammer cracks with fractured shards falling away — HammerEscalating blows, then rigid-body debris

Full-auto bullet holes torn across a page hero — GunAimed rounds punch straight through to the void

Fire and smoke burning a hole through page content — FlamethrowerFire spreads on its own fuel and keeps eating

A closed chainsaw cut dropping a whole piece out of a page — ChainsawClose a loop and the enclosed piece drops out

Coloured paint splats across a page — PaintballSplats that drip, dry, and clip to surviving pixels

A water stream sheeting across a page and dousing a fire — Water hoseDouses fire, rinses stains — a hole stays a hole

Whole content cards knocked loose from a page and falling — DemolitionKnocks whole page elements loose as single bodies

A rocket in flight trailing smoke away from its launch point — Rocket launcherArms only after it flies, so the crater moves

A forked lightning bolt striking a page and setting it alight — LightningForked bolt, burn channel, ground crawlers, fires

A black hole warping a page around its photon ring — Black holeLenses the page on the hold, detonates on release

Bugs crawling across the intact parts of a page — BugsThey crawl the survivors and avoid the void

Four more, unphotographedGravity gun, Laser cutter, Acid sprayer, Sticky bombs — all four are in the demo above.

How it works

It really is your page.

Most page-destruction toys draw a cartoon on top of your site. This one takes the page away from you first.

Capture
The DOM is rasterised into a canvas and the real page is hidden with visibility, so layout, scroll position and page height all survive.
Destroy
Tools remove content pixels instead of drawing over them. A hole is a hole — what shows through it is the void behind the page.
Repair
The broom sweeps the pristine capture back under the bristles. Closing the toolbar puts the real DOM back, untouched.

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)} />}
    </>
  );
}

The entry is marked "use client", so it drops into a Next.js Client Component.

MIT
ESM only
Zero runtime dependencies
TypeScript declarations
16 built-in tools
Canvas 2D