DavidHDev/canvas-ui

これは何？

主な機能

• 01流体、炎、ガラス、レトログリッチ、パーティクル、3Dオブジェクトなど、35種類のエフェクト
• 02React、Solid、Preact、Vue、Svelte、vanilla JavaScript向けのコンポーネント
• 03WebGL（GLSL）版とWebGPU（vgpu経由のWGSL）版のレンダラー
• 04shadcn互換レジストリを通じてプロジェクトにソースをコピー
• 05エフェクトの下にあるコンテンツはライブで操作可能な状態を維持
• 06AIアシスタントがコンポーネントを検索・インストールできるMCPサポート

ユースケース

• マーケティング用ランディングページに液体やガラスのヒーローエフェクトを追加する
• ポートフォリオやデザイン重視のサイトに、操作可能なビジュアルの仕上げを加える
• クリエイティブなWebプロジェクトにレトログリッチやASCIIレンズを適用する
• ReactまたはVueアプリ内でGLBやSVGモデルを3Dシーンとして描画する

クイックスタート

1. 1

   まだ shadcn をセットアップしていない場合は、shadcn init を実行します

   npx shadcn@latest init
2. 2

   Liquid for React などのコンポーネントを追加します

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

   コード内でコンポーネントを使ってページをラップします

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

• !README にはライセンスが MIT + Commons Clause と記載されており、ソフトウェアの販売が制限されています。一方、メタデータでは検出されたライセンスがありません。
• !エフェクトの大半は実験的な HTML-in-canvas API に依存しており、それ以外の環境では GPU オーバーレイにフォールバックします。
• !WebGPU ビルドには、Chrome または Edge 113 以降、Safari 26 以降、Firefox 141 以降などの新しいブラウザーが必要です。

収録されている特集

トピック

よくある質問

canvas-ui とは？

ライブHTMLコンテンツ上で動作する、液体・ガラス・炎など35種類のフレームワーク非依存なcanvas UIエフェクトをコピーして使えるライブラリ。 Canvas UIは、canvasに描画するクリエイティブなビジュアルコンポーネント集です。流体シミュレーション、ガラスの歪み、炎、グリッチ、3Dシーンなどのエフェクトを、ページ上のライブで操作可能なHTMLに重ねて表示できます。そのため、テキストは選択でき、リンクもクリックできます。React、Solid、Preact、Vue、Svelte、vanilla JavaScript向けのコンポーネントが用意されています。

canvas-ui は無料で使えますか？ライセンスは？

canvas-ui は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

canvas-ui は今もメンテナンスされていますか？

半年以内に更新あり。canvas-ui の最終コミットは 2026年10月3日 です。

canvas-ui は何に使えますか？

マーケティング用ランディングページに液体やガラスのヒーローエフェクトを追加する ポートフォリオやデザイン重視のサイトに、操作可能なビジュアルの仕上げを加える クリエイティブなWebプロジェクトにレトログリッチやASCIIレンズを適用する ReactまたはVueアプリ内でGLBやSVGモデルを3Dシーンとして描画する

canvas-ui のインストール方法は？

まだ shadcn をセットアップしていない場合は、shadcn init を実行します: npx shadcn@latest init Liquid for React などのコンポーネントを追加します: npx shadcn@latest add @canvas-ui/liquid-react コード内でコンポーネントを使ってページをラップします

canvas-ui はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/DavidHDev/canvas-ui