Creative components, in a new dimension. An open source library of tasteful html-in-canvas & WebGL components. Framework agnostic. Copy, paste, ship. Get started Browse components Components 33 AND COUNTING Open source 100% FREE FOREVER Install ONE COMMAND npx shadcn@latest add @canvas-ui/particle-reveal-react THE LIBRARY Every component, alive on canvas. Browse all ASCII Object Any GLB/glTF model, SVG, or image floating in a studio scene, redrawn as shape-matched ASCII characters. Asciify A soft lens that follows your cursor and redraws the live HTML beneath it as ascii characters. Bend Folds the top and bottom of your live HTML over straight virtual edges, like scrolling on the face of a cube. Blaze Fire sparks, smoke, and heat distortion rising over your live HTML. Bubble A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it. Canvas Paints your live HTML onto woven artist canvas, with a cursor that drags ridges of wet paint across the weave. Cloth Hangs your live HTML on fabric rippling in the wind. Cursor strokes send waves across the cloth. Clouds Theme-aware mist that blurs and refracts your live HTML, parted by cursor wind. Decrypt Reveal Renders your live HTML as ASCII cipher text that decrypts into the crisp UI around the cursor. Dithered Object Any GLB/glTF model, SVG, or image floating in a studio scene, rendered through a 1-bit dither. Displacement A displacement grid that ripples your live HTML away from the cursor, with color fringing and grain. Droplets Rain droplets that run down the screen and refract your live HTML. Flame Wrap Wraps any element in a border of fire with molten edges, sparks, and heat shimmer. Force Field An energy shield over your live HTML where clicks detonate shockwaves that refract the page. Frost A frozen pane of ice over your live HTML that melts under the cursor and refreezes. Glass A cursor-following glass lens that refracts your live HTML and zooms in on targets like a crystal ball. Glass Object Turns any 3D model, SVG, or image into floating liquid glass with real refraction, dispersion, and frost. ASCII Object Any GLB/glTF model, SVG, or image floating in a studio scene, redrawn as shape-matched ASCII characters. Asciify A soft lens that follows your cursor and redraws the live HTML beneath it as ascii characters. Bend Folds the top and bottom of your live HTML over straight virtual edges, like scrolling on the face of a cube. Blaze Fire sparks, smoke, and heat distortion rising over your live HTML. Bubble A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it. Canvas Paints your live HTML onto woven artist canvas, with a cursor that drags ridges of wet paint across the weave. Cloth Hangs your live HTML on fabric rippling in the wind. Cursor strokes send waves across the cloth. Clouds Theme-aware mist that blurs and refracts your live HTML, parted by cursor wind. Decrypt Reveal Renders your live HTML as ASCII cipher text that decrypts into the crisp UI around the cursor. Dithered Object Any GLB/glTF model, SVG, or image floating in a studio scene, rendered through a 1-bit dither. Displacement A displacement grid that ripples your live HTML away from the cursor, with color fringing and grain. Droplets Rain droplets that run down the screen and refract your live HTML. Flame Wrap Wraps any element in a border of fire with molten edges, sparks, and heat shimmer. Force Field An energy shield over your live HTML where clicks detonate shockwaves that refract the page. Frost A frozen pane of ice over your live HTML that melts under the cursor and refreezes. Glass A cursor-following glass lens that refracts your live HTML and zooms in on targets like a crystal ball. Glass Object Turns any 3D model, SVG, or image into floating liquid glass with real refraction, dispersion, and frost. Glitch Broadcast glitch bursts that tear your live HTML into shifted slices with RGB splits and corrupted blocks. Glyph Rain Falling glyph streams that light up your live HTML, with drop heads that surge where your cursor cuts through. Grid 3D tiles that ripple in staggered waves around the cursor over your live HTML. Hex Float Your live HTML on shiny floating hex tiles with perspective tilt and cursor lift. Laser A laser beam near the bottom of the viewport that reveals your live HTML from behind it on scroll. Liquid A pointer-driven WebGL fluid simulation that runs over your live HTML. Magnify A sci-fi scanner lens that magnifies your live HTML inside a HUD reticle, with click ripples that bend the page. Particle Object Rebuilds any 3D model, SVG, or image as particles that scatter around the cursor and spring back into shape. Particle Reveal Renders your live HTML as fine readable particles that merge into the crisp UI around the cursor. Particle Scroll Dissolves your live HTML below a chosen line into fine sand particles that reassemble on scroll. Peel Peels your live HTML back from a chosen edge on hover, revealing a second layer underneath. Retro Dither A retro dither lens that pixelates your live HTML around the cursor. Ripple Water ripples that spread from every click and refract your live HTML like a pond surface. Shatter Breaks your live HTML into 3D glass shards that lift, float, and refract around the cursor, with perspective and soft shadows. Liquid Object Drags any 3D model, SVG, or image through invisible liquid that swirls under the cursor and splits the light into color. VHS Worn tape playback with wave, head-switching noise, chroma bleed, and grain over your live HTML. Glitch Broadcast glitch bursts that tear your live HTML into shifted slices with RGB splits and corrupted blocks. Glyph Rain Falling glyph streams that light up your live HTML, with drop heads that surge where your cursor cuts through. Grid 3D tiles that ripple in staggered waves around the cursor over your live HTML. Hex Float Your live HTML on shiny floating hex tiles with perspective tilt and cursor lift. Laser A laser beam near the bottom of the viewport that reveals your live HTML from behind it on scroll. Liquid A pointer-driven WebGL fluid simulation that runs over your live HTML. Magnify A sci-fi scanner lens that magnifies your live HTML inside a HUD reticle, with click ripples that bend the page. Particle Object Rebuilds any 3D model, SVG, or image as particles that scatter around the cursor and spring back into shape. Particle Reveal Renders your live HTML as fine readable particles that merge into the crisp UI around the cursor. Particle Scroll Dissolves your live HTML below a chosen line into fine sand particles that reassemble on scroll. Peel Peels your live HTML back from a chosen edge on hover, revealing a second layer underneath. Retro Dither A retro dither lens that pixelates your live HTML around the cursor. Ripple Water ripples that spread from every click and refract your live HTML like a pond surface. Shatter Breaks your live HTML into 3D glass shards that lift, float, and refract around the cursor, with perspective and soft shadows. Liquid Object Drags any 3D model, SVG, or image through invisible liquid that swirls under the cursor and splits the light into color. VHS Worn tape playback with wave, head-switching noise, chroma bleed, and grain over your live HTML. HOW IT WORKS Copy, paste, ship. 01 Pick a component Browse the library and find the effect that fits. Every demo on this site is the real component, running live. 02 Run one command The shadcn CLI pulls the full source into your project. No package to install, no version to pin. 03 Make it yours The code lives in your repo from day one. Tune the props, restyle it, or rip it apart. It's yours. canvasui.dev/components Blaze Liquid Glass Shatter Particle Reveal VHS FRAMEWORK AGNOSTIC One component, six flavors. Every effect ships as React, Solid, Preact, Vue, Svelte, and dependency-free vanilla TypeScript. Same engine, same props, native to your stack. React hero.tsx import { ParticleReveal } from "@/components/canvasui/ParticleReveal"; export function Hero() { return ( <ParticleReveal radius={300}> <YourContent /> </ParticleReveal> ); } Agent MCP connected Add a particle reveal effect to my hero section Found particle-reveal in the Canvas UI registry. Installing it now. shadcn CLI Installed npx shadcn@latest add @canvas-ui/particle-reveal-react Done. ParticleReveal.tsx is in components/canvasui, wired into your hero. AI-READY Built for agents. The registry speaks the shadcn protocol, so any assistant with the shadcn MCP server can browse the library, read the docs, and install components, all from a single prompt. Set up the MCP server FAQ Good questions. Is Canvas UI free to use? Yes. Canvas UI is licensed under MIT + Commons Clause: use every component in any personal or commercial app or website, free forever. The only restriction is reselling or redistributing the components themselves, whether alone, in a bundle, or as a port. Which browsers are supported? Components that draw live HTML on canvas rely on an experimental browser capability, available today in Chrome behind a flag. Everywhere else they degrade gracefully: your content renders as regular HTML, and effects like Blaze, Liquid, Laser, Clouds, Bubble, Droplets, Glass, Magnify, Grid, and Ripple keep running as a pure WebGL overlay on top of it. WebGL-based components work in every modern browser. Will it slow my site down? The effects render on the GPU via WebGL and animate outside React's render cycle. Each component initializes only when mounted, pauses when off-screen, and cleans up fully on unmount. Reduced-motion preferences are respected. Do I need React? No. Every component ships in six flavors: React, Solid, Preact, Vue, Svelte, and dependency-free vanilla TypeScript. Same engine and the same options in all of them. How do updates work? The code is copied into your repo, so nothing updates from under you. When a component improves, re-run the install command to pull the latest version, or just keep your copy and evolve it yourself. Build in a new dimension. Pick one of our components, run one command, and ship something people remember. Get started Browse components Tasteful html-in-canvas components. Framework agnostic, creative by nature. Navigate Docs Components Installation From The Creator pro.reactbits.dev reactbits.dev © 2026 Canvas UI. Built by David Haz.