フロントエンド開発者のDavid Haz氏は2026年7月23日、Web用の視覚効果コンポーネントライブラリ「Canvas UI」を、MIT + Commons Clause（コモンズ条項付きMITライセンス）の元、オープンソースとして公開した。

Canvas UI: Creative Canvas and WebGL Component Library

https://canvasui.dev/

Canvas UIはW3CのWICGが試験的に公開しているChrome用のAPIであるHTML-in-Canvas APIを元に構築されている。このAPIを使うと、Webのインタラクティブ性やアクセシビリティ、ブラウザ機能を妨げることなく、DOMコンテンツを2D canvasまたはWebGL/WebGPUテクスチャに直接描画できる。Canvas UIはこれを視覚効果ごとにコンポーネント化したもの。

各コンポーネントはReact、Solid、Preact、Vue、Vanilla JS（またはVanilla TS）を含む6種類のフレームワーク向けに提供される。それぞれが単一のスタンドアロンファイルで、shadcnレジストリを通じて配布されるため、インストールするとソースコードがそのままコピーされ、変更も自由。更新が必要なパッケージはなく、特定のプラットフォームに縛られることもない。

また、各エフェクトはWebGLを介してGPU上でレンダリングされ、画面外では一時停止される。アンマウント時に完全にクリーンアップされたり、モーションの低減設定なども反映可能など、重い動作とならないように配慮されている。

このほか、MCPサーバーをサポートし、AIエージェントからの利用も考慮されている。レジストリはSHADCNプロトコルに対応しているため、SHADCN MCPサーバーを備えたAIアシスタントによってプロンプトからライブラリの閲覧、ドキュメントの閲覧、コンポーネントのインストールなどを指定することができる。

提供される視覚効果は以下の25種。

• Asciify
• Bend
• Blaze
• Bubble
• Cloth
• Clouds
• Dithered Object
• Droplets
• Frost
• Glass
• Glass Object
• Glitch
• Grid
• Hex Float
• Laser
• Liquid
• Magnify
• Particle Object
• Particle Reveal
• Particle Scroll
• Peel
• Retro Dither
• Ripple
• Shatter
• VHS

なお、HTML-in-Canvas APIはChrome 148～150で実行できる実験的な機能であるため[1]、Canvas UIはコンポーネント実行時にブラウザのサポートを検出し、純粋なWebGLオーバーレイへと適切にフォールバックする。

詳しい使用法はドキュメントを参照。