shaders

Shaders

Shaders は WebGPU コンポーネントライブラリです。shaders という 1 つのパッケージに、Figma のレイヤーのように組み合わせられるコンポーネントが含まれています。以下はすべて無料で、MIT ライセンスです。Pro が適用されるものには、その旨が記されています。

プロジェクトのセットアップ

シェーダーコードを書く前に、ユーザーのプロジェクト内で CLI を実行します。

npx shaders connect

フレームワークを検出し、プロジェクトのパッケージマネージャーを使って shaders をインストールし、shaders.config.ts を書き込み、ブラウザーを通じてユーザーをサインインさせ、コードベースを Shaders プロジェクト（デザインエディターのキャンバス）に接続し、このスキルをインストールします。必ずこのような明示的なサブコマンドを使用してください。引数なしの npx shaders は、人間向けの対話型メニューです。CI 環境やブラウザーを使えない場合は、個人用 API キーを SHADERS_API_KEY に設定します。--no-auth はサインインを省略し、--yes はすべてのプロンプトを省略します。

接続後は、次の 3 つのコマンドでワークフローを進められます。

npx shaders install              # pick shaders from the connected project; writes component files
npx shaders search "<look>"      # search the preset library by describing the look (free, no sign-in)
npx shaders preview offsets-1    # open a preset on shaders.com so the user can see it running
npx shaders install offsets-1    # a preset from the library, by name (Pro)
npx shaders update               # pull in what the user changed in the design editor
npx shaders open                 # open the connected project in the design editor

インストールするたびに、コンポーネントツリー全体とすべてのプロパティがインラインで記述されたコンポーネントファイルが 1 つ、outDir に書き込まれます（shaders.lock.json に記録されます）。通常のソースコードとして扱い、プロパティを編集したり、状態にバインドしたり、ほかのエフェクトと組み合わせたりできます。update は --force が渡されない限り、ローカルで編集されたファイルを変更しません。

ユーザーがエフェクトを求めている場合：

1. 1 つか 2 つのコンポーネントで実現できる場合（カーソルトレイル付きのグラデーション、ぼかした画像、ロゴに重ねるガラス効果、テキストの背後のノイズなど）は、以下のコンポーネントを手動で組み合わせます。まずはこちらを試してください。
2. それ以外の場合はプリセットライブラリを検索します： npx shaders search "liquid chrome hero background" --json。検索結果には名前、説明、一致スコア、ページ URL が含まれます。npx shaders preview <name> を実行してユーザーに候補の動作を見てもらい（shaders.com が開きます）、その後 npx shaders install <name> でインストールします（Pro。詳細は以下を参照）。
3. ユーザーがエディターですでにデザインを作成している場合： npx shaders install を実行して選択します。

MCP サーバー（npx shaders install-mcp）を使うと、プリセットの検索、シェーダーのプロパティの読み取り、SVG からの SDF ファイルの生成を行うツールを利用できます。インストールされている場合は使用してください。

エフェクトの構成

<Shader> は <canvas> を1つレンダリングします。その中のコンポーネントはレイヤーで、順番に描画されます。最初の子が一番下、最後の子が一番上です。

import { Shader, LinearGradient, CursorTrail } from 'shaders/react'

<Shader className="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" angle={45} colorSpace="oklch" />
  <CursorTrail />
</Shader>

すべてのコンポーネントに共通するルールは次のとおりです。

