Extension: prototype persistent physical page tools

[spencerc99]

Summary

• add a hammer inventory item that dents, displaces, and cracks live DOM elements across repeated strikes
• replace straight scissors cuts with three treatments: seeded organic paper tears, animated cloth flaps, and stepped pixel rips
• reveal actual DOM layers beneath a tear, falling back to a black aperture when the cut reaches the page root
• persist hammer impacts and scissors tears locally per page, with Delete, Backspace, or Cmd/Ctrl+Z undo while armed
• animate the wielded scissors and hammer when they strike
• expose the real flag-off tools in the social playground and include three browser-recorded demos

Rationale

This explores physical collage tools directly inside arbitrary webpages using DOM, CSS clip paths, SVG overlays, and the Web Animations API. It stays DOM-native for this prototype so underlying controls remain real and interactive; html-in-canvas can be revisited once the interaction language is clearer.

Preview

Open the interactive physical-tools playground

Use arm scissors directly to compare paper, cloth, and pixel tears. The first two cards reveal artwork beneath them; the final tile opens into black. Use arm hammer directly and strike either hammer target repeatedly.

• Paper, cloth, and pixel tear comparison
• Persisted layers and tear undo
• Hammer damage and persistence

Verification

• bun run -C extension test --run: 63 files, 392 tests passed
• bun run build-extension: passed
• bun run build in extension/website: passed
• browser: verified all three tear treatments, real underlayer reveal, final black aperture, hammer accumulation on a panel and button, reload persistence, and undo
• regression: restored offscreen tears defer layer detection until their target enters the viewport
• MP4s: H.264, 1280x800, no audio, fast-start enabled

Scope notes

• persistence remains local-only for this prototype; shared persistence is deferred
• scissors storage uses a v2 key, so cuts made with the earlier straight-cut prototype reset
• both production feature flags remain off; the social playground enables the internal development override
• no package API, public docs, changeset, or starter-template changes

[pkg-pr-new]

Open in StackBlitz

bun add https://pkg.pr.new/@playhtml/common@311

bun add https://pkg.pr.new/playhtml@311

bun add https://pkg.pr.new/@playhtml/react@311

commit: b4519b3

[cloudflare-workers-and-pages]

Deploying we-were-online-website with    Cloudflare Pages

Latest commit:	b4519b3
Status:	✅  Deploy successful!
Preview URL:	https://768bdb28.we-were-online-website.pages.dev
Branch Preview URL:	https://cx-physical-tools-prototype.we-were-online-website.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying playhtml with    Cloudflare Pages

Latest commit:	b4519b3
Status:	✅  Deploy successful!
Preview URL:	https://f394f658.playhtml.pages.dev
Branch Preview URL:	https://cx-physical-tools-prototype.playhtml.pages.dev

View logs