Reverse-engineer GSAP timelines, Lottie animations, Three.js scenes, scroll triggers, custom cursors, page transitions, and more. Uses headless Chrome and the Chrome DevTools Protocol to analyze live websites -- not just source code.

Built for the Model Context Protocol (MCP). Works with Claude Desktop, Cursor, Windsurf, and any MCP-compatible client.

Installation

npm install
npm run build

No external dependencies beyond Node.js and Puppeteer (auto-installs Chromium).

Claude Desktop / Cursor

Add to your MCP client configuration:

{
  "mcpServers": {
    "mcp-effects": {
      "command": "node",
      "args": ["/path/to/mcp-effects/dist/server.js"]
    }
  }
}

HTTP Mode (Microservice)

MCP_HTTP=true MCP_PORT=3103 node dist/server.js

Docker

docker build -t mcp-effects .
docker run -p 3103:3103 -e MCP_HTTP=true mcp-effects

Tools (12)

Animation Extraction

Tool	What it does	Key params
`extract_gsap_timeline`	Extract GSAP tweens, timelines, easing, durations. Generates copy-paste recreation code.	`url`, `waitForAnimations`
`extract_scroll_triggers`	Detect GSAP ScrollTrigger, Intersection Observer, CSS scroll-driven animations. Pinned sections, snap points, parallax.	`url`, `scrollPage`
`extract_cubic_bezier`	Extract all easing curves (cubic-bezier, CSS keywords, GSAP eases). SVG path visualization.	`url`
`screenshot_animation_frames`	Capture 10+ animation frames (hover, scroll, click, time-based) with element state tracking.	`url`, `selector`, `animationType`, `frameCount`

Vector & 3D

Tool	What it does	Key params
`extract_svg_paths`	Extract SVG paths for morphing/drawing. Detects animations, icon sprites, morph targets. Generates draw animation code.	`url`, `includeRawSvg`
`extract_lottie`	Detect lottie-web, lottie-player, dotlottie-player. Extract metadata, layers, assets, JSON data. Network monitoring for external Lottie files.	`url`, `extractJson`
`extract_threejs_scene`	Inspect Three.js: cameras, lights, materials, meshes, geometries, textures, orbit controls, post-processing. Generates scene recreation code.	`url`
`extract_hover_states`	Force :hover, :focus, :active, :focus-within, :focus-visible via CDP. Captures computed styles, CSS variables, transitions, pseudo-elements (::before, ::after).	`url`, `selector`

Library Detection

Tool	What it does	Key params
`extract_smooth_scroll`	Detect Lenis / Locomotive Scroll. Extract configs, data attributes. Generates setup code for Lenis, React Lenis, GSAP ScrollSmoother.	`url`
`extract_split_text`	Detect SplitType / GSAP SplitText / Splitting.js. Extract split configs, animation patterns. 6+ code snippet patterns included.	`url`
`extract_page_transitions`	Detect Barba.js / Swup / Turbo / Highway. Extract transition configs, overlays, preload strategies. Includes View Transitions API code.	`url`
`extract_custom_cursor`	Detect cursor libraries, dot/circle/blob cursors, hover effects, trail behaviors, magnetic interactions. GSAP + React code snippets.	`url`

Common Parameters

All tools accept:

url (required) -- Target website URL
timeout (optional) -- Navigation timeout in ms (default: 30000)

Key Features

Live website analysis -- Extracts from running websites via headless Chrome, not static source code
Chrome DevTools Protocol -- Forces pseudo-states (:hover, :focus) for accurate style extraction
SSRF protection -- Blocks requests to localhost, private IPs, and metadata endpoints
Code generation -- Every tool generates copy-paste recreation code (vanilla JS, GSAP, React)
Multi-library detection -- GSAP, Lottie, Three.js, Lenis, Barba.js, Locomotive Scroll, SplitType, and more
Network monitoring -- Detects Lottie JSON files and external assets loaded at runtime
SVG path analysis -- Calculates path lengths, detects morph targets, generates draw animation code
Easing curve mapping -- Maps between CSS keywords, cubic-bezier values, and GSAP ease names
Dual transport -- Stdio (default) or Streamable HTTP for microservice deployment
Zero configuration -- Works out of the box, Puppeteer auto-installs Chromium

Use Cases

Competitor Analysis -- Extract the exact GSAP timelines, scroll triggers, and interaction patterns from any competitor's website. Get recreation code you can adapt.

Animation Auditing -- Identify performance-impacting animations. Find heavy Lottie files, complex scroll triggers, or expensive Three.js scenes.

Design System Extraction -- Pull easing curves, animation timings, hover states, and transition patterns from reference websites to build consistent design systems.

Learning & Reference -- Study production GSAP setups, Three.js configurations, and scroll animation patterns from award-winning websites.

Rapid Prototyping -- Extract the exact animation config from a reference site and get working code to paste into your project.

Example Workflows

Reverse-Engineer a Landing Page

1. extract_gsap_timeline     -- Get all animation timelines + code
2. extract_scroll_triggers   -- Get scroll-based effects
3. extract_cubic_bezier      -- Get all easing curves
4. extract_hover_states      -- Get button/link hover effects
5. extract_smooth_scroll     -- Get Lenis/Locomotive config

Extract a Three.js Scene

1. extract_threejs_scene     -- Get camera, lights, materials, meshes
2. screenshot_animation_frames -- Capture animation visually

Audit Lottie Animations

1. extract_lottie            -- Get all Lottie files + metadata
   (frame count, duration, layer structure, asset URLs)

Architecture

src/
  lib/          Standalone utilities (logger, URL validation, dual transport)
  tools/        12 individual extraction tools (one file each)
  server.ts     MCP server entry point (tool registration)
  server.test.ts  12 unit tests

No external service dependencies. Only needs Node.js >= 18 and Chromium (auto-installed via Puppeteer).

Security

All URL inputs validated against SSRF attacks (blocks private IPs, localhost, metadata endpoints)
Headless Chrome runs with --no-sandbox for container compatibility
No data is sent to external services -- all extraction happens locally