@canvas-ui
Creative html-in-canvas components. React, Vue, Svelte, TS.
Install this registry
npx shadcn@latest add https://canvasui.dev/r/registry.json pnpm dlx shadcn@latest add https://canvasui.dev/r/registry.json bunx shadcn@latest add https://canvasui.dev/r/registry.json curl -s https://canvasui.dev/r/registry.json Components
150 totalRedraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch…
npx shadcn@latest add https://canvasui.dev/r/asciify-react.json Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch…
npx shadcn@latest add https://canvasui.dev/r/asciify-vue.json Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch…
npx shadcn@latest add https://canvasui.dev/r/asciify-svelte.json Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch…
npx shadcn@latest add https://canvasui.dev/r/asciify-solid.json Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch…
npx shadcn@latest add https://canvasui.dev/r/asciify-preact.json Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive in Ch…
npx shadcn@latest add https://canvasui.dev/r/asciify-vanilla.json Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/bend-react.json Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/bend-vue.json Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/bend-svelte.json Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/bend-solid.json Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/bend-preact.json Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/bend-vanilla.json Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/grid-react.json Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/grid-vue.json Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/grid-svelte.json Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/grid-solid.json Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/grid-preact.json Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/grid-vanilla.json Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/blaze-react.json Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/blaze-vue.json Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/blaze-svelte.json Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/blaze-solid.json Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/blaze-preact.json Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/blaze-vanilla.json A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML …
npx shadcn@latest add https://canvasui.dev/r/bubble-react.json A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML …
npx shadcn@latest add https://canvasui.dev/r/bubble-vue.json A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML …
npx shadcn@latest add https://canvasui.dev/r/bubble-svelte.json A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML …
npx shadcn@latest add https://canvasui.dev/r/bubble-solid.json A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML …
npx shadcn@latest add https://canvasui.dev/r/bubble-preact.json A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML …
npx shadcn@latest add https://canvasui.dev/r/bubble-vanilla.json Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. …
npx shadcn@latest add https://canvasui.dev/r/cloth-react.json Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. …
npx shadcn@latest add https://canvasui.dev/r/cloth-vue.json Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. …
npx shadcn@latest add https://canvasui.dev/r/cloth-svelte.json Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. …
npx shadcn@latest add https://canvasui.dev/r/cloth-solid.json Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. …
npx shadcn@latest add https://canvasui.dev/r/cloth-preact.json Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. …
npx shadcn@latest add https://canvasui.dev/r/cloth-vanilla.json Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/clouds-react.json Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/clouds-vue.json Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/clouds-svelte.json Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/clouds-solid.json Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/clouds-preact.json Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/clouds-vanilla.json A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/liquid-react.json A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/liquid-vue.json A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/liquid-svelte.json A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/liquid-solid.json A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/liquid-preact.json A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/liquid-vanilla.json A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t…
npx shadcn@latest add https://canvasui.dev/r/magnify-react.json A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t…
npx shadcn@latest add https://canvasui.dev/r/magnify-vue.json A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t…
npx shadcn@latest add https://canvasui.dev/r/magnify-svelte.json A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t…
npx shadcn@latest add https://canvasui.dev/r/magnify-solid.json A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t…
npx shadcn@latest add https://canvasui.dev/r/magnify-preact.json A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t…
npx shadcn@latest add https://canvasui.dev/r/magnify-vanilla.json Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/dithered-object-react.json Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/dithered-object-vue.json Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/dithered-object-svelte.json Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/dithered-object-solid.json Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/dithered-object-preact.json Renders any GLB/glTF model, SVG, or image in a floating studio scene through a 1-bit Bayer, halftone, or Floyd–Steinberg dither. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/dithered-object-vanilla.json Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/droplets-react.json Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/droplets-vue.json Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/droplets-svelte.json Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/droplets-solid.json Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/droplets-preact.json Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/droplets-vanilla.json Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/particle-object-react.json Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/particle-object-vue.json Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/particle-object-svelte.json Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/particle-object-solid.json Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/particle-object-preact.json Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js.
npx shadcn@latest add https://canvasui.dev/r/particle-object-vanilla.json Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-reveal-react.json Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-reveal-vue.json Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-reveal-svelte.json Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-reveal-solid.json Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-reveal-preact.json Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-reveal-vanilla.json Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-scroll-react.json Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-scroll-vue.json Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-scroll-svelte.json Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-scroll-solid.json Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-scroll-preact.json Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/particle-scroll-vanilla.json Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/peel-react.json Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/peel-vue.json Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/peel-svelte.json Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/peel-solid.json Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/peel-preact.json Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/peel-vanilla.json Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML …
npx shadcn@latest add https://canvasui.dev/r/glitch-react.json Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML …
npx shadcn@latest add https://canvasui.dev/r/glitch-vue.json Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML …
npx shadcn@latest add https://canvasui.dev/r/glitch-svelte.json Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML …
npx shadcn@latest add https://canvasui.dev/r/glitch-solid.json Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML …
npx shadcn@latest add https://canvasui.dev/r/glitch-preact.json Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML …
npx shadcn@latest add https://canvasui.dev/r/glitch-vanilla.json Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte…
npx shadcn@latest add https://canvasui.dev/r/frost-react.json Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte…
npx shadcn@latest add https://canvasui.dev/r/frost-vue.json Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte…
npx shadcn@latest add https://canvasui.dev/r/frost-svelte.json Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte…
npx shadcn@latest add https://canvasui.dev/r/frost-solid.json Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte…
npx shadcn@latest add https://canvasui.dev/r/frost-preact.json Covers your page in a frozen pane of ice with refraction and frost grain. Hovering melts a hole through the frost, which freezes back over. The HTML stays inte…
npx shadcn@latest add https://canvasui.dev/r/frost-vanilla.json Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive…
npx shadcn@latest add https://canvasui.dev/r/hex-float-react.json Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive…
npx shadcn@latest add https://canvasui.dev/r/hex-float-vue.json Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive…
npx shadcn@latest add https://canvasui.dev/r/hex-float-svelte.json Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive…
npx shadcn@latest add https://canvasui.dev/r/hex-float-solid.json Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive…
npx shadcn@latest add https://canvasui.dev/r/hex-float-preact.json Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive…
npx shadcn@latest add https://canvasui.dev/r/hex-float-vanilla.json A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/retro-dither-react.json A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/retro-dither-vue.json A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/retro-dither-svelte.json A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/retro-dither-solid.json A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/retro-dither-preact.json A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/retro-dither-vanilla.json Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera…
npx shadcn@latest add https://canvasui.dev/r/ripple-react.json Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera…
npx shadcn@latest add https://canvasui.dev/r/ripple-vue.json Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera…
npx shadcn@latest add https://canvasui.dev/r/ripple-svelte.json Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera…
npx shadcn@latest add https://canvasui.dev/r/ripple-solid.json Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera…
npx shadcn@latest add https://canvasui.dev/r/ripple-preact.json Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera…
npx shadcn@latest add https://canvasui.dev/r/ripple-vanilla.json Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T…
npx shadcn@latest add https://canvasui.dev/r/shatter-react.json Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T…
npx shadcn@latest add https://canvasui.dev/r/shatter-vue.json Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T…
npx shadcn@latest add https://canvasui.dev/r/shatter-svelte.json Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T…
npx shadcn@latest add https://canvasui.dev/r/shatter-solid.json Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T…
npx shadcn@latest add https://canvasui.dev/r/shatter-preact.json Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T…
npx shadcn@latest add https://canvasui.dev/r/shatter-vanilla.json Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/vhs-react.json Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/vhs-vue.json Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/vhs-svelte.json Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/vhs-solid.json Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/vhs-preact.json Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies.
npx shadcn@latest add https://canvasui.dev/r/vhs-vanilla.json Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep…
npx shadcn@latest add https://canvasui.dev/r/laser-react.json Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep…
npx shadcn@latest add https://canvasui.dev/r/laser-vue.json Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep…
npx shadcn@latest add https://canvasui.dev/r/laser-svelte.json Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep…
npx shadcn@latest add https://canvasui.dev/r/laser-solid.json Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep…
npx shadcn@latest add https://canvasui.dev/r/laser-preact.json Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep…
npx shadcn@latest add https://canvasui.dev/r/laser-vanilla.json A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci…
npx shadcn@latest add https://canvasui.dev/r/glass-react.json A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci…
npx shadcn@latest add https://canvasui.dev/r/glass-vue.json A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci…
npx shadcn@latest add https://canvasui.dev/r/glass-svelte.json A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci…
npx shadcn@latest add https://canvasui.dev/r/glass-solid.json A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci…
npx shadcn@latest add https://canvasui.dev/r/glass-preact.json A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci…
npx shadcn@latest add https://canvasui.dev/r/glass-vanilla.json Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a …
npx shadcn@latest add https://canvasui.dev/r/glass-object-react.json Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a …
npx shadcn@latest add https://canvasui.dev/r/glass-object-vue.json Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a …
npx shadcn@latest add https://canvasui.dev/r/glass-object-svelte.json Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a …
npx shadcn@latest add https://canvasui.dev/r/glass-object-solid.json Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a …
npx shadcn@latest add https://canvasui.dev/r/glass-object-preact.json Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a …
npx shadcn@latest add https://canvasui.dev/r/glass-object-vanilla.json