{"id":50881596,"url":"https://github.com/santifer/claude-eye","last_synced_at":"2026-06-15T13:06:46.795Z","repository":{"id":363899360,"uuid":"1144130072","full_name":"santifer/claude-eye","owner":"santifer","description":"CLI tool that analyzes web animation videos frame-by-frame using Claude Vision","archived":false,"fork":false,"pushed_at":"2026-01-29T18:38:54.000Z","size":17,"stargazers_count":16,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-10T21:24:27.465Z","etag":null,"topics":["animation","claude","cli","css","debugging","vision-ai"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/santifer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-28T10:25:56.000Z","updated_at":"2026-05-30T05:15:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/santifer/claude-eye","commit_stats":null,"previous_names":["santifer/claude-eye"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/santifer/claude-eye","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santifer%2Fclaude-eye","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santifer%2Fclaude-eye/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santifer%2Fclaude-eye/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santifer%2Fclaude-eye/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/santifer","download_url":"https://codeload.github.com/santifer/claude-eye/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santifer%2Fclaude-eye/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34363726,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","claude","cli","css","debugging","vision-ai"],"created_at":"2026-06-15T13:06:45.835Z","updated_at":"2026-06-15T13:06:46.767Z","avatar_url":"https://github.com/santifer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Claude Eye\n\n**[:gb: English](#the-problem)** | **[:es: Español](#es-versión-en-español)**\n\n\u003e CLI tool that analyzes web animation videos frame-by-frame using Claude Vision\n\n![Claude Eye](https://img.shields.io/badge/Claude_Eye-Debug_Animations-5436DA?style=flat\u0026logo=anthropic\u0026logoColor=white)\n\n---\n\n## The Problem\n\nDebugging 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.\n\n## The Solution\n\nClaude Eye uses AI vision to analyze screen recordings frame-by-frame:\n\n1. **Record** your animation with any screen recorder\n2. **Analyze** with `npx claude-eye analyze video.mov`\n3. **Get** a detailed report showing exact timestamps of desyncs\n\n---\n\n## Tech Stack\n\n![Node.js](https://img.shields.io/badge/Node.js-339933?style=flat\u0026logo=nodedotjs\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat\u0026logo=typescript\u0026logoColor=white)\n![Claude](https://img.shields.io/badge/Claude_Vision-5436DA?style=flat\u0026logo=anthropic\u0026logoColor=white)\n![FFmpeg](https://img.shields.io/badge/FFmpeg-007808?style=flat\u0026logo=ffmpeg\u0026logoColor=white)\n\n---\n\n## Installation\n\n```bash\n# Clone the repo\ngit clone https://github.com/santifer-dev/claude-eye.git\ncd claude-eye\n\n# Install dependencies\nnpm install\n\n# Build\nnpm run build\n```\n\n### Requirements\n\n- Node.js 18+\n- ffmpeg installed (`brew install ffmpeg` on macOS)\n- `CLAUDE_EYE_API_KEY` environment variable set\n\n---\n\n## Usage\n\n### Basic\n\n```bash\nnpx claude-eye analyze video.mov\n```\n\n### With Options\n\n```bash\nnpx claude-eye analyze video.mov \\\n  --fps 5 \\                              # Frames per second to extract (default: 5)\n  --start 5 \\                            # Start analysis at second 5\n  --end 15 \\                             # End at second 15\n  --context \"CSS opacity transition\" \\   # Context for Claude\n  --output ./reports/                    # Output directory\n```\n\n### Example Output\n\n```\n🔍 Claude Eye v1.0.0\nAnimation analysis powered by Claude Vision\n\nVideo: error.mov\nFPS: 5\nStart: 5s\nEnd: 15s\nContext: CSS opacity transition\n\n✔ Extracted 50 frames (5s - 15s)\n✔ Analyzed 50 frames\n✔ Timeline built: 4 elements tracked, 2 issues found\n✔ Report generated\n\n✅ Analysis complete!\n\nOutput files:\n  Report: ./output/report.md\n  JSON: ./output/analysis.json\n  Frames: ./output/frames/\n\n⚠️  Found 2 timing issue(s)\n   - 00:06.200: Elements out of sync: 1 visible, 2 still transitioning (70% opacity spread)\n   - 00:06.600: Elements out of sync: 2 visible, 1 still transitioning (45% opacity spread)\n```\n\n---\n\n## Configuration\n\n### Environment Variables\n\n```bash\nexport CLAUDE_EYE_API_KEY=\"sk-ant-...\"\n```\n\n---\n\n## How It Works\n\n1. **Extract**: FFmpeg extracts frames at specified FPS\n2. **Analyze**: Each frame is sent to Claude Vision API\n3. **Timeline**: Results aggregated, desyncs detected\n4. **Report**: Markdown report generated\n\n---\n\n## Report Format\n\nThe generated `report.md` includes:\n\n- **Summary**: Video info, analysis parameters\n- **Timeline**: Frame-by-frame opacity table\n- **Transition Points**: When elements change state\n- **Desync Events**: Detailed breakdown of timing issues\n- **Recommendations**: Suggested fixes\n\n---\n\n## Integration with Claude Code\n\nClaude Eye generates reports that Claude Code can read:\n\n```\n# In Claude Code:\n\"Read the Claude Eye report at output/report.md and suggest the fix\"\n```\n\n---\n\n## License\n\nMIT\n\n---\n\n---\n\n# :es: Versión en Español\n\n\u003e CLI que analiza videos de animaciones web frame por frame usando Claude Vision\n\n---\n\n## El Problema\n\nDebuggear 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.\n\n## La Solución\n\nClaude Eye usa visión AI para analizar grabaciones de pantalla frame por frame:\n\n1. **Graba** tu animación con cualquier grabador de pantalla\n2. **Analiza** con `npx claude-eye analyze video.mov`\n3. **Obtén** un reporte detallado con timestamps exactos de desyncs\n\n---\n\n## Stack Técnico\n\n![Node.js](https://img.shields.io/badge/Node.js-339933?style=flat\u0026logo=nodedotjs\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat\u0026logo=typescript\u0026logoColor=white)\n![Claude](https://img.shields.io/badge/Claude_Vision-5436DA?style=flat\u0026logo=anthropic\u0026logoColor=white)\n![FFmpeg](https://img.shields.io/badge/FFmpeg-007808?style=flat\u0026logo=ffmpeg\u0026logoColor=white)\n\n---\n\n## Instalación\n\n```bash\n# Clonar el repo\ngit clone https://github.com/santifer-dev/claude-eye.git\ncd claude-eye\n\n# Instalar dependencias\nnpm install\n\n# Build\nnpm run build\n```\n\n### Requisitos\n\n- Node.js 18+\n- ffmpeg instalado (`brew install ffmpeg` en macOS)\n- Variable de entorno `CLAUDE_EYE_API_KEY` configurada\n\n---\n\n## Uso\n\n### Básico\n\n```bash\nnpx claude-eye analyze video.mov\n```\n\n### Con Opciones\n\n```bash\nnpx claude-eye analyze video.mov \\\n  --fps 5 \\                              # Frames por segundo a extraer (default: 5)\n  --start 5 \\                            # Iniciar análisis en segundo 5\n  --end 15 \\                             # Terminar en segundo 15\n  --context \"CSS opacity transition\" \\   # Contexto para Claude\n  --output ./reports/                    # Directorio de salida\n```\n\n---\n\n## Configuración\n\n### Variables de Entorno\n\n```bash\nexport CLAUDE_EYE_API_KEY=\"sk-ant-...\"\n```\n\n---\n\n## Cómo Funciona\n\n1. **Extrae**: FFmpeg extrae frames al FPS especificado\n2. **Analiza**: Cada frame se envía a Claude Vision API\n3. **Timeline**: Resultados agregados, desyncs detectados\n4. **Reporte**: Genera reporte Markdown\n\n---\n\n## Integración con Claude Code\n\nClaude Eye genera reportes que Claude Code puede leer:\n\n```\n# En Claude Code:\n\"Lee el reporte de Claude Eye en output/report.md y sugiere el fix\"\n```\n\n---\n\n## Licencia\n\nMIT\n\n---\n\n## Let's Connect\n\n[![Website](https://img.shields.io/badge/santifer.io-000?style=for-the-badge\u0026logo=safari\u0026logoColor=white)](https://santifer.io)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://linkedin.com/in/santifer)\n[![Email](https://img.shields.io/badge/Email-EA4335?style=for-the-badge\u0026logo=gmail\u0026logoColor=white)](mailto:hola@santifer.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsantifer%2Fclaude-eye","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsantifer%2Fclaude-eye","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsantifer%2Fclaude-eye/lists"}