https://github.com/santifer/claude-eye
CLI tool that analyzes web animation videos frame-by-frame using Claude Vision
https://github.com/santifer/claude-eye
animation claude cli css debugging vision-ai
Last synced: 11 days ago
JSON representation
CLI tool that analyzes web animation videos frame-by-frame using Claude Vision
- Host: GitHub
- URL: https://github.com/santifer/claude-eye
- Owner: santifer
- Created: 2026-01-28T10:25:56.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-01-29T18:38:54.000Z (5 months ago)
- Last Synced: 2026-06-10T21:24:27.465Z (16 days ago)
- Topics: animation, claude, cli, css, debugging, vision-ai
- Language: TypeScript
- Size: 16.6 KB
- Stars: 16
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Claude Eye
**[:gb: English](#the-problem)** | **[:es: Español](#es-versión-en-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
```bash
# 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
```bash
npx claude-eye analyze video.mov
```
### With Options
```bash
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
```bash
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
---
---
# :es: 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
```bash
# 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
```bash
npx claude-eye analyze video.mov
```
### Con Opciones
```bash
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
```bash
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
[](https://santifer.io)
[](https://linkedin.com/in/santifer)
[](mailto:hola@santifer.io)