cd mcp-scroll-analyzer
npm install

npx playwright install chromium

npm run build

{
  "mcpServers": {
    "scroll-analyzer": {
      "command": "node",
      "args": ["C:/path/to/mcp-scroll-analyzer/dist/index.js"]
    }
  }
}

{
  "mcpServers": {
    "scroll-analyzer": {
      "command": "node",
      "args": ["C:/path/to/mcp-scroll-analyzer/dist/index.js"]
    }
  }
}

# Analyze a webpage
npx scroll-analyzer analyze https://example.com

# With options
npx scroll-analyzer analyze https://example.com --output ./reports --format html

# Export replicable code
npx scroll-analyzer export https://example.com --target react

analyze <url>  - Analyze a webpage and generate a report
  Options:
    -o, --output <dir>     Output directory (default: ./scroll-analysis-output)
    -f, --format <type>    Report format: json|markdown|html (default: markdown)
    --no-headless          Run browser in visible mode
    -w, --width <pixels>   Viewport width (default: 1920)
    -h, --height <pixels>  Viewport height (default: 1080)

export <url>   - Analyze and export replicable code
  Options:
    -o, --output <dir>     Output directory
    -t, --target <fw>      Framework: vanilla|react|vue (default: vanilla)

1. open_page(url: "https://example.com")
2. scroll_and_record()
3. extract_animation_code()
4. get_scroll_triggers()
5. generate_report(format: "markdown")
6. close_browser()

1. open_page(url: "https://example.com")
2. watch_element(selector: ".hero-title", scrollThrough: true)
3. get_element_animations(selector: ".hero-title")

1. open_page(url: "https://example.com")
2. scroll_and_record()
3. extract_animation_code()
4. export_replicable_code(framework: "react")

src/
├── index.ts              # MCP server entry point
├── cli.ts                # CLI entry point
├── types.ts              # TypeScript interfaces
├── schemas.ts            # Zod validation schemas
├── extractors/
│   ├── gsap-extractor.ts      # AST-based GSAP extraction
│   ├── lenis-extractor.ts     # Lenis extraction
│   └── css-extractor.ts       # CSS animations (CSSOM)
├── browser/
│   ├── browser-manager.ts     # Playwright lifecycle
│   └── page-controller.ts     # Scroll, interact, capture
├── analyzers/
│   ├── runtime-analyzer.ts    # GSAP/ScrollTrigger API queries
│   └── script-analyzer.ts     # Orchestrates extractors
└── reporters/
    ├── markdown-reporter.ts
    ├── html-reporter.ts
    └── code-exporter.ts

# Build
npm run build

# Watch mode
npm run dev

# Run tests
npm test

# Test coverage
npm run test:coverage