Enchant MCP

Transforms flat, AI-generated UIs into premium animated interfaces — automatically.

One command — "enchant my UI at localhost:3000" — and it:

1. Sees your app — captures a real screenshot via Puppeteer
2. Detects components — classifies every UI section (hero, nav, card, CTA, footer, etc.)
3. Maps opportunities — scores each component against 16 curated animation patterns
4. Proposes enhancements — shows you exactly what it wants to do and why
5. You approve — pick what you like, reject what you don't, request tweaks
6. Implements everything — generates step-by-step code with exact files, dependencies, and integration instructions

The gap between "AI-generated UI" and "premium, hand-crafted interface" is animations. Enchant closes that gap automatically.

Free for all Claude Code users (Pro plan and above). No API keys. No extra costs. Just install and go.

claude mcp add enchant -- npx -y enchant-mcp

---

Quick Start

Install as MCP Server (for Claude Code)

# Add to Claude Code — no API keys needed
claude mcp add enchant -- npx -y enchant-mcp

That's it. Now in any Claude Code conversation:

You: Enchant my UI at http://localhost:3000

Claude Code calls scan_page →
  1. Captures full-page screenshot of your running app
  2. Extracts DOM structure (semantic HTML, class names, positions)
  3. Classifies every component (hero, nav, card grid, CTA, footer...)
  4. Scores each component against 16 animation patterns
  5. Returns screenshot + ranked enhancement proposals

Claude: "I found 8 components. Here's what I recommend:
  1. Hero section → Character Reveal (cinematic letter-by-letter headline)
  2. Background → Aurora (flowing northern lights gradient)
  3. Card grid → Staggered List (cascading reveal on scroll)
  4. Stats section → Number Ticker (count-up animation)
  5. CTA button → Button Press (spring scale on tap)
  Want me to proceed with all 5? Or adjust anything?"

You: Skip the aurora, do the rest

Claude Code calls enchant →
  Generates implementation instructions for each enhancement
  Creates component files, installs dependencies, wires everything up

Install Globally

npm install -g enchant-mcp

---

Tools (3)

Tool	Description
scan_page	The discovery tool. Captures screenshot, extracts DOM, detects components, maps animation opportunities. Returns a screenshot + ranked proposals with confidence scores and human-readable reasons.
enchant	The implementation tool. Takes approved proposals and generates complete implementation instructions: component code, dependency list, file-by-file integration steps, and wrapper strategies.
browse_patterns	The exploration tool. Search and filter the pattern library by name, category, context (hero, nav, card...), or impact level. Great for manual pattern discovery.

---

Pattern Library (16 Patterns)

Every pattern is a self-contained code template — no runtime API calls, no external dependencies beyond the animation engine. Curated from the best of twenty-first.dev, Aceternity UI, Magic UI, and Motion Primitives.

Scroll Animations

Pattern	Description	Engine
Viewport Reveal	Fade + slide elements as they scroll into view	Framer Motion
Parallax Layers	Multi-speed depth scrolling for layered backgrounds	Framer Motion
Scroll Progress	Reading progress bar anchored to scroll position	Framer Motion

Text Animations

Pattern	Description	Engine
Character Reveal	Cinematic letter-by-letter headline animation	Framer Motion
Blur Fade	Text materializes from blur into sharp focus	Framer Motion
Gradient Text	Animated shifting gradient across text (CSS-only)	CSS
Typewriter	Classic typing effect with blinking cursor	Framer Motion
Morphing Text	Word cycling with smooth crossfade transitions	Framer Motion

Hover Effects

Pattern	Description	Engine
3D Card Tilt	Perspective tilt toward cursor with glare overlay	Framer Motion
Magnetic Cursor	Element subtly pulls toward cursor on approach	Framer Motion
Spotlight Glow	Radial glow follows cursor across element surface	CSS + JS

Background Effects

Pattern	Description	Engine
Aurora	Flowing northern lights gradient animation	CSS
Floating Particles	Ambient canvas particle field with gentle drift	Canvas API
Animated Gradient	Slowly shifting background colors (CSS-only)	CSS
Meteors	Diagonal shooting star streaks across the background	CSS

Micro-Interactions

Pattern	Description	Engine
Button Press	Satisfying spring scale on tap/click	Framer Motion
Staggered List	Cascading child reveal with sequential delay	Framer Motion
Number Ticker	Animated count-up for stats and metrics	Framer Motion

---

How Detection Works

Enchant uses a three-stage pipeline to understand your page:

1. Page Scanner

Puppeteer captures a full-page screenshot and runs a DOM extraction script that collects:

• Semantic HTML elements (nav, header, main, footer, section, article)
• Class/ID name matches (hero, card, cta, pricing, testimonial, stat, etc.)
• Large content sections (width > 600px, height > 200px)
• Prominent headings (h1, h2, h3)
• Buttons and CTAs (sized > 80x30px)

2. Component Detector

14 detection rules ordered by confidence (0.95 for semantic HTML down to 0.4 for generic sections):

• Semantic matching — <nav> is a navigation, <footer> is a footer
• Class name heuristics — .hero-section is a hero, .pricing-card is a pricing component
• Text content analysis — buttons containing "Get Started" or "Sign Up" are CTAs
• Positional analysis — first large section is likely the hero
• Child structure — repeated similar children suggest a card grid or list

3. Opportunity Mapper

A context-aware scoring matrix matches each detected component to its best-fit animations:

Hero section     → Character Reveal (0.9), Aurora background (0.8), Blur Fade (0.7)
Card grid        → Staggered List (0.9), 3D Card Tilt (0.8), Viewport Reveal (0.7)
Stats section    → Number Ticker (0.95), Viewport Reveal (0.6)
Navigation       → Magnetic Cursor (0.7)
CTA button       → Button Press (0.9), Spotlight Glow (0.7)
Footer           → Viewport Reveal (0.5)

