Liquid Logo は、デザインツールの会社 Paper による小さな Web アプリです。サイト liquid.paper.design で動き、コードは GitHub にあります。README では「just for fun（遊びで）」のプロジェクトと呼ばれています。
これはエージェントのスキルではありません。ブラウザで使うツールで、その効果は Paper Shaders というコードライブラリから来ています。AI エージェントはこのライブラリをサイトで使えます。
2026年10月28日時点で、リポジトリには GitHub で約1,400個のスターが付いていました。
仕組み
- ロゴを SVG か画像でアップロードします。アプリはそれをマスクに変え、面取りした縁を加えます。
- シェーダーがその形を、動く液体金属として描きます。
- 背景（メタル、白、黒、任意の色）を変えられ、分散、エッジ、パターンのぼかし、液状化、速度、パターンの大きさを調整できます。
アプリからのヒント
ロゴの背景は透明か白である必要があります。文字より図形のほうがうまくいき、SVG か高解像度の画像で最良の結果になります。
先に知っておきたいこと
サイトでロゴをアップロードすると、共有リンクを作るために、処理後の画像がオンラインストレージに保存されるコードになっています。まだ公開できないロゴはアップロードしないでください。
リポジトリは PolyForm Shield ライセンスです。コードは使えますが、競合する製品を作るためには使えないので、古典的なオープンソースライセンスではありません。Paper Shaders ライブラリ自体は Apache 2.0 ライセンスで、液体金属の効果も含んでいます。自分のサイトでこれを使いたいなら、使うべきはこちらです。
使い方
いちばん簡単なのは、liquid.paper.design を開いてロゴをアップロードし、調整することです。アプリを自分で動かすには、リポジトリをクローンします。
git clone https://github.com/paper-design/liquid-logo.git自分のサイトに液体金属のロゴを載せるには、AI エージェントに Paper Shaders パッケージを使うよう頼みます。
npm install @paper-design/shaders-react