64 Composable React UI Effects With MCP and CLI – ui-fx-kit

Description:

ui-fx-kit is a React UI effects library that delivers 64 animated components, including spans backgrounds, text animations, card interactions, cursor behaviors, WebGL shaders, and interactive elements.

Features

• 64 React Effect Components
• 19 Composable Hooks
• 13 CSS Drop-in Classes
• 13 Curated Color Palettes
• MCP Server with 16 Tools
• CLI Tool
• Performance Budget Checker

How to Use It

Method 1: AI-Driven Setup via MCP

The MCP server connects ui-fx-kit to Claude Code. Configure it once, then describe effects in plain language. The AI calls the appropriate tools and writes the files.

Configure the MCP Server

Add the following block to your Claude Code MCP settings. Use ~/.claude.json for a global configuration or .mcp.json at the project root for project-scoped access.

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

Replace /path/to/ui-fx-kit/mcp-server.js with the absolute path to the cloned repository on your machine.

Write Prompts in Claude Code

Open Claude Code and describe the effect you want. The AI selects the relevant MCP tools, retrieves source code, and writes the files into your project.

Targeting a specific effect:

"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"

Adding device or performance 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"

Composing custom effects from hooks:

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

Modify the Installed Files

The AI writes React source files into your src/ directory. Open the installed components and adjust props, animation values, or logic as needed. No compiled output exists to reverse-engineer.

Method 2: CLI

Add a single effect:

npx ui-fx-kit add holographic-card --target ./src

Add multiple effects in one command:

npx ui-fx-kit add gradient-mesh silk-waves --target ./src

Re-install an effect at its latest version:

npx ui-fx-kit add holographic-card --target ./src --force

Check installed effects for available updates:

npx ui-fx-kit status --target ./src

List effects by category:

npx ui-fx-kit list background

Inspect an effect before installing:

npx ui-fx-kit info silk-waves

Method 3: Manual File Copy

Clone the repository and copy the effect directory directly:

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

After copying, check the effect’s import statements for referenced hooks. Copy any required hooks from the hooks/ directory into the same target location.

Using Color Palettes

Pass the palette prop by name to any compatible effect:

<GradientMesh palette="neon" />
<HolographicCard palette="vercel" />
<StarfieldWarp palette="arctic" />

Available palette names: default, neon, pastel, warm, arctic, mono, stripe, vercel, linear, supabase, figma, discord, spotify.

When multiple effects appear on the same page, passing the same palette name to each keeps the visual output consistent.

Composing Hooks Directly

Each hook in the hooks/ directory works as a standalone React hook. Import them directly to build custom animated components:

import { useCanvasSetup } from './hooks/useCanvasSetup';
import { useParticles } from './hooks/useParticles';
import { useMousePosition } from './hooks/useMousePosition';
function CustomCursorTrail() {
  const canvasRef = useCanvasSetup();
  const mouse = useMousePosition();
  useParticles(canvasRef, mouse);
  return <canvas ref={canvasRef} />;
}

Run the MCP list_hooks tool to see the full compatibility graph before combining hooks. The graph documents which combinations the library has verified.

MCP Server Tools

The MCP server exposes 16 tools. Claude Code selects and calls the appropriate tool based on your prompt. Direct calls are not required, but knowing what each tool does helps you write more precise prompts.

CLI Commands

Effect Categories and Library Counts

Complete Effects List

Background: Aurora Background, Constellation, Gradient Mesh, Matrix Rain, Ripple Wave, Starfield Warp, Geometric Morph, Noise Flow Field, Silk Waves, Plasma Shader, Lightning Bolts, Light Rays, Grid Distortion, Liquid Chrome

Text: Typewriter Text, Text Reveal, Scramble Text, Split Flap, Morphing Text, Staggered Chars, Glitch Text, ASCII Text, Text Pressure, Circular Text

Card: Spotlight Cards, Physics Cards, Holographic Card, Flip Card, Stack Swipe, Bento Grid, Parallax Depth Card, Sticker Peel, Reflective Card

Cursor: Cursor Glow, Blob Cursor, Splash Cursor, Pixel Trail, Image Trail, Ghost Cursor

Shader: Liquid Glass, 3D Hero, Metallic Paint, Iridescence, Liquid Ether, Prism Refraction, Metaballs, Noise Grain

Interactive: Magnetic Button, Spotlight Input, Interactive Dot Grid, Scroll Velocity, Particle Text, Dock Magnify, Confetti Burst, Ripple Button, Drag Reorder, Click Spark, Parallax Hero, Horizontal Scroll, Counter Ticker, Circular Gallery, Shimmer Skeleton, Page Transition, Stagger List

Related Resources

• Framer Motion: A React animation library for declarative transitions, layout animations, and gesture-based interactions.
• React Spring: A physics-based animation library for React that drives spring dynamics through hook-level APIs.

FAQs

Q: Does ui-fx-kit remain a runtime dependency after installation?
A: No. The CLI and MCP server copy source files into your project at install time. The installed effects run as local React code.

Q: Can multiple effects share hooks when they appear on the same page?
A: Yes. The get_project_status MCP tool analyzes your installed effects and reports which hooks they share.

Q: What happens when an effect depends on a hook not yet present in the project?
A: The get_effect_bundle tool retrieves the complete dependency tree in a single call, including all required hooks, CSS snippets, and presets. The CLI replicates this behavior automatically during npx ui-fx-kit add.

Q: How do you update an effect after the upstream source changes?
A: Run npx ui-fx-kit status --target ./src to see which installed effects have newer versions. Re-run the add command with the --force flag to overwrite the existing files with the latest source.

Q: Do the CSS snippets depend on React or any hook?
A: No. The 13 CSS classes work as standalone stylesheets. Add the class name to any HTML element or React component and the animation applies.