64 эффекта React UI. Доставка исходного кода, а не зависимость от npm.

Live Demo & Playground (недоступная ссылка)

Как это работает

Вы описываете то, что хотите. ИИ выбирает эффект, захватывает исходный код и подключает его к вашему проекту. У вас есть код — нет зависимости от времени выполнения.

Настройка (один раз)

Добавьте настройки MCP кода Claude ([T0]) или проект ([T1]):

###Расскажите, чего вы хотите

** Специфические эффекты:**

** По намерениям: **

** С ограничениями**

** Составление пользовательских эффектов: **

Что делает ИИ за кулисами

Один быстрый, один круг, полный исходный код.

##Ссылка на инструмент

MCP-сервер содержит 16 инструментов. Вам не нужно звонить им напрямую — ИИ выбирает правильный, основываясь на вашем запросе. Но знание того, что доступно, помогает вам писать лучшие подсказки.

Инструмент Что ИИ использует для этого [скрыто] [скрыто] [скрыто] [скрыто] [скрыто] | find_effects | Фильтр по намерению + цель (например, 'button emphasis', 'background ambient'), mobile safe, performance cost. Возврат использования tip для каждого матча | get_effect_bundle | Получить эффект + все хук/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.