Each proposal includes a human-readable reason explaining why this pattern fits this component.

---

Example Workflows

Full Enhancement (the main workflow)

You: Scan localhost:3000 and suggest animations

Claude: [Calls scan_page]
        [Captures screenshot, detects 6 components]
        [Returns ranked proposals with confidence scores]

        "Found these opportunities:
         1. Hero headline → Character Reveal (confidence: 0.92)
            'Cinematic letter-by-letter reveal makes headlines memorable'
         2. Feature cards → Staggered List (confidence: 0.88)
            'Cascading reveal creates visual rhythm in grid layouts'
         3. Stats → Number Ticker (confidence: 0.95)
            'Count-up animation draws attention to key metrics'

         Want me to implement all three?"

You: Yes, go ahead

Claude: [Calls enchant with approved proposals]
        [Creates animation components]
        [Installs framer-motion]
        [Wraps target elements with animation wrappers]

Browse Available Patterns

You: Show me all hover animations

Claude: [Calls browse_patterns with category: "hover"]
        [Returns 3D Card Tilt, Magnetic Cursor, Spotlight Glow]
        [Each with full description, dependencies, and preview]

Filter by Context

You: What animations work well for hero sections?

Claude: [Calls browse_patterns with context: "hero"]
        [Returns Character Reveal, Blur Fade, Aurora, Parallax Layers]
        [Ranked by relevance to hero sections]

Selective Enhancement

You: Enchant localhost:5173 but only add scroll animations

Claude: [Calls scan_page]
        [Filters proposals to scroll category only]
        [Proposes Viewport Reveal for cards, Scroll Progress for content]

You: Add parallax to the hero too

Claude: [Adds Parallax Layers to the proposal list]
        [Calls enchant with the combined set]

Enhance a Production Site's Design

You: Scan https://myapp.com and show me what animations would improve it

Claude: [Calls scan_page on the live URL]
        [Returns proposals based on the production page structure]
        [You can then apply these patterns to your local source code]

---

Architecture

+------------------------------------------------------------------------+
|                     Claude Code (your Pro plan)                          |
|                                                                         |
|  User: "Enchant my UI at localhost:3000"                                |
|           |                                                             |
|           v                                                             |
|  +------------------------------------------------------------------+  |
|  |                  Enchant MCP (3 tools)                            |  |
|  |                                                                   |  |
|  |  scan_page                                                        |  |
|  |    Page Scanner -----> Puppeteer ---------> Screenshot + DOM      |  |
|  |    Component Detector > Semantic Analysis -> Classified Components|  |
|  |    Opportunity Mapper > Scoring Matrix ----> Ranked Proposals     |  |
|  |                                                                   |  |
|  |  enchant                                                          |  |
|  |    Pattern Registry --> 16 Curated Patterns                       |  |
|  |    Code Generator ----> Component Code + Integration Steps        |  |
|  |                                                                   |  |
|  |  browse_patterns                                                  |  |
|  |    Pattern Registry --> Filtered + Scored Search Results          |  |
|  +-----------------------------+------------------------------------+  |
|                                |                                        |
|                                v                                        |
|  Claude receives: screenshot + proposals + implementation plan          |
|                                |                                        |
|                                v                                        |
|  Claude presents proposals to user for approval                         |
|                                |                                        |
|                                v                                        |
|  Claude implements approved enhancements in the codebase                |
|                                                                         |
+------------------------------------------------------------------------+

---

What Gets Enhanced

Component Type	Best-Fit Patterns	Impact
Hero sections	Character Reveal, Blur Fade, Aurora, Parallax	High — first impression
Card grids	Staggered List, 3D Card Tilt, Viewport Reveal	High — visual rhythm
Statistics	Number Ticker, Viewport Reveal	High — draws attention
CTA buttons	Button Press, Spotlight Glow, Magnetic Cursor	Medium — interaction feel
Navigation	Magnetic Cursor	Low — subtle polish
Backgrounds	Aurora, Particles, Animated Gradient, Meteors	High — ambiance
Text content	Blur Fade, Typewriter, Gradient Text	Medium — reading experience
Footers	Viewport Reveal	Low — completeness

---

Supported Frameworks

Enchant generates code for:

• React / Next.js — primary target, Framer Motion components
• Any framework — CSS-only patterns (Gradient Text, Aurora, Animated Gradient, Meteors) work everywhere

Animation engines used:

• Framer Motion (motion) — primary engine for 12/16 patterns
• CSS animations — 4 patterns are pure CSS, zero JS overhead
• Canvas API — Floating Particles uses native canvas

---

Requirements

• Node.js >= 20.0.0
• Chrome/Chromium (uses your system Chrome — no extra download)
• Claude Code (for MCP integration)
• No API keys needed — runs entirely within Claude Code using your existing Pro plan

---

Development

# Clone
git clone https://github.com/prembobby39-gif/enchant-mcp.git
cd enchant-mcp

# Install
npm install

# Build
npm run build

# Watch mode
npm run dev

# Test locally with Claude Code
claude mcp add enchant-dev -- node /path/to/enchant-mcp/dist/index.js

---

Contributing

Contributions welcome! Some ideas:

• Vue / Svelte pattern variants
• GSAP-powered patterns (complex sequenced animations)
• React Three Fiber patterns (3D objects, particle fields)
• Lottie animation integration
• CSS @starting-style patterns (native entry animations)
• Page transition animations (view transitions API)
• Scroll-driven animation patterns (CSS animation-timeline)
• Sound design integration (subtle UI sounds)
• Performance budget awareness (skip heavy patterns on slow connections)
• A/B test mode (generate with/without animations for comparison)

---

License

MIT