64 対応の React UI エフェクト。 ソースコードのデリバリーは、npmの依存関係ではありません。

ライブデモ&プレイグラウンド

使い方

あなたが望むものを記述します。 AIは効果を拾い、ソースコードをつかみ、プロジェクトに配線します。 実行時間に依存しないコードを所有しています。

セットアップ(1回)

Claude コード MCP 設定 (~/.claude.json]) または [.mcp.json] に追加します。

希望するAIに伝える

特定の効果:

注意:

制約あり:

注文の効果を構成して下さい:

###AIが舞台裏で何をしているのか

1つのプロンプト、1往復、完全なソースコード。

##AIツールリファレンス

MCP サーバーは 16 個のツールを公開しています。 それらを直接呼び出す必要はありません。AIは、あなたのプロンプトに基づいて正しいものを選びます。 しかし、利用可能なものを知ることは、より良いプロンプトを書くのに役立ちます。

| ツール | どのようなAIが使うのか | お問い合わせ | [find_effects | インテント+ターゲット(['button emphasis']]、['background ambient'])によるフィルタ、Mobile safe、performance cost。 各試合の使用法 tip を返す | |【[[T5]】 | ワンコールでエフェクト+全てのホック/CSS/プリセットの依存性をゲット | | [suggest_combination | 意図を記述する → ソースコードとホックの組み合わせを得る |

ui-fx-kit

64 composable React UI effects. Source code delivery, not npm dependency.

Live Demo & Playground · 中文文档

How It Works

You describe what you want. AI picks the effect, grabs the source code, and wires it into your project. You own the code — no runtime dependency.

Setup (one time)

Add to your Claude Code MCP settings (~/.claude.json or project .mcp.json):

{
  "mcpServers": {
    "ui-fx-kit": {
      "command": "node",
      "args": ["/path/to/ui-fx-kit/mcp-server.js"]
    }
  }
}

Tell AI What You Want

Specific effects:

"Add a starfield background to my hero section, use neon palette"
"Add a holographic card effect to the pricing section"
"I need a typewriter effect on the homepage title"

By intent:

"I need a subtle background effect for a SaaS dashboard — low performance, mobile safe"
"Add something to emphasize the pricing card, but keep it classy"
"I need loading state feedback while content fetches"

With constraints:

"Add a background effect — must be mobile safe, low performance, no WebGL"
"I need a cursor effect that works on touch devices"
"Add some texture to my cards, keep it simple, CSS only"

Compose custom effects:

"Combine useCanvasSetup + useParticles + useMousePosition into a cursor particle trail"
"Combine spring physics with 3D tilt for a card interaction"

What AI Does Behind the Scenes

Your prompt
  → find_effects (structured filtering by category/performance/mobile)
  → get_effect_bundle (source code + all dependencies in one call)
  → writes files into your project

One prompt, one round trip, complete source code.

AI Tool Reference

The MCP server exposes 16 tools. You don’t need to call them directly — AI picks the right one based on your prompt. But knowing what’s available helps you write better prompts.