felixturner

felixturner / html-in-canvas-cracks

Public

Real HTML rendered through a WebGPU + TSL pipeline — DOM as a texture source with live post-processing.

felixturner.github.iohtml-in-canvas canvas html-in-canvas shaders threejs tsl
44
4
100% credibility
Found Apr 24, 2026 at 44 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
JavaScript
AI Summary

An interactive web demonstration rendering a realistic, scrollable HTML page as a texture that cracks and shatters on clicks, with pieces falling into a 3D tunnel of glowing code snippets.

How It Works

1
🔍 Discover the demo

You stumble upon a fascinating web experiment on GitHub that promises a realistic webpage you can crack like glass.

2
🌐 Visit the live demo

Click the live demo link to open it in your web browser, where you see a familiar-looking page that scrolls and behaves just like any website.

3
👀 Explore the page

Scroll around, hover over elements, and select text – everything feels completely normal and interactive.

4
👆 Click to crack

Tap anywhere on the page to watch cracks spread across it like breaking ice, revealing a glowing tunnel of code drifting in the background.

5
💥 Shatter into pieces

Click again to break off chunks that tilt, tumble, and fall away into the mesmerizing 3D tunnel, with trails and glows adding magic.

6
⌨️ Play with controls

Use simple keyboard shortcuts like 'x' to explode shards or 'r' to reset, enhancing the fun and discovery.

🎉 Enjoy the spectacle

Sit back and admire the interactive art where your webpage transforms into a dynamic, shattering portal to a code-filled abyss.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 44 to 44 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is html-in-canvas-cracks?

This JavaScript experiment renders real HTML code—like a full GitHub page with live scrolling, selection, and layout—directly into a canvas texture via WebGPU and three.js TSL shaders. Click anywhere to crack the surface realistically, propagating fissures that shatter chunks into a drifting 3D tunnel of glowing code snippets pulled from the project itself. It delivers real-time HTML updates and interactivity under destructible canvas visuals, bridging DOM fidelity with GPU post-processing.

Why is it gaining traction?

Stands out by keeping real HTML behavior intact (hovers, text select, real-time clock-like refreshes) while overlaying bloom trails, fog-faded shards, and a parallax code tunnel—no janky approximations. Developers love the hook: paint live DOM to texture, then shatter it with physics-like cracks and audio SFX, all in a performant WebGPU pipeline. Beats basic canvas demos with its real-world GitHub mimicry and dev-mode split-view for pipeline inspection.

Who should use this?

WebGPU-curious frontend devs prototyping immersive effects for portfolios or real-time HTML editors online. Three.js hackers experimenting with DOM-as-texture for canvas cracks in interactive viewers. Suited for real github status page clones or real html viewer demos, not everyday apps.

Verdict

Intriguing demo worth forking for visual experiments, despite 44 stars and 1.0% credibility score signaling low maturity—no tests, Chrome 141+ only. Strong docs and live demo make it a quick win for real-time canvas hacks.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.