Claude Eye

🇬🇧 English | 🇪🇸 Español

CLI tool that analyzes web animation videos frame-by-frame using Claude Vision

---

The Problem

Debugging CSS animations and transitions is painful. You see a desync, but figuring out the exact timing is trial and error. Browser DevTools don't help with complex sequences.

The Solution

Claude Eye uses AI vision to analyze screen recordings frame-by-frame:

1. Record your animation with any screen recorder
2. Analyze with npx claude-eye analyze video.mov
3. Get a detailed report showing exact timestamps of desyncs

---

Tech Stack

---

Installation

# Clone the repo
git clone https://github.com/santifer-dev/claude-eye.git
cd claude-eye

# Install dependencies
npm install

# Build
npm run build

Requirements

• Node.js 18+
• ffmpeg installed (brew install ffmpeg on macOS)
• CLAUDE_EYE_API_KEY environment variable set

---

Usage

Basic

npx claude-eye analyze video.mov

With Options

npx claude-eye analyze video.mov \
  --fps 5 \                              # Frames per second to extract (default: 5)
  --start 5 \                            # Start analysis at second 5
  --end 15 \                             # End at second 15
  --context "CSS opacity transition" \   # Context for Claude
  --output ./reports/                    # Output directory

Example Output

🔍 Claude Eye v1.0.0
Animation analysis powered by Claude Vision

Video: error.mov
FPS: 5
Start: 5s
End: 15s
Context: CSS opacity transition

✔ Extracted 50 frames (5s - 15s)
✔ Analyzed 50 frames
✔ Timeline built: 4 elements tracked, 2 issues found
✔ Report generated

✅ Analysis complete!

Output files:
  Report: ./output/report.md
  JSON: ./output/analysis.json
  Frames: ./output/frames/

⚠️  Found 2 timing issue(s)
   - 00:06.200: Elements out of sync: 1 visible, 2 still transitioning (70% opacity spread)
   - 00:06.600: Elements out of sync: 2 visible, 1 still transitioning (45% opacity spread)

---

Configuration

Environment Variables

export CLAUDE_EYE_API_KEY="sk-ant-..."

---

How It Works

1. Extract: FFmpeg extracts frames at specified FPS
2. Analyze: Each frame is sent to Claude Vision API
3. Timeline: Results aggregated, desyncs detected
4. Report: Markdown report generated

---

Report Format

The generated report.md includes:

• Summary: Video info, analysis parameters
• Timeline: Frame-by-frame opacity table
• Transition Points: When elements change state
• Desync Events: Detailed breakdown of timing issues
• Recommendations: Suggested fixes

---

Integration with Claude Code

Claude Eye generates reports that Claude Code can read:

# In Claude Code:
"Read the Claude Eye report at output/report.md and suggest the fix"

---

License

MIT

---

---

🇪🇸 Versión en Español

CLI que analiza videos de animaciones web frame por frame usando Claude Vision

---

El Problema

Debuggear animaciones CSS es doloroso. Ves un desync, pero encontrar el timing exacto es prueba y error. Las DevTools del navegador no ayudan con secuencias complejas.

La Solución

Claude Eye usa visión AI para analizar grabaciones de pantalla frame por frame:

1. Graba tu animación con cualquier grabador de pantalla
2. Analiza con npx claude-eye analyze video.mov
3. Obtén un reporte detallado con timestamps exactos de desyncs

---

Stack Técnico

---

Instalación

# Clonar el repo
git clone https://github.com/santifer-dev/claude-eye.git
cd claude-eye

# Instalar dependencias
npm install

# Build
npm run build

Requisitos

• Node.js 18+
• ffmpeg instalado (brew install ffmpeg en macOS)
• Variable de entorno CLAUDE_EYE_API_KEY configurada

---

Uso

Básico

npx claude-eye analyze video.mov

Con Opciones

npx claude-eye analyze video.mov \
  --fps 5 \                              # Frames por segundo a extraer (default: 5)
  --start 5 \                            # Iniciar análisis en segundo 5
  --end 15 \                             # Terminar en segundo 15
  --context "CSS opacity transition" \   # Contexto para Claude
  --output ./reports/                    # Directorio de salida

---

Configuración

Variables de Entorno

export CLAUDE_EYE_API_KEY="sk-ant-..."

---

Cómo Funciona

1. Extrae: FFmpeg extrae frames al FPS especificado
2. Analiza: Cada frame se envía a Claude Vision API
3. Timeline: Resultados agregados, desyncs detectados
4. Reporte: Genera reporte Markdown

---

Integración con Claude Code

Claude Eye genera reportes que Claude Code puede leer:

# En Claude Code:
"Lee el reporte de Claude Eye en output/report.md y sugiere el fix"

---

Licencia

MIT

---

Let's Connect