ruucm/shadergradient

これは何？

主な機能

• 01plane、sphere、waterPlaneの各メッシュで、アニメーションする3Dグラデーションを描画できます。
• 02propsから色、アニメーション速度、歪みの強度、頻度を設定できます。
• 03オンラインカスタマイザーからコピーしたURLを使って設定を読み込めます。
• 04@shadergradient/vueを通じて、SSRに対応した安全なcanvasでVue 3とNuxtをサポートします。
• 05デザインツールで使えるFigmaプラグインとFramerコンポーネントを提供します。

ユースケース

• ReactまたはNext.jsのランディングページに、アニメーションするグラデーションのヒーロー背景を追加する。
• Webサイトで作成したグラデーションをVueまたはNuxtアプリで再利用する。
• FigmaまたはFramerのデザインでグラデーションのビジュアルを作成する。

クイックスタート

1. 1

   React renderer とその peer dependencies をインストールします

   npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
2. 2

   Three.js の型定義をインストールします

   npm i -D @types/three
3. 3

   README の使用例に示されているように、アプリ内で ShaderGradientCanvas の中に ShaderGradient をレンダリングします

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

• !プロジェクトにライセンスが明記されていないため、再利用の権利が不明確です。
• !Next.js 15 の App Router では React 19 と @react-three/fiber v9 が必要です。v8 は互換性がありません。

トピック

よくある質問

shadergradient とは？

Three.jsとReact Three Fiberを基盤にした、React向けのカスタマイズ可能な3Dアニメーショングラデーションレンダラー。Vue、Framer、Figma版も用意されています。 Shader Gradientは、アニメーションする3Dグラデーション背景を描画するためのコンポーネント群です。中核となるパッケージの@shadergradient/reactは、React Three FiberとThree.jsを基盤とするShaderGradientレンダラーとShaderGradientCanvasラッパーを提供します。グラデーションの見た目は、メッシュタイプ（plane、sphere、waterPlane）、色、アニメーション速度、強度、頻度、ライティング、カメラ設定などのpropsで調整できます。

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

shadergradient にはライセンスが明記されていません。コードは公開されていますが、ライセンスがない場合は再利用の許諾がないため、利用前に作者に確認することをおすすめします。

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

半年以内に更新あり。shadergradient の最終コミットは 2026年9月23日 です。

shadergradient は何に使えますか？

ReactまたはNext.jsのランディングページに、アニメーションするグラデーションのヒーロー背景を追加する。 Webサイトで作成したグラデーションをVueまたはNuxtアプリで再利用する。 FigmaまたはFramerのデザインでグラデーションのビジュアルを作成する。

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

React renderer とその peer dependencies をインストールします: npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls Three.js の型定義をインストールします: npm i -D @types/three README の使用例に示されているように、アプリ内で ShaderGradientCanvas の中に ShaderGradient をレンダリングします

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

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