htmlincanvas demo
A free shader demo — play it in your browser, no install. A live catalog of Canvas UI — 33 shader effects running over one real, interactive HTML page. Built to show what Chrome's html-in-canvas API makes possible.
Vote and save it — free account with email or sign in with GitHub
Made this, @codyhxyz? See how many people played it → or use email
📅 Three new games every day, no account needed · Play today’s three →
Controls: Space · Mouse
GitHub may ask you to sign in, then to let VibeCruiser “Verify your GitHub identity” and “Act on your behalf”. We only read your profile and email, and never post anything.
No account needed to save ♥ or react 🔥: they’re under the game. Or vote with email.
Open the live demo Source on GitHubFrom the README
A live catalog of Canvas UI — 33 shader effects running over one real, interactive HTML page.
Canvas UI is a genuinely impressive library, and I wanted to actually understand what it could do rather than read a feature list. Chrome shipped an experimental API (html-in-canvas) that lets a shader sample live DOM — not a screenshot, not an iframe. That's new, and most people haven't seen it yet. Docs show effects one at a time. Nothing showed the same interface run through all of them, which is the fastest way to work out which effect is right for what.
Built something like this? Submit your vibe — free account, takes a minute. How listing works.
More like this
liquid lens
A WebGL metaball lens: soft bodies that chase the pointer, merge into one shape, and show a photograph only where they are. Every number is a slider.
shaderflow
Visual node-based GLSL shader editor - design materials on a graph, compiled live to WebGL. React + React Flow + Three.js.
brc background
Reverse-engineered reconstruction of the Bomb Rush Cyberfunk menu background: an iterated sine/cosine domain-warp WebGL shader, plus a React…
- 3d gradients generator Interactive WebGL gradient studio built with Three.js, GLSL noise, physics, and real-time material controls.
nothing to watch
An experimental webgl gallery that can visualize tens of thousands of film posters as a voronoi diagram
ditherwave
A tiny WebGL2 dithering primitive for React. Bayer, halftone, ASCII, error-diffusion. Under 8kb gz.
Made this?
Claim it: create a free account, then press CLAIM THIS in the cruiser. Put the badge below in your README or on your demo page first; that link is how we know it's yours.
Your project is on the cruise, loaded live from your own site. Put the badge in your README or on the demo page: it shows your live play count, it links back to this page, and everyone who lands here is one click from running the real thing.