• <Shader> に CSS を指定してキャンバスのサイズを設定します（class、className または style）。キャンバス自体にはサイズがなく、コンテナに合わせてサイズが変わります。内側の <canvas> にはスタイルを設定しないでください。
• エフェクトは、その前に描画されたものに適用されます。 画像を変換するコンポーネント（ぼかし、歪み、調整、スタイライズ、形状エフェクト、トランジション）はエフェクトです。兄弟要素として配置すると、ツリー内でその上にあるすべてのレイヤーに適用されるため、画像、次に Blur、次に Vignette というフラットなスタックが基本です。エフェクトをレイヤー内にネストするのは、そのレイヤーだけに適用し、ほかには適用しない場合に限ります（背後の渦巻きは動かさず、1つのグリッドだけに波紋をかける場合など）。エフェクトは components.md で「入力が必要」と記されています。適用するには、その前に何かが描画されているか、エフェクト内に何かがネストされている必要があります。ジェネレーター（テクスチャ、形状）は単独で描画します。
• すべてのコンポーネントで共通のプロパティ： blendMode（normal、multiply、screen、overlay、softLight、hardLight、linearDodge、linearBurn、colorDodge、colorBurn、darken、lighten、difference、exclusion、hue、saturation、color、luminosity）、opacity（0～1）、visible、maskSource + maskType、boundingBox、absolute。
• マスキング： マスクレイヤーに id を設定し、そのレイヤーの visible={false} を設定します。マスクを適用するレイヤーには maskSource="thatId" を設定します。非表示のレイヤーもツリー内に存在するため、マスクとして機能します。
• 配置： boundingBox={{ x: { unit: 'px', value: 24 }, y: { unit: 'uv', value: 0.1 }, width: ..., height: ..., origin: 'top-left', rotation: 15 }}。uv はキャンバスに対する0～1の割合、px は CSS ピクセルで、サイズ変更後も維持されます。
• Group はコンテナです。その flow プロパティ（{ mode: 'column' | 'row', gap, align }）は、子要素をフレックスボックスのように積み重ねます。
• 色のプロパティには CSS の16進数文字列を指定します。colorSpace プロパティを持つコンポーネントは、linear、oklch、oklab、hsl、hsv または lch でブレンドします。oklab と oklch は、グラデーションの中間色を明るく保ちます。

動的プロパティ

数値または {x, y} の値の代わりに、type を含むオブジェクトを渡します。アニメーションコードは不要です。

<Circle radius={{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6, speed: 1 }} />
<Circle center={{ type: 'mouse-position', smoothing: 0.12, momentum: 0.2 }} />
<Blur intensity={{ type: 'mouse', axis: 'x', outputMin: 0, outputMax: 40, smoothing: 0.1 }} />
<LinearGradient id="grad" colorA="#000000" colorB="#ffffff" />
<Circle radius={{ type: 'map', source: 'grad', channel: 'luminance', inputMin: 0, inputMax: 1, outputMin: 0.02, outputMax: 0.12 }} />

mouse-position は、任意の {x, y} プロパティ（center、position、offset）を動かします。mouse はカーソルの一方の軸を数値に割り当てます。map は id で別のレイヤーを読み取ります。フレームワークの状態はどのプロパティにも使え、再コンパイルせずに次のフレームで更新されます。

フレームワークの慣例

フレームワーク	インポート	備考
React	shaders/react	className を使用します。<Shader> をレンダリングする Next.js ファイルには 'use client' を追加します
Vue	shaders/vue	属性にはケバブケースを使用し、文字列以外には : を付けます（:angle="45"）。Nuxt では <ClientOnly> で囲みます
Svelte	shaders/svelte	通常のプロパティを使用します。SvelteKit では追加設定は不要で、<Shader> はサーバー上では何もレンダリングしません
Solid	shaders/solid	アクセサーの値を渡します（angle={angle()}）。SolidStart では clientOnly を使って読み込みます
Vanilla	shaders/js	createShader(canvas, { components: [{ type: 'Circle', props: {...}, children: [] }] })

Shaders には WebGPU に対応したブラウザーが必要です。サーバー上ではレンダリングできないため、メタフレームワークでは <Shader> をクライアント専用にしてください。

レシピ

よくあるリクエストの大半に対応する4つのツリーです。プロパティは実際に機能します。構造はそのままに、値を変更してください。

ヒーロー背景。 ジェネレーターを兄弟要素として重ね、低い不透明度のノイズで粒子感を加え、軌跡を一番上に配置します。

<Shader className="absolute inset-0 -z-10">
  <MeshGradient colorA="#1a0533" colorB="#ffdf8e" colorSpace="oklab" speed={0.6} />
  <SimplexNoise scale={3} speed={0.5} opacity={0.12} blendMode="softLight" />
  <CursorTrail colorA="#ffffff" colorB="#e04b9e" radius={0.3} length={0.4} opacity={0.5} blendMode="screen" />
</Shader>

ロゴに重ねるガラス。 Glass は画像の後に配置するため、それより前に描画されたすべてのものを屈折させます。形状にはカーソルを追従する円形 SDF を使います。

<Shader className="w-full h-96">
  <ImageTexture url="/logo.png" objectFit="contain" />
  <Glass
    shape={{ type: 'circleSDF', radius: 0.35 }}
    center={{ type: 'mouse-position', smoothing: 0.15, momentum: 0.2 }}
    refraction={1.3}
    thickness={0.6}
    aberration={0.4}
    fresnel={0.25}
  />
