shader-effects-inc/shaders

これは何？

主な機能

• 01グラデーション、ノイズ、ガラス、トランジションなど、200種類以上のWebGPUエフェクトコンポーネント
• 02React、Vue、Svelte、Solid、JavaScriptで共通のpropsとAPI
• 03フレームワーク用のコンポーネントコードをエクスポートできるビジュアルデザインエディター
• 04ロックファイルで管理しながら、選択したコンポーネントをコードベースに同期するCLI
• 05AIコーディングアシスタント向けのMCPサーバーとagent skill
• 06ピクセル描画用のWGSLコードで定義できるカスタムコンポーネント

ユースケース

• マーケティングサイトやランディングページに、アニメーション付きのグラデーションやガラスの背景を追加する
• ブラウザベースのエディターでビジュアルエフェクトを試作し、ReactやVueのアプリにエクスポートする
• AIコーディングエージェントに、既存プロジェクト内でシェーダーエフェクトを検索・インストールさせる
• SvelteやSolidのフロントエンドで、インタラクティブなカーソルエフェクトやホバーエフェクトを作成する

クイックスタート

1. 1

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

   npm install shaders
2. 2

   使用するフレームワーク（例：React）でShaderとコンポーネントをインポートし、レンダリングします

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

• !Proプリセット、セクション、一部のエディター機能を利用するには、有料のProプランが必要です。
• !デザインエディターとエクスポート機能は、MITライセンスのパッケージとは別のshaders.comアカウントに紐づいています。
• !エフェクトはWebGPUに依存するため、ブラウザーがWebGPUに対応している必要があります。

トピック

よくある質問

shaders とは？

React、Vue、Svelte、Solid、素のJavaScriptで使える、WebGPUシェーダーエフェクトのコンポーネント集。 Shadersは、グラデーション、ノイズ、ガラス、歪み、トランジション、ぼかし、カーソルエフェクトなどのWebGPUビジュアルエフェクトを、各種フレームワークのコンポーネントとして利用できるライブラリです。Shader要素がcanvasを描画し、その子コンポーネントは上から順に重ねられ、GPU上でブレンドされます。React、Vue、Svelte、Solid、バニラJavaScriptのどのエントリーポイントでも、同じpropsを使えます。

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

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

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

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

shaders は何に使えますか？

マーケティングサイトやランディングページに、アニメーション付きのグラデーションやガラスの背景を追加する ブラウザベースのエディターでビジュアルエフェクトを試作し、ReactやVueのアプリにエクスポートする AIコーディングエージェントに、既存プロジェクト内でシェーダーエフェクトを検索・インストールさせる SvelteやSolidのフロントエンドで、インタラクティブなカーソルエフェクトやホバーエフェクトを作成する

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

パッケージをインストールします: npm install shaders 使用するフレームワーク（例：React）でShaderとコンポーネントをインポートし、レンダリングします

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

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