Use one Canvas UI effect as progressive enhancement over usable content. Start with pinned source and complete license evidence. This folder contains original operating guidance, not bundled upstream engines.
When to use this skill
- A task names DavidHDev's Canvas UI or an
@canvas-uiregistry component. - A Canvas UI integration needs a framework/renderer choice or fallback repair.
- Existing Canvas UI behavior needs lifecycle, motion or input-path inspection.
| Different primary job | Owner |
|---|---|
| React Bits catalog or its animated React components | react-bits |
| A custom shader, scroll or CSS visual recipe | web-design |
| A drawing editor or HTML Canvas API tutorial | The app's canvas implementation |
| Page identity or typography direction | A design-direction skill |
The procedure is usable without installing any neighboring skill.
Instructions
1. Clear the distribution boundary
Read the selected revision's entire LICENSE.md before copying source.
It permits use as part of applications, websites or products but restricts
selling, sublicensing or redistributing the components themselves, including
bundles and ports. Do not relabel it plain MIT or treat the README's shorter
license summary as overriding the license file.
For a component marketplace, reusable kit or library redistribution request,
stop that distribution path and require permission or an appropriately licensed
alternative. Keep third-party model, image and font rights separate.
2. Name the exact variant
Record effect, framework, renderer, target route and intended fallback.
The inspected docs offer React, Vue, Svelte, Solid, Preact and vanilla variants;
read the selected variant before integration. WebGL is the default build;
WebGPU registry names append -webgpu after the framework.
Confirm live registry metadata before any approved install, because @latest
and a registry URL are mutable and are not pinned by this reference's SHA.
3. Inspect packaging and support before copying
Prefer the documented, generated standalone component over a repository wrapper alone. Source wrappers import engines; engines can import shared helpers. The registry assembly inlines those dependencies into installed source. Compare the actual installed file and dependencies with that packaging contract. Read component-specific requirements: HTML-in-Canvas is experimental and not interchangeable with WebGPU support. A demo working on canvasui.dev does not prove the destination domain has the required browser capability/origin trial. Keep ordinary HTML when capture, graphics initialization or a renderer fails.
4. Integrate a bounded region
Give the wrapper a deliberate layout size and preserve semantic content.
Keep output canvases decorative, out of the accessibility tree, and transparent
to pointer targeting; retain real links, labels and keyboard-operable controls.
React integration belongs in a client boundary. Preserve the wrapper's safe
server snapshot and effect cleanup rather than moving GPU work into render.
Vanilla integrations own creation, resize/options updates and destroy().
Inspect actual option types instead of inventing universal pause or quality props.
5. Preserve lifecycle and motion controls
On removal or route change, release the engine, frames, listeners, observers and GPU resources it owns. Avoid a second external animation loop around its loop. Honor reduced motion with a static readable path; inspect each effect rather than generalizing Liquid's pointer gating to the whole catalog. Suspend unnecessary hidden/offscreen work and bound queued interaction work. The inspected Liquid engine already has relevant guards; preserve them. Resolution caps are implementation limits, not measured frame-rate promises.
6. Exercise enhancement and fallback independently
Check one supported path and one unavailable-capability path on the target app. Verify content visibility, clicks, selection, keyboard focus, scrolling, zoom, touch and route remount. Include reduced motion and a hidden/offscreen interval. ParticleScroll must remain readable and interactive without HTML-in-Canvas; its inspected wrapper hides the output canvas on that fallback path. Record console failures and target-device performance where actually measured. No runtime or cross-browser result was established by this source-only audit.
Approval boundaries
Public source inspection is read-only. Dependency/registry installation, browser flag or profile changes, origin-trial registration, MCP client configuration, paid assets and deployment require separate authorization. These commands are inspected examples, not executed setup steps:
npx shadcn@latest add @canvas-ui/liquid-react
npx shadcn@latest add @canvas-ui/liquid-react-webgpu
Examples
- "Add Liquid from Canvas UI to one React hero." Check license and registry packaging, choose renderer, retain usable HTML and verify teardown/fallback.
- "Bundle Canvas UI ports for sale." Stop the component redistribution path; product-use permission does not establish reusable-kit distribution rights.
Best practices
One justified effect is preferable to a blanket page wrapper. Keep semantic content available before GPU startup and report checks not performed explicitly.