canvas-uiとは？html-in-canvasでWebGLエフェクトをReact/Vueに追加するUIライブラリ

canvas-uiはWebページのDOMをそのままWebGLテクスチャとして扱い、流体・炎・ガラス破砕などのシェーダーエフェクトを実現するUIコンポーネントライブラリです。テキストの選択やリンクの動作を保ちながらリアルタイムエフェクトを適用でき、React・Vue・Svelte・vanilla JSに対応しています。

GitHubで急上昇中の DavidHDev/canvas-ui をご紹介します。スター数 1602★ を獲得し、Web分野で注目されているツールです。

canvas-ui とは？

canvas-uiは、WebページのDOMをWebGLテクスチャとして扱える実験的なhtml-in-canvas APIを活用したUIコンポーネントライブラリです。2026年7月の公開後、わずか数日で1,600以上のGitHubスターを獲得しました。

最大の特徴は、通常のHTMLページをそのままWebGLの素材として使える点です。Liquid・Blaze・Glass・Shatter・VHS・Particle Revealなど25種類以上のコンポーネントが用意され、テキストの選択可能性やリンクのクリック動作を維持しながらリアルタイムのシェーダーエフェクトをページ全体に適用できます。shadcn互換のレジストリからソースコードをコピーして使う方式で、React・Solid・Preact・Vue・Svelte・vanilla JSの6フレームワークに対応。7名のコントリビューターが開発に参加し、MITライセンス（Commons Clause付き）で提供されています。

こんな人におすすめ:

エンジニア向け: フロントエンドエンジニアがshadcn CLIで1コマンドインストールし、Webアプリのビジュアル演出をリッチ化できます。ソースはプロジェクト内に展開されカスタマイズ自在です。
非エンジニア向け: プログラミング知識が必要なため、エンジニア専用ライブラリです

主な機能・特徴

25種類のWebGLコンポーネント: Liquid（流体）・Blaze（炎）・Glass（ガラス）・Shatter（破砕）・VHS（ビデオノイズ）・Particle Reveal・Cloth・Ripple・Dropletsなど多彩なエフェクトを提供します
DOMのインタラクティビティ保持: html-in-canvas APIにより、テキストの選択・リンクのクリック・フォームの入力をWebGLエフェクト適用中も維持します
6フレームワーク対応: React・Solid・Preact・Vue・Svelte・vanilla TS向けにビルド済みのソースを提供します
shadcn互換レジストリ: npx shadcn@latest addコマンドでコンポーネントをプロジェクトに追加でき、ソースはカスタマイズ可能な形で展開されます
MCP対応: shadcn MCPサーバーと連携してAIアシスタントが自動でコンポーネントをインストールできます

使い方・始め方

shadcn CLIでのインストール（推奨）

まだshadcnを使っていない場合はまず初期化します:

npx shadcn@latest init

その後、コンポーネントを追加します:

npx shadcn@latest add @canvas-ui/liquid-react

liquidを任意のコンポーネント名（blaze・glass・shatter等）に、reactをsolid・vue・svelte・vanillaに変更して使えます。ソースがcomponents/canvasui/に展開され、自由にカスタマイズできます。

手動インストール

npx shadcn@latest add https://canvasui.dev/r/liquid-react.json

開発環境のセットアップ

git clone https://github.com/DavidHDev/canvas-ui.git
npm install
npm run dev        # レジストリビルド + Next.js dev 起動
npm run build      # プロダクションビルド
npm run deploy     # Cloudflare Workersへデプロイ

活用事例

ランディングページのビジュアルをリッチ化する

フロントエンドエンジニアがSaaS製品のランディングページにLiquidコンポーネントを追加し、ヒーローセクションに流体エフェクトを1コマンドで実装することで、競合との視覚的な差別化を短時間で実現できます。既存のReactコンポーネント構造を変更する必要がなく、エフェクトをオーバーレイとして追加するだけです。

クリエイティブ系サービスのインタラクション演出

WebデザイナーとJavaScriptエンジニアが協業し、ポートフォリオサイトや音楽・アート系サービスにVHSやShatterエフェクトを活用することで、ユニークなインタラクション演出を低コストで実装できます。ソースコードがプロジェクト内に展開されるため、デザイナーの要望に合わせたカスタマイズが容易です。

shadcnやThree.jsとの違い・なぜ今このツールか

既存のWebGLライブラリ（Three.js・Babylon.js）はDOMとWebGLが別レイヤーで動作するため、エフェクトの下にある要素のインタラクティビティが失われる問題がありました。canvas-uiはhtml-in-canvas APIにより、DOMそのものをWebGLテクスチャとして扱うことでこの問題を解決しています。

shadcnとの比較では、canvas-uiはshadcnの「ソースをコピーして使う」思想を継承しつつ、UIコンポーネントではなくビジュアルエフェクト専門のレジストリとして機能します。shadcnユーザーであれば既存のワークフローをそのまま使えます。Chrome/Edge 140+でのフラグ有効化が現時点では必要ですが、オリジントライアルによる本番環境対応も提供されており、商用利用を見据えた設計になっています。

こんな人に向いている

フロントエンドエンジニア（React・Vue・Svelte）: 既存のコンポーネント設計を変えずに視覚的なインパクトを追加したい場合に最適です。1コマンドでインストールでき、TypeScript型定義も完備しています。

クリエイティブ系WebエンジニアとWebデザイナー: 音楽・アート・ゲームなどクリエイティブ系のWebサービスで独自のビジュアル表現を実現したいエンジニアに向いています。25種類のエフェクトから目的に合ったものを選ぶだけで実装できます。

スタートアップのフルスタックエンジニア: ランディングページやプロダクトデモのビジュアルを短期間で差別化したい場面で、デザイナーなしで実装できる強力な手段になります。

使う前に知っておきたいこと

ブラウザ制限に注意

html-in-canvasのフル機能を使うには、現時点でChrome / Edge 140+かつchrome://flags/#canvas-draw-elementフラグの有効化が必要です。本番サイトではオリジントライアルトークンの取得が必要になります。ChromeとEdge以外のブラウザ（Firefox・Safari）ではWebGLオーバーレイへ自動フォールバックします。

ライセンスのCommons Clause

MITライセンスにCommons Clauseが付加されており、ライブラリ自体を商品として販売することは制限されています。自分のプロジェクトへの組み込みや商用サービスへの利用は自由です。テーマやコンポーネントマーケットプレイスを構築する場合は注意が必要です。

実験的なAPIのため仕様変更の可能性

html-in-canvas APIはChrome 140+で追加された実験的な機能です。ブラウザのバージョンアップに伴いAPIが変更される可能性があり、長期プロジェクトでの採用は動向を注視してください。

まとめ

canvas-uiはhtml-in-canvas APIという最先端技術を活用し、WebページのDOMをそのままWebGLエフェクトの素材として使える革新的なUIライブラリです。shadcn互換のレジストリで導入も簡単で、React・Vue・Svelteなど主要フレームワークに対応しています。Chrome/Edge 140+の制約はありますが、フォールバック機能で全ブラウザに対応します。ランディングページやポートフォリオのビジュアルを短時間でリッチ化したいフロントエンドエンジニアに最適な選択肢です。

GitHub でチェックする →

この技術を学ぶ

Web開発に興味を持った方には、Udemyのオンラインコースもおすすめです。