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.

Prompt Tips

Avoid vague prompts like "add some effects" or "use ui-fx-kit" — AI needs to know what kind of effect and where.

Color Palettes

13 curated palettes. Pass palette="name" to any effect that supports it:

default · neon · pastel · warm · arctic · mono · stripe · vercel · linear · supabase · figma · discord · spotify

When using multiple effects on one page, use the same palette for visual consistency.

Also Works Without AI

CLI

npx ui-fx-kit add holographic-card --target ./src
npx ui-fx-kit add gradient-mesh silk-waves --target ./src
npx ui-fx-kit add holographic-card --target ./src --force  # re-install latest version
npx ui-fx-kit status --target ./src                        # check for updates
npx ui-fx-kit list background
npx ui-fx-kit info silk-waves

Playground

Every effect on the demo site has a Playground panel — tune props in real-time, then copy the CLI command with your settings.

Manual copy

cp -r ui-fx-kit/effects/holographic-card/ your-project/src/effects/

What's Inside

Effects are built from hooks. Hooks are composable. AI knows which hooks combine well via the combinesWith graph.

Architecture

effects/      → React components (source code, not compiled)
hooks/        → Composable React hooks
css/          → Standalone CSS classes
presets/      → Color palettes + spring configs
bin/          → CLI tool
mcp-server.js → AI tool interface (16 tools)

Source code delivery: the CLI and MCP server copy files into your project. You own and can modify everything.

License

MIT