Rendering
Every Canvas UI effect ships in two renderer builds: WebGL and WebGPU. They expose the same props, the same option types, and the same public API. Pick the renderer you want, the effect should look and move the same.
Choosing a renderer
WebGPU is a matter of taste, not a requirement. Pick WebGL for the widest browser support and zero dependencies. Pick WebGPU if you want WGSL, a WebGPU-native and compute-ready pipeline, or you are standardizing on WebGPU.
| WebGL | WebGPU | |
|---|---|---|
| Shading language | GLSL | WGSL |
| Dependencies | None, except three for the object effects | vgpu, plus three for the object effects |
| Frameworks | React, Vue, Svelte, Solid, Preact, vanilla | React, Vue, Svelte, Solid, Preact, vanilla |
| Browser support | Widest support through WebGL2 | Chrome/Edge 113+, Safari 26+ / iOS 26, Firefox 141+ |
| Fallback behavior | Falls back to regular HTML when html-in-canvas is unavailable | Shows wrapped content unchanged when WebGPU is unavailable |
| Install suffix | None, for example @canvas-ui/ripple-react | -webgpu, for example @canvas-ui/ripple-react-webgpu |
Install the WebGPU build
Use the renderer selector in the install block, or add the WebGPU registry item directly:
npx shadcn@latest add @canvas-ui/ripple-reactTypeScript setup
The WebGPU build depends on @webgpu/types. The CLI adds it as a devDependency. If your TypeScript setup does not already include WebGPU types, add this to a .d.ts file:
/// <reference types="@webgpu/types" />How it works
Each installed component is still a single source file. React files inline the engine in files like Ripple.tsx. Vanilla WebGPU files use names like RippleWebGPU.ts, while the WebGL vanilla files use RippleVanilla.ts.
The public shape stays the same: create<Base>(), <Base>Options, setOptions(), and destroy(). The WebGPU path shares one device per page, initializes lazily and asynchronously, and returns nullsynchronously when navigator.gpu or an adapter is missing so framework wrappers can fall back without throwing.
The renderer uses a premultiplied surface. The page is captured with html-in-canvas, uploaded as a texture, then sampled by WGSL shaders written as inline template strings. Mipmaps are generated in WebGPU wherever the matching WebGL build used them.
Switching later
The API is identical, so switching renderers is usually replacing the installed file with the other build. The docs renderer selector remembers your WebGL or WebGPU choice across pages.
Browser support
- WebGL build: WebGL2 browsers, with html-in-canvas effects using the documented html-in-canvas fallback behavior.
- WebGPU build: Chrome/Edge 113+, Safari 26+ / iOS 26, and Firefox 141+.
- If
navigator.gpuis missing, or no adapter is available, the WebGPU component renders the wrapped content unchanged.
What is the same / what differs
The look, motion, props, option types, and public API are the same. WebGPU needs a modern browser and adds vgpu. Both builds ship for all six frameworks, because the wrappers are shared and only the engine file differs.