# RageLayer

RageLayer is an open-source TypeScript library that turns any web page into a destructible canvas. It rasterises the real DOM into a canvas, lets the visitor smash, shoot, burn, cut, corrode, and explode it with fifteen procedural tools, turns torn-off pieces into rigid bodies, and sweeps everything back with a broom. It is free and licensed under MIT.

## For coding agents

- Implementation instructions: https://www.parthjadhav.com/products/ragelayer/AGENTS.md
- Complete machine-readable docs: https://www.parthjadhav.com/products/ragelayer/llms.txt

Inspect the host project first and follow its existing framework, package manager, component conventions, and verification commands. The implementation instructions include ready-to-use React, Next.js, Vue, Nuxt, Svelte, and framework-neutral integrations.

## What it does

- Captures the live page into a canvas and hides the real DOM, so layout, scroll position, and page height survive.
- Tools remove content pixels rather than drawing over them; a hole shows the void behind the page.
- Voronoi shards and measured DOM elements become rigid bodies that tumble, collide, and pile up.
- The broom restores the pristine capture; closing the toolbar restores the real DOM untouched.
- Bounded undo/redo history, snapshot export, and a typed SDK for custom tools.
- Degrades independently: WebGL effects, page capture, audio, and physics fail or disable on their own; adaptive quality bounds entity counts, honours data saver, and suspends work in background tabs.

## The fifteen tools

Base: Hammer, Gun, Flamethrower, Water Hose, Chainsaw, Paintball, Broom.
Heavy: Black Hole, Rocket Launcher, Lightning, Demolition, Bugs.
Advanced: Laser Cutter, Acid Jar, Sticky Bombs.

Tools are procedural — no model assets and no network requests — and ship in three entry points so a page pays only for the ones it registers.

## Integrations

- React / Next.js: `ragelayer/react` — a ready-made `<RageLayer />` component and a headless `useRageLayer` hook; the entry is marked "use client".
- Vue / Nuxt: `ragelayer/vue` — renders nothing until mounted in a browser.
- Svelte / SvelteKit: `ragelayer/svelte` — a `use:rageLayer` action.
- Any stack: `ragelayer/element` — a `<rage-layer>` custom element with a complete toolbar in a shadow root.
- Vanilla: `createRageLayer()` from `ragelayer` — a lazy controller that does no browser work until `open()`.

The toolbar is keyboard-operable (digits select tools, Cmd/Ctrl+Z undoes) and every string, including tool names, can be translated.

## Install

```sh
npm install ragelayer
```

Modern ESM with TypeScript declarations. React, React DOM, and Vue are optional peer dependencies; zero runtime dependencies.

## Sources

- Product page and live demo: https://www.parthjadhav.com/products/ragelayer
- Documentation: https://www.parthjadhav.com/products/ragelayer/docs
- Tool gallery: https://www.parthjadhav.com/products/ragelayer/docs/tools
- API reference: https://www.parthjadhav.com/products/ragelayer/docs/api
- npm: https://www.npmjs.com/package/ragelayer
- Source: https://github.com/ParthJadhav/RageLayer
- Releases: https://github.com/ParthJadhav/RageLayer/releases