Canvas UI は、ライブ DOM 上で WebGL および WebGPU エフェクトを実行する 35 の HTML-in-Canvas コンポーネントを提供します
React Bits の作成者 David Haz によるオープンソース コンポーネント ライブラリである Canvas UI は、実際のインタラクティブなページ コンテンツに対して GPU エフェクトを実行する、実験的な HTML-in-Canvas API 上に構築された最初のライブラリとしてリリースされました。
このライブラリには、ポインター駆動の流体、火、ガラス レンズ、ASCII フィルター、VHS グレイン、およびパーティクル リビールを含む 35 のコンポーネントが同梱されています。各エフェクトには、GLSL を使用する WebGL バージョンと、vgpu 経由で WGSL を使用する WebGPU バージョンがあり、依存関係のない React、Solid、Preact、Vue、Svelte、およびバニラ TypeScript のラッパーを備えています。
死んだビットマップをペイントする代わりに、ほとんどのコンポーネントは Chrome を使用します html-in-canvas ライブ DOM をキャンバスに配置し、それをキャプチャするための API drawElementImageそれをテクスチャとしてロードし、シェーダーで変形させます。テキストは選択可能なままで、リンクはクリック可能なままで、コンテンツはアクセシビリティ ツリーに残ります。コンポーネントはソースとして配布されます。 shadcn-compatible パッケージとしてではなく、レジストリ:
npx shadcn@latest add @canvas-ui/liquid-react
完全なエクスペリエンスを実現するには Chrome が必要です canvas-draw-element フラグまたはオリジン試行トークン。Chrome 148 から 150 まで実行され、単一のドメインにバインドされます。他の場所では、 html-in-canvas エフェクトは単純な GPU オーバーレイにフォールバックするか、ラップされたコンテンツを変更せずにレンダリングし、3D オブジェクト コンポーネントはどこでも機能します。
コードはリポジトリにコピーされるため、アップグレードとは、インストール コマンドを再実行し、ローカル編集を調整することを意味します。レンダリングの変更は主に、インストールされているファイルを次のように置き換えることを意味します。 -webgpu 追加するレジストリ項目 vgpu そして @webgpu/types。このプロジェクトでは、Chrome 150 の変更点についても文書化しています。 texElementImage2D そして copyElementImageToTexture キャプチャは 2D API 経由で行われ、アップロードは標準を使用するため、移行は必要ありません。 texImage2D または copyExternalImageToTexture。
shadcn はこれを、これまで見た中で最も印象的なレジスターの 1 つと呼び、Chrome for Developers アカウントはこれを見ることができて良かったと述べています。 html-in-canvas 新しいスタッフに力を与える。詳細な分解記事を書いた Flavio Copes 氏は、その地味なエンジニアリングを賞賛しました。Liquid コンポーネントはループを停止します。 IntersectionObserver 私が画面から離れているときは、光栄です prefers-reduced-motion逆アセンブリ時にテクスチャ、プログラム、リスナーを起動します。彼のアドバイスは、6 つの強力なエフェクトではなく 1 つの強力なエフェクトを使用し、ダッシュボード、ホーム ストリーム、ドキュメント サイトを避けることでした。
Hacker News では、あるコメント投稿者がデモのバナーに対して、Google の独占的能力について懐疑的なコメントを返しました。
あなたは Chrome を使っています…そして Google が受け入れ、拡大し、消滅することを可能にするこれらのテクノロジーを拒否すべきではないでしょうか?
この悲しいほど難解な懸念にもかかわらず、アーティストに敬意を表します（そうでないことを願います）。
別のユーザーは次のように答えました。
標準化プロセスには実装が必要です 前に 標準化。そして、WHATWG の問題に関する最新のコメントは、Jake Archibald (Mozilla) と Anne van Kesteren (Apple) からのものです。これは Google の一方的なプロジェクトではありません。
WICG 説明者でのアクセシビリティに関する議論は、ジオメトリを更新せずに描画可能なサブツリーを公開する方法を含め、まだ未解決です。
Paper Shaders は、npm からインストールされる依存関係のないキャンバス シェーダーを提供しますが、コンテンツの背後または周囲にテクスチャとして配置されます。同じ作者の React Bits は、DOM を直接アニメーション化します。 Canvas UI は、ページ自体をシェーダー入力として使用する唯一のオプションです。そのため、これも Safari と Firefox が実装していない機能に依存しています。
ライセンスは MIT に共通条件を加えたものであるため、商用利用は許可されていますが、コンポーネントの再販は許可されていません。リポジトリは 4,600 スターを超えており、レジストリは MCP に対応しているため、ヘルパーは MCP shadcn サーバーを介してコンポーネントを参照してインストールできます。
