Add embeddable HTML export from the dial

[pzep1]

Summary

Adds an Export action to the dial that downloads a single self-contained HTML file capturing the live, interactive dither system — not a still frame.

A first attempt at PNG/SVG export ended up just being a screenshot of whatever happened to be on the canvas at viewport size, which missed the point: the artifact of this project is the mouse-reactive particle animation, not a frozen image. This export packages that animation as a portable, embeddable file.

What gets exported

A ~20 KB standalone dither-embed-<timestamp>.html containing:

• The dither algorithms (Floyd-Steinberg, Bayer, blue noise) and rounded-square mask
• The particle system (mouse force field, click shockwaves, easing)
• Render loop + ResizeObserver-driven rebuilds
• The current dial config baked in as a CONFIG object
• The source image inlined as a base64 data URL

No external requests, no dependencies. Open it directly or drop in an iframe:

<iframe src="dither-embed-...html" style="width:100%;height:600px;border:0"></iframe>

Implementation

• src/lib/embed-runtime.ts — vanilla-JS port of dither-algorithms, image-processing, and particle-system, wrapped in a single runDitherEmbed(CONFIG) function. The function's source is stringified via Function.prototype.toString() and inlined into the exported HTML by buildEmbedHTML(). Also exposes imageSrcToDataUrl() for embedding the current image.
• src/components/particle-canvas.tsx — new export: { type: "action" } entry in the dial, an exportArtwork callback that fetches the current image, builds the HTML, and triggers a download. Uses an exportRef to avoid the closure ordering issue with useDialKit's onAction.

Test plan

• Click Export in the dial — a dither-embed-<timestamp>.html file downloads
• Open the downloaded file directly in a browser — it renders, animates, and reacts to the cursor / clicks
• Resize the window — the dot grid rebuilds at the new size
• Verify the inlined config matches whatever you had set in the dial at export time
• Drop the file into an iframe on another page — it works without any external requests

🤖 Generated with Claude Code

[vercel]

@pzep1 is attempting to deploy a commit to the leo-6143's projects Team on Vercel.

A member of the Team first needs to authorize it.

[pzep1]

thanks for OSSing this btw, been fun to play with! I thought maybe its useful for others to have it make a html embeddable