</Shader>

テキストの背後にあるぼかした画像。 画像、次に Blur、次に Vignette というフラットなスタックで、それぞれが上にあるものに適用されます。テキストはコンポーネントではなく、CSS でキャンバスの上に重ねた通常の HTML です。

<div className="relative">
  <Shader className="absolute inset-0 -z-10">
    <ImageTexture url="/hero.jpg" objectFit="cover" />
    <Blur intensity={60} />
    <Vignette intensity={0.8} radius={0.6} />
  </Shader>
  <h1 className="relative">Headline</h1>
</div>

マスクを使った表示。 円を非表示にして、グラデーションの形状だけを決めます。radius をアニメーションさせて表示します。

<Shader className="w-full h-64">
  <Circle id="reveal" visible={false} radius={{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.1, outputMax: 0.9, speed: 0.5 }} softness={0.2} />
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" angle={45} colorSpace="oklch" maskSource="reveal" />
</Shader>

コンポーネントの選択

カテゴリ別の200種類のコンポーネント：

• テクスチャ（55）：Aurora、Beam、Blob、BlockNoise、BlueNoise、BrickPattern、Checkerboard、Chevron、ColorWheel、ConicGradient、CurlNoise、DiamondGradient、DotGrid、ErosionNoise、FallingLines、FloatingParticles、FlowingGradient、FractalNoise、GaborNoise、Godrays、Grid、HexGrid、HTMLInCanvas、ImageTexture、IsometricCubes、LinearGradient、Marble、MeshGradient、MultiPointGradient、PerlinNoise、Plasma、Prism、RadialGradient、Ripples、Satin、Scratches、SimplexNoise、SineWave、SolidColor、Spiral、Strands、Stripes、StudioBackground、SunBurst、Swirl、Text、TriangularGrid、Truchet、VideoTexture、Voronoi、Waveform、WaveletNoise、Weave、WebcamTexture、WorleyNoise
• 図形（16）：Arc、Circle、Crescent、Cross、Ellipse、Flower、Heart、Line、Parallelogram、Polygon、Ring、RoundedRect、Star、Teardrop、Trapezoid、Vesica
• 図形エフェクト（23）：BrushedMetal、CarbonFiber、Chrome、Crystal、Emboss、Frost、Glass、Goo、Heatmap、Hologram、Holographic、Irradiance、LightEdge、LiquidMetal、Nebula、Neon、Obsidian、Particles、Plastic、SmokeFill、ThinFilm、Voxels、Water
• ぼかし（9）：AngularBlur、Blur、BokehBlur、ChannelBlur、DiffuseBlur、LinearBlur、ProgressiveBlur、TiltShift、ZoomBlur
• 歪み（22）：BarShift、Bend、Bulge、ConcentricSpin、CornerPin、DisplacementMap、Flip、FlowField、FlutedGlass、Form3D、GlassTiles、Kaleidoscope、Mirror、Perspective、PolarCoordinates、RectangularCoordinates、Repeater、Spherize、Stretch、Surface3D、Twirl、WaveDistortion
• 調整（14）：BrightnessContrast、Duotone、Exposure、FilmStock、Grayscale、HueShift、Invert、Posterize、Saturation、Sharpness、Solarize、Tint、Tritone、Vibrance
• スタイル化（31）：Ascii、Chalkboard、ChromaticAberration、CompressionArtifacts、ContourLines、CRTScreen、DataMosh、Dither、DropShadow、Engraving、FilmGrain、Glitch、Glow、GradientMap、Halftone、KeyFrames、LensDistortion、LensFlare、LightLeak、ObjectTracker、Paper、ParticleField、Pixelate、ReflectivePlane、Sparkle、Stone、TimeTrail、VHS、Vignette、Watercolor、Wool
• インタラクティブ（16）：Boids、ChromaFlow、CursorRipples、CursorTrail、Fog、GridDistortion、InkFlow、Liquify、MagneticFilings、ParticleFlow、PixelSort、PixelThrow、ReactionDiffusion、Shatter、Smoke、SmokeFlow
• トランジション（13）：BarnDoors、BlockDissolve、CheckerWipe、DiamondWipe、IrisWipe、LinearWipe、NoiseDissolve、PagePeel、RadialWipe、RandomBars、RippleWipe、SliceWipe、VenetianBlinds
• ユーティリティ（1）：Group

