paper-design/shaders

これは何？

主な機能

• 01依存関係のないCanvasシェーダーコンポーネント
• 02Reactとvanilla JavaScript向けのnpmパッケージを提供
• 03Paper上で視覚的にデザインし、コードとしてエクスポート
• 04色、歪み、渦巻き、速度、スケールをカスタマイズ可能
• 05アニメーションは任意

ユースケース

• マーケティングサイトにアニメーション付きのグラデーション背景を追加
• シェーダーテクスチャで図形やテキストをマスク
• Paperでビジュアルスタイルを試作し、コードとして実装

クイックスタート

1. 1

   React パッケージをインストールします

   npm i @paper-design/shaders-react
2. 2

   または vanilla JS パッケージをインストールします

   npm i @paper-design/shaders
3. 3

   0.0.x のバージョニングでは破壊的変更がリリースされるため、依存関係のバージョンを固定します

4. 4

   MeshGradient などのシェーダーコンポーネントをインポートし、colors と style props を指定して使用します

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

• !プロジェクトは 0.0.x のバージョニングを採用しているため、リリース間で破壊的変更が入る場合があります。バージョンを固定してください。
• !サポート対象は React と vanilla JS のみです。Vue はまだサポートされていません。

トピック

よくある質問

shaders とは？

Webサイトの背景やテクスチャに使える、依存関係ゼロのWebGL風Canvasシェーダー。npm経由（Reactまたはvanilla JS）で利用するか、Paper上で視覚的にデザインできます。 Paper Shadersは、グラデーション背景などのアニメーションまたは静的なテクスチャをWebサイトに追加したり、シェーダー効果で図形やテキストをマスクしたりできる、Canvasベースのシェーダーコンポーネント集です。npmパッケージとして、vanilla JavaScript向けの@paper-design/shadersとReact向けの@paper-design/shaders-reactの2種類が提供されており、実行時の依存関係はありません。

shaders は無料で使えますか？ライセンスは？

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

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

活発にメンテナンス中。shaders の最終コミットは 2026年11月5日 です。

shaders は何に使えますか？

マーケティングサイトにアニメーション付きのグラデーション背景を追加 シェーダーテクスチャで図形やテキストをマスク Paperでビジュアルスタイルを試作し、コードとして実装

shaders のインストール方法は？

React パッケージをインストールします: npm i @paper-design/shaders-react または vanilla JS パッケージをインストールします: npm i @paper-design/shaders 0.0.x のバージョニングでは破壊的変更がリリースされるため、依存関係のバージョンを固定します MeshGradient などのシェーダーコンポーネントをインポートし、colors と style props を指定して使用します

shaders はどこで入手できますか？

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