mcpField
S
shadergradient

shadergradient

github.com/masermediagroup-stackデザイン・UI135 回インストール29 週間前に更新
リポジトリ

shadergradient について

shadergradientは、ReactやNext.jsのプロジェクトに`@shadergradient/react`でアニメーション付きグラデーション背景を組み込むスキルです。導入、URLからのプリセット読み込み、配置、パフォーマンス上の注意点を扱います。

主な機能

  1. 01`@shadergradient/react`の統合
  2. 02ReactとNext.jsの設定ガイド
  3. 03設定URLからのプリセット読み込み
  4. 04アニメーションとグラデーションの調整
  5. 05パフォーマンスと動きの確認

活用シーン

  1. 01ヒーロー領域へのアニメーション背景追加
  2. 02ShaderGradient設定URLの適用
  3. 03パフォーマンスを考慮したグラデーション調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/masermediagroup-stack/cursorskills --skill shadergradient

インストール後、Claude Code で/shadergradientを入力して読み込まれたか確認します。

同梱ファイルreference.md

詳細

ShaderGradient の統合

このスキルは、@shadergradient/react を使用して高品質なアニメーション付きグラデーション背景を追加する際に使用します。

使用する場面

  • React または Next.js への ShaderGradient の統合をユーザーが依頼した場合
  • ユーザーがアニメーション付きのグラデーションを使ったヒーローセクションや背景を希望している場合
  • ユーザーが @shadergradient/react または shadergradient.co の設定 URL に言及した場合
  • Three.js を使った、色やアニメーションを調整可能なグラデーションが必要な場合

インストール

必要なランタイムパッケージをインストールします。

npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
npm i -D @types/three

基本的な使い方

ShaderGradientCanvas の内部で ShaderGradient を使用します。

import { ShaderGradient, ShaderGradientCanvas } from "@shadergradient/react";

export function GradientBackground() {
  return (
    <ShaderGradientCanvas style={{ position: "absolute", inset: 0 }} pixelDensity={1.5} fov={45}>
      <ShaderGradient cDistance={3.2} cPolarAngle={125} animate="on" />
    </ShaderGradientCanvas>
  );
}

Next.js のガイダンス

  • グラデーションコンポーネントには、クライアントコンポーネントのラッパー（"use client"）を使用してください
  • 視覚的な背景レイヤーとしてマウントし、コンテンツは位置を指定した前景コンテナ内に配置してください
  • 負荷の高いページでは、pixelDensity を控えめな値（例：1～1.5）に設定してください
  • 同じルートに複数の全画面グラデーションキャンバスを配置しないでください

URL からプリセットを読み込む

ユーザーから設定 URL が提示された場合は、その URL を直接読み込みます。

<ShaderGradientCanvas>
  <ShaderGradient control="query" urlString="https://www.shadergradient.co/customize?...your-settings..." />
</ShaderGradientCanvas>

パフォーマンスチェックリスト

  • レイアウトをデバッグするときは animate="off" から始め、配置が正しくなってから有効にしてください
  • ローエンドのデバイスでは、uStrength、uFrequency、pixelDensity を小さくしてください
  • グラデーションを、負荷の高い再レンダリングツリーから分離してください
  • 強いアニメーションを有効にする前に、視差効果を抑える設定を確認してください

一般的なデフォルト値

  • type：plane
  • lightType：3d
  • animate：on
  • cDistance：3～4
  • cPolarAngle：90～125
  • pixelDensity：1～1.5

参考情報

  • プロパティの詳細とパターンについては、reference.md を参照してください

コメント

Markdown 対応