Communitygithub.com

ultimate-claude-render

Crea un video (Reels, Shorts, TikTok, YouTube, anuncio, demo de producto) a partir de una escena HTML animada con GSAP, renderizada cuadro a cuadro, con narración y subtítulos palabra por palabra, fotos y videos insertados, pantallas reales de app, banda sonora, efectos, mezcla a -14 LUFS y QA automático. Funciona con cualquier marca (marca.json) y en Linux, macOS y Windows. Utilízalo cuando te pidan 'haz un video', 'video de lanzamiento', 'anuncio', 'demo del producto', 'reels', 'render', 'motion', 'subtítulos sincronizados' o cuando un video anterior haya quedado 'estático', 'amateur', 'desincronizado' o 'sin la personalidad de la marca'.

¿Qué es ultimate-claude-render?

ultimate-claude-render es una potente skill para Claude que transforma escenas HTML animadas con GSAP en videos profesionales de formato corto (Reels, Shorts, TikTok, YouTube, anuncios, demos de productos). El proceso es completamente determinista: el agente escribe una escena en HTML que depende de una variable de tiempo `t`, el motor solicita cada cuadro mediante `window.__seek(t)`, captura la imagen en Chromium headless y ffmpeg la combina con voz, banda sonora y efectos. La skill maneja desde la planificación (guion, cuadros de estilo, previa) hasta la entrega final con QA automático que verifica tamaño, color, detección de fotogramas congelados, nivel de audio a -14 LUFS y texto fuera de la zona segura. Funciona en Linux, macOS y Windows, requiere solo ffmpeg, Python con numpy/scipy y Chromium, e integra soporte para marcas reales mediante un archivo `marca.json`, voz con Edge (gratis), ElevenLabs o archivos de audio, subtítulos sincronizados palabra por palabra, inserción de pantallas de app reales y efectos de sonido sintetizados o personalizados.

Compatible con✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/PedroHenrique0713/ultimate-claude-render/tree/HEAD/skills/ultimate-claude-render

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

ultimate claude render

Un vídeo es una página HTML cuyo estado es función del tiempo t. Claude escribe la escena; el motor pide cada cuadro (window.__seek(t)), toma la captura en Chromium headless y ffmpeg lo junta con la voz, la banda sonora y los efectos. Nada se "graba": todo es determinista y rehacible.

El repositorio es el motor + los scripts de audio + esta skill. Los vídeos de cada persona quedan en carpetas de proyecto fuera de él.

Antes de escribir una línea

  1. Ejecute ucr doctor. Si falta ffmpeg, Python con numpy/scipy o Chromium, indica el comando exacto.
  2. Encuentre el repo. La skill se instala con ucr instalar-skill y el repo queda donde se clonó (ucr en el PATH o node <repo>/bin/ucr.mjs). Si no lo encuentra, pregunte dónde está clonado; no reimplemente el motor.
  3. Plan antes de producir (el vídeo es costoso de rehacer): guion completo, formato, marca, medios disponibles, números con fuente, qué aparece en cada frase. El usuario aprueba por etapa: guion → cuadros de estilo (ucr stills) → previsualización → render final. No renderice el vídeo entero sin el guion y los cuadros aprobados.
  4. Marca existente primero. Lea el brandbook, el sitio web o la aplicación del usuario y escriba el marca.json (colores, fuente, logo). Nunca invente una identidad ni rediseñe el logo. El material del cliente con aspecto de plantilla genérica es rechazado: foto, color y logo reales.

Flujo

ucr nuevo mi-video --marca <carpeta-de-la-marca|_modelo|ejemplo> --formato vertical
# edite narracion.txt, proyecto.json y escena.html
ucr todo mi-video          # prep → medios → voz → tiempos → beats → sonidos → mezcla → render → QA

Etapas sueltas: ucr prep|medios|voz|tiempos|beats|sonidos|mezcla|render|qa <carpeta>. Verificación económica: ucr stills <carpeta> 2,8.5,15 (PNG de cualquier instante, sin renderizar el vídeo). Previsualización en tiempo real: ucr preview <carpeta> --audio.

Carpeta de un proyecto:

ArchivoQué es
proyecto.jsonformato, fps, marca, voz, pausas, mezcla, render
narracion.txtel guion hablado; se convierte en voz, subtítulos y tiempo de la escena
escena.htmlla escena (lo que usted escribe)
marca/ o marca en otra rutamarca.json + fuentes + logo
medios/fotos, vídeos, pista.mp3, sfx/<tipo>/
build/, .ucr/, salida/generados; no versionar

