RenderLens Local — Animated SVG Creator & Screenshot Tool

Create, render, and QA animated SVGs with CSS animation-aware screenshots. The open-source SVG creator tool that actually captures what users see — not a blank screen at t=0.

Why This Exists

Every animated SVG creator and screenshot tool renders at t=0 — the instant the page loads. CSS animations that start with opacity: 0 are invisible in the screenshot, even though users see them animate in within milliseconds.

This means your animated SVGs look empty in previews, CI screenshots, and AI-assisted design workflows.

RenderLens Local fixes this with animation-aware capture modes that screenshot your SVGs the way users actually experience them.

Features

• 🎬 Animation-Aware Screenshots — Capture animated SVGs mid-animation, at their final state, or frame-by-frame
• 🎞️ Filmstrip Mode — Generate multi-frame strips showing the full animation progression at configurable intervals
• 🔍 Visual Diff — Pixel-level comparison between two versions of your SVG or HTML
• 🤖 MCP Server — Drop-in tool for Claude Code, Cursor, and any MCP-compatible AI agent
• 🌐 REST API — Simple HTTP endpoints for any workflow or CI pipeline
• ⚡ Fast — Shared Playwright browser instance, 2-second renders, no cold starts after first request
• 🎨 SVG + HTML + React — Auto-detects input format, wraps SVG/snippets in proper boilerplate with Tailwind CDN

Quick Start

git clone https://github.com/BusyBee3333/renderlens-local.git
cd renderlens-local
npm install
npx playwright install chromium
npm start
# Server running at http://localhost:3700

Animation Capture Modes

The core innovation — four ways to capture animated content:

Mode	What It Does	Best For
natural	Waits configurable delay (default 800ms) then screenshots	Animated SVGs — captures mid-animation state like users see
freeze-end	Injects CSS to force all animations to their final state	Static previews of fully-settled UI
filmstrip	Captures N frames at intervals, composites into one image	Animation QA — verify timing, opacity ramps, transitions frame by frame
instant	Screenshots immediately at page load (t=0)	Static content or comparing with the t=0 bug behavior

How freeze-end Works

Injects this CSS before capture to jump every animation to its end state:

*, *::before, *::after {
  animation-delay: -9999s !important;
  animation-duration: 0.001s !important;
  animation-fill-mode: both !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

Filmstrip Example

Capture 8 frames over 2 seconds to verify your animated SVG creator output:

curl -X POST http://localhost:3700/filmstrip \
  -H 'Content-Type: application/json' \
  -d '{
    "code": "<svg>...</svg>",
    "frames": 8,
    "duration": 2000,
    "layout": "horizontal",
    "showTimestamps": true
  }' --output filmstrip.jpg

Returns a single composite image with all frames side by side, each labeled with its timestamp.

REST API (Port 3700)

POST /render — Screenshot HTML or SVG

curl -X POST http://localhost:3700/render \
  -H 'Content-Type: application/json' \
  -d '{
    "code": "<svg viewBox=\"0 0 200 200\"><style>@keyframes fadeIn{from{opacity:0}to{opacity:1}} circle{animation:fadeIn 1s forwards}</style><circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"coral\" opacity=\"0\"/></svg>",
    "viewport": { "width": 400, "height": 400 },
    "quality": 90,
    "animationMode": "natural",
    "screenshotDelay": 1000
  }' --output screenshot.jpg

Parameters:

Param	Type	Default	Description
code	string	required	HTML, SVG, or React code to render
viewport	object	{width:1280, height:800}	Viewport dimensions
quality	number	85	JPEG quality (1-100)
fullPage	boolean	false	Capture full scrollable page
animationMode	string	"natural"	natural, freeze-end, or instant
screenshotDelay	number	800	Milliseconds to wait before capture (natural mode)

Response: JPEG image buffer with headers:

• X-Console-Errors — JSON array of JS console errors during render
• X-Render-Meta — JSON object with render metadata (dimensions, timing, etc.)

POST /filmstrip — Animation Frame Strip

curl -X POST http://localhost:3700/filmstrip \
  -H 'Content-Type: application/json' \
  -d '{
    "code": "<svg>...</svg>",
    "frames": 6,
    "duration": 2000,
    "layout": "grid",
    "showTimestamps": true
  }' --output filmstrip.jpg

