Canvas UI: Creative Canvas and WebGL Component Library

ライブHTMLの上でエフェクトが走る

Canvas UIは、HTMLの上にcanvas・WebGLエフェクトを重ねるオープンソースのコンポーネント集。作者はDavid Hazで、React・Vue・Svelte・vanilla TypeScriptの4形式で提供されている。仕組みが面白く、スクリーンショットをテクスチャ化するのではなく、Chromeで実装が進む実験的機能html-in-canvasを使ってライブなHTMLをそのままcanvasに描画する。リンクやテキスト選択が生きたまま、ガラスレンズや流体シミュレーションが上に乗る。非対応ブラウザでは通常のHTML+WebGLオーバーレイにフォールバックするので、表示が壊れることはない。

コードは手元に置く方式

コンポーネントは24種類。ASCII文字化のAsciify、ガラス粉砕のShatter、テープノイズのVHS、レンズ歪みのGlassなど、HTMLオーバーレイ系19種と3Dオブジェクト系5種が揃う。導入はshadcn CLIのnpx shadcn@latest addで、npmパッケージとしてではなくコード自体がリポジトリに入るため、改変の自由度が高い。オフスクリーンでは描画を止め、prefers-reduced-motionにも対応。ライセンスはMIT + Commons Clause。