64 composable React UI 효과. 소스 코드 배달, npm 의존하지.

라이브 데모 및 놀이터 · 中文文更

그것이 작동하는 방법

당신이 원하는 것을 설명합니다. AI는 효력을, 움켜잡습니다 소스 부호를, 및 당신의 프로젝트로 철사. 코드가 없습니다. 런타임 의존도 없습니다.

설정 (1 시간)

Claude Code MCP 설정에 추가 (~/.claude.json 또는 프로젝트 .mcp.json):

당신이 원하는 AI를 말하십시오

** 특정 효과: **

** 의도:**

변환:

** 맞춤 효과: **

무엇 AI는 장면 뒤에

1개의 신속한, 1개의 둥근 여행, 완전한 근원 부호.

AI 도구 참조

MCP 서버는 16개의 도구를 노출합니다. 직접 전화 할 필요가 없습니다. - AI는 당신의 프롬프트를 기반으로 한 올바른 것을 선택합니다. 그러나 당신이 더 나은 프롬프트를 작성하는 데 도움이되는 것을 알고.

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.