Parameters:

Param	Type	Default	Description
code	string	required	HTML or SVG to capture
viewport	object	{width:800, height:600}	Per-frame viewport
quality	number	85	JPEG quality
frames	number	6	Number of frames to capture
duration	number	2000	Total duration to capture (ms)
layout	string	"horizontal"	horizontal, vertical, or grid
showTimestamps	boolean	true	Show timestamp labels on each frame

POST /diff — Pixel Diff Two Versions

curl -X POST http://localhost:3700/diff \
  -H 'Content-Type: application/json' \
  -d '{
    "before": "<div style=\"background:red;width:100px;height:100px\"></div>",
    "after": "<div style=\"background:blue;width:100px;height:100px\"></div>"
  }'

Response:

{
  "diffPercent": 2.45,
  "totalPixels": 1024000,
  "changedPixels": 25088,
  "dimensions": { "width": 1280, "height": 800 }
}

GET /health — Health Check

{ "status": "ok", "service": "renderlens-local", "version": "1.0.0" }

MCP Server — AI Agent Integration

Use RenderLens Local as an MCP tool in Claude Code, Cursor, Windsurf, or any MCP-compatible AI coding agent. The AI can create SVGs, render them, see the output, and iterate — all in one conversation.

Add to Claude Code

claude mcp add renderlens-local -- node /path/to/renderlens-local/src/mcp.js

Add to Cursor / Windsurf / Other MCP Clients

{
  "mcpServers": {
    "renderlens-local": {
      "command": "node",
      "args": ["/path/to/renderlens-local/src/mcp.js"]
    }
  }
}

MCP Tools

Tool	Description
render	Full render with all options — returns base64 JPEG + metadata
render_svg	SVG convenience wrapper — auto-sets natural mode + 1000ms delay
filmstrip	Capture animation as multi-frame composite strip
diff	Visual diff between two code versions — returns diff image + percentage

Use Cases

Animated SVG Creator Workflow

1. Write your SVG with CSS @keyframes animations
2. Render with natural mode to see what users actually experience
3. Use filmstrip to verify animation timing frame by frame
4. Iterate until perfect, then ship

SVG QA in CI/CD

# Render all SVGs and check for console errors
for svg in assets/*.svg; do
  curl -s -X POST http://localhost:3700/render \
    -H 'Content-Type: application/json' \
    -d "{\"code\": $(jq -Rs . < "$svg")}" \
    -D - -o /dev/null | grep X-Console-Errors
done

Visual Regression Testing

# Diff before and after a code change
curl -X POST http://localhost:3700/diff \
  -H 'Content-Type: application/json' \
  -d "{\"before\": $(cat before.html | jq -Rs .), \"after\": $(cat after.html | jq -Rs .)}"
# Alert if diffPercent > threshold

AI-Assisted SVG Design

With the MCP server, your AI coding agent can:

• Create animated SVGs from text descriptions
• Render them immediately to verify the output
• See what's wrong and fix it in the same conversation
• Use filmstrip to verify animation timing
• Iterate until the animation is perfect — no more blind coding

Architecture

renderlens-local/
  src/
    server.js       — Express REST server (port 3700)
    mcp.js          — MCP stdio server (4 tools)
    renderer.js     — Core Playwright engine + filmstrip
    differ.js       — Pixel diff (pixelmatch)
  package.json
  start.sh          — Start REST server
  mcp.sh            — Start MCP server
  LICENSE           — Apache 2.0

• Shared browser instance — Playwright Chromium reused across requests for fast renders
• 2x device scale — Retina-quality screenshots by default
• Auto-detect format — SVG, HTML snippets, and full HTML documents handled automatically
• Tailwind CDN — Included by default for HTML snippet rendering
• Graceful shutdown — Clean browser teardown on SIGTERM/SIGINT

Requirements

• Node.js 18+
• Playwright Chromium (installed via npx playwright install chromium)

License

Apache License 2.0 — see LICENSE for details.

---

Built for the SVG creator community — because animated SVGs deserve tools that actually show the animations.