React, Vue, Svelte, Solid, JavaScript、Framer向けShaders WebGPUコンポーネント

Shaders WebGPU エフェクトを React, Vue, Svelte, Solid および JavaScript のコンポーネントとして npm install shaders 目次 なぜShadersなのか？ 🧩 コンポーネント 🎨 デザインビジュアル、コードエクスポート ⌨️ CLI 🤖 AIとのShaders連携 ⚡️ Shaders Pro 🧪 独自のコンポーネントを構築 👩🏻‍⚖️ ライセンス 💎 貢献 なぜShadersなのか？ リアルなWebGPU、宣言型API: コンポーネントとして組み込める200以上のエフェクト。グラデーション、ノイズ、ガラス、メタル、ライト、歪み、トランジション、ぼかし、カーソルエフェクトなど。これらをネストしたり、ブレンドしたり、マスクしたりできます。 コードを生成するデザインエディタ: shaders.comで無限キャンバス上でデザインし、フレームワーク用の正確なコンポーネントツリーをエクスポートできます。無料です。 すべてのフレームワーク、1つのパッケージ: React, Vue, Svelte, Solid, JavaScript向けにファーストクラスのエントリを提供し、どこでも同じプロップを使用できます。 本番環境対応: TypeScript、高度に最適化され、リアクティブな更新を伴う型付きプロップ、SSRセーフです。16,000人以上のデザインエンジニアが数千のウェブサイトで使用しています。 🧩 コンポーネント すべてのエフェクトがコンポーネントです。<Shader>はキャンバスをレンダリングし、その子要素はレイヤーとして、上から下へ評価され、GPU上でブレンドされます。 React import { Shader, LinearGradient, CursorTrail } from 'shaders/react' <Shader className="w-full h-64"> <LinearGradient colorA="#0f172a" colorB="#7c3aed" /> <CursorTrail /> </Shader> React向けShadersの始め方。 Vue <script setup> import { Shader, LinearGradient, CursorTrail } from 'shaders/vue' </script> <template> <Shader class="w-full h-64"> <LinearGradient colorA="#0f172a" colorB="#7c3aed" /> <CursorTrail /> </Shader> </template> Vue向けShadersの始め方。 Svelte <script> import { Shader, LinearGradient, CursorTrail } from 'shaders/svelte' </script> <Shader class="w-full h-64"> <LinearGradient colorA="#0f172a" colorB="#7c3aed" /> <CursorTrail /> </Shader> Svelte向けShadersの始め方。 Solid import { Shader, LinearGradient, CursorTrail } from 'shaders/solid' <Shader class="w-full h-64"> <LinearGradient colorA="#0f172a" colorB="#7c3aed" /> <CursorTrail /> </Shader> Solid向けShadersの始め方。 JavaScript import { createShader } from 'shaders/js' await createShader(document.getElementById('my-shader'), { components: [ { type: 'LinearGradient', props: { colorA: '#0f172a', colorB: '#7c3aed' }, }, { type: 'CursorTrail', }, ], }) JavaScript向けShadersの始め方。 ライブプレビューとすべてのプロップがドキュメント化された200以上のコンポーネントをすべて閲覧してください。 🎨 デザインビジュアル、コードエクスポート ほとんどの人は手書きでエフェクトを作成しません。デザインします。shaders.comのデザインエディタは、コンポーネントをスタックし、リアルなコントロールで各プロップを調整し、カーソルやタイムラインからプロップを駆動し、結果をライブで確認できる無限キャンバスです。見た目が良くなったら、「コードのエクスポート」でフレームワークのコンポーネントツリーを取得し、貼り付ける準備ができます。デザインとエクスポートはアカウントがあれば無料です。作業はプロジェクトとして保存され、後で戻ることができます。デザインエディタを開く ⌨️ CLI CLIはコードベースをShadersアカウントに接続するため、デザインしたエフェクトがプロジェクトに実際のコンポーネントファイルとして配置され、同期された状態を保ちます。 npx shaders connect # このコードベースをShadersプロジェクトにリンクする npx shaders install # そのプロジェクトからShadersを選択し、コンポーネントファイルを書き込む npx shaders update # エディタで変更したものをプルする フレームワークを検出し、コンポーネントフォルダに書き込み、インストールしたものをロックファイルに記録します。グローバルにインストールする必要はありません。CLIガイドを読む。 🤖 AIとのShaders連携 コーディングエージェントにあなたと同じツールを与えましょう: MCPサーバー: npx shaders@latest install-mcp Claude Code, Cursor, Codex, Windsurf, Copilotなどを設定します。エージェントはデザインしたShadersを見つけ、インストールし、編集できます。無料アカウントを含む、すべてのアカウントで動作します。MCPガイド。 llms.txt: shaders.com/llms.txt はすべてのドキュメントページをインデックス化し、shaders.com/llms-full.txt はプロップ、デフォルト、範囲を含む完全なコンポーネントリファレンスを提供します。 ⚡️ Shaders Pro 上記すべては無料です。Proはライブラリとそのワークフローを追加します: コレクションに整理された1,000以上の本番環境対応プリセット すぐに組み込める55以上のウェブサイトセクション ウォーターマークなしのHDビデオおよび画像レンダリング Framerプラグインによるワンクリックインストール エディタでの無制限のバージョン履歴 CLIおよびMCP経由のProプリセット 限定Discordロールとチャンネル、優先サポート、すべての将来のアップデート 価格を見る 🧪 独自のコンポーネントを構築 全く新しいコンポーネントが必要な場合は、自分で作成できます。コンポーネントは、defineShaderに渡されるプレーンなオブジェクトです: 名前、プロップ、そして各ピクセルに描画するもの。<CustomShader>で他のコンポーネントと同様にマウントします。 import { defineShader, wgsl, transformColor, transformPosition } from 'shaders/std' export const Halo = defineShader({ name: 'Halo', props: { color: { default: '#ffd166', transform: transformColor }, center: { default: { x: 0.5, y: 0.5 }, transform: transformPosition }, radius: { default: 0.6 }, }, paint: wgsl` let d = length((uv - center) * vec2f(aspect, 1.0)) / radius; return vec4f(color.rgb, 1.0 - smoothstep(0.8, 1.0, d)); `, }) ガイドでは、ピクセル部分を記述する2つの方法（stdプリミティブからの合成（実験的）またはWGSLの直接記述（安定））をカバーしています。カスタムコンポーネント · プリミティブリファレンス 👩🏻‍⚖️ ライセンス このリポジトリとshaders npmパッケージのエンジン、すべてのコンポーネント、フレームワークバインディングはMITライセンスです。shaders.comのデザインエディタ、プリセット、セクション、その他のプラットフォーム機能は、このパッケージとは別であり、独自の利用規約があります。 💎 貢献 Issueとプルリクエストを歓迎します。開始する前に貢献ガイドを確認し、バグ修正以上のものについては、PRの前にIssueを開いて議論してください。エンジンはpackages/coreにあり、src/shaders/の下に各コンポーネントのフォルダがあります。フレームワークパッケージはそこから生成されます。 pnpm install pnpm lib:build # すべてのパッケージをビルドする（レジストリとフレームワークコンポーネントを再生成） pnpm test # エンジンのテストスイート Discordで挨拶してください。 Shaders © Shader Effects, Inc.