このファイルと同じ場所にあるcomponents.mdには、すべてのコンポーネントの1行説明と、入力が必要なエフェクトのマークが記載されています。コンポーネントの正確なprops、デフォルト値、範囲を確認するには、Accept: text/markdownヘッダーを付けてドキュメントページを取得してください。

https://shaders.com/docs/components/<Name>

リファレンス全体をまとめたファイルは https://shaders.com/llms-full.txt にあります（大容量）。ガイドは https://shaders.com/docs/guide にあります（合成、ブレンドとマスキング、動的props、レイアウト、変換、図形エフェクト、パフォーマンス）。

図形エフェクト（Glass、Neon、Chrome、LiquidMetal、Frostなど）は、shape propの内側に描画します。たとえば、{ type: 'circleSDF', radius: 0.5 }のような2D SDFや、roundedRectSDF、starSDF、polygonSDF、{ type: 'sphere3D' }のような3Dソリッド、cube3D、torus3D、またはユーザー独自のSVGをSDFファイルに変換したものを指定できます（MCPのgenerate-sdfツールで変換できます）。詳しくは https://shaders.com/docs/guide/shape-effects を参照してください。

プリセットとセクション（Shaders Pro）

https://shaders.com/presets のプリセットライブラリには、コレクション内のデザイン済みエフェクトが千種類以上あり、Webサイトのセクション一式もそろっています。各プリセットのページには、名前（コレクションのスラッグとバリエーション番号を組み合わせたもの。例：offsets-1）、ライブレンダー、コードが表示されます。インストールするには、サインイン中のアカウントに Shaders Pro のサブスクリプションが必要です。

npx shaders install offsets-1

Pro でない場合、CLI はその旨を伝え、料金ページを開く、別のアカウントでサインインする、またはウォーターマーク付きのプレビューコンポーネントをインストールしてプリセットを実際に表示するといった選択肢を提示します。アカウントに Pro が適用されたら、npx shaders update を実行すると、プレビューが本物のコンポーネントに置き換わります。これを回避しようとしないでください。プリセットは Pro が必要だとユーザーに伝え、評価したい場合はプレビューをインストールして、その先に進んでください。

見た目の再現にコンポーネントがいくつも必要になる場合は、一から作る前にライブラリを検索してください。プリセットはデザインされ、調整済みのツリーです。適したものがあれば、そのことを伝え、名前を挙げてください。

存在しないコンポーネントを作成する

見た目を再現できるコンポーネントやプリセットがない場合は、自分で作成します。コンポーネントは、shaders/std の defineShader に渡すプレーンオブジェクトです。名前、props、そして各ピクセルに描画する内容で構成され、ライブラリと同じプリミティブを使うか、WGSL の本体を直接記述します。どのフレームワークでも <CustomShader src={MyShader}> でマウントでき、ビルド手順は不要です。まず https://shaders.com/docs/guide/custom-shaders を読み、次にプリミティブのリファレンス（https://shaders.com/docs/primitives、または1つのドキュメントにまとまった https://shaders.com/std/llms.txt）を確認してください。

エフェクトを高速に保つ

• 背景はジェネレーター（グラデーション、ノイズ、プラズマ）で作成してください。コストはほとんどかかりません。
• エフェクトは兄弟要素としてフラットに重ねてください。ネストするとレベルごとにレンダリングパスが追加されます。また、兄弟要素のエフェクトは、それ以前に描画されたものすべてをすでに覆います。
• レイヤーを非表示にするには opacity={0} ではなく visible={false} を使ってください。非表示のレイヤーにはコストがかかりませんが、透明なレイヤーは引き続きレンダリングされます。
• 実行時の props をアニメーションさせてください。一部の props はコンパイル時に適用され（コンポーネントのページに記載されています）、変更するとエフェクトが再コンパイルされます。
• オフスクリーンキャンバスは単独で約1fpsまで低下します。対処方法はありません。

してはいけないこと

• コンポーネントで実現できるエフェクトのために three、@react-three/fiber、ogl をインストールしたり、生の WebGL を記述したりしないでください。
• prop の名前を推測しないでください。components.md を確認し、次にコンポーネントのドキュメントページを確認してください。
• 兄弟要素を重ねれば同じ結果になるエフェクトの中に、レイヤーをネストしないでください。特定のレイヤーだけにエフェクトを適用する場合に限り、ネストしてください。
• 内側の <canvas> にスタイルを適用したり、クエリしたりしないでください。マークアップはリリースごとに変わる可能性があります。