Escribiendo la escena

Esqueleto: ver ejemplos/modelo-escena.html del repo. El orden de los <script> importa (GSAP → marca → proyecto → tema → tiempos → medios → beats → motor). API completa en references/api-motor.md; resumen:

  • M.fondo(), M.camara(), M.marca(), M.subtitulos(F, { claves: [...] }), M.grande(texto, { t, fin })
  • M.celular(padre, {x,y,B}), M.ventana(padre, {...}), M.terminal(padre, {lineas}), M.cursor/clicar/tocar
  • M.foto(padre, 'nombre', {...}), M.video(padre, 'nombre', { sonido: true }) (de medios/, después de ucr medios)
  • M.T('palabras') = instante en que se dicen esas palabras. Ancle todo en el habla, no en segundos fijos: cambiar una frase del guion no desplaza el resto de la escena.
  • M.sonido(t, 'tipo') marca efecto para la mezcla; M.beat(t) obtiene un corte para el beat de la pista.

Reglas de oro de la escena:

  1. Todo depende solo de t. Tweens en la timeline (M.tl), contadores y dibujos en M.ACTUALIZAR.push(t => ...). Nada de setInterval, Date.now(), <video> con play() o animaciones CSS.
  2. Zona segura de la plataforma: el QA detecta texto fuera de ella (vertical: 14% en la parte superior y 25% en la base).
  3. El descanso lleva a la deriva. Nada parado por más de ~1,5 s (el QA lo mide y el espectador salta). M.camara() agita la escena en 3D; una tarjeta oscura sobre fondo oscuro se mueve sin que nadie lo note, así que póngale borde y brillo.
  4. Cada frase cambia el cuadro. Frase nueva, imagen nueva o movimiento nuevo.
  5. Antes de renderizar: ucr stills en 3 o 4 instantes. Un error de script (variable repetida, palabra fuera de la narración) aparece al instante con el mensaje de la página.

Audio

  • Voz: proyecto.json → voz.proveedor: edge (gratis, sin clave; bueno para pruebas, no para uso comercial), elevenlabs, fal, o archivo (usted grabó; tiempos con Deepgram nova-3). El texto de la pantalla = el de narracion.txt, los tiempos vienen de la voz.
  • Pausas: "pausas": {"2": 1.2} = 1,2 s de silencio después de la frase de índice 2 (la imagen necesita tiempo para entrar).
  • Pista: medios/pista.mp3 (¡licencia comercial!) o "sintetica" (original, sin licencia). Baja automáticamente bajo la voz (ducking).
  • Efectos: sintetizados (whoosh, impacto, clic, brillo, subida, obturador, pop, tecla, grave, papel) o archivos en medios/sfx/<tipo>/.
  • Master: −14 LUFS y −1,5 dBTP (Reels/TikTok/Shorts), medido en el archivo final.

Detalles y trampas: references/audio.md.

QA y entrega

El render ejecuta el QA automáticamente (salida/<nombre> - QA.txt): tamaño, color (BT.709 marcado), fotograma congelado, tramo negro, sonoridad, pico y texto fuera de la zona segura. QA verde no es aprobación: abra el MP4, vea los cuadros, escuche. Reporte lo que el QA detectó y lo que usted vio; no declare "listo" sin haberlo visto.

Salidas: salida/<nombre>.mp4 (entrega, 22 Mb/s) y salida/<nombre> - ligero.mp4 (30 fps, para enviar por mensaje).

Cuando algo sale mal

  • Escena no se completa (La escena no se completó): error de script (el mensaje trae el error de la página, al instante) o, sin ningún error, ruta de <script>/medios incorrecta (entonces espera el tiempo límite de 90 s).
  • Render lento: ver references/trampas.md (filter blur, backdrop-filter, blend en pantalla completa, <video> en la página).
  • Rehacer solo un tramo: ucr render <carpeta> --de 30 --hasta 38 (reutiliza los fragmentos del render anterior si los parámetros son los mismos).
  • Antes de un render largo: df -h (≈ 250 MB de fragmentos y ≈ 145 MB de entrega por 45 s a 1080×1920).

Referencias (leer bajo demanda)

  • references/api-motor.md: toda la API de M.* con ejemplos
  • references/marca.md: marca.json campo por campo, formatos y zonas
  • references/audio.md: voz, pausas, pista, efectos, mezcla, licencias
  • references/recetas.md: foto, vídeo en medio, pantalla real, terminal, horizontal, variantes, cambio de paleta
  • references/trampas.md: lo que ya se rompió (medido), por tema

Skills relacionados