norahe0304-art/30x-video

Vídeos Hermosos con Remotion

Crea vídeos de lanzamiento de producto de 40 segundos que parezcan hechos por una agencia de 50.000 $. El secreto: construir maquetas animadas de la interfaz de usuario del producto — paneles reales, interfaces de conversación, editores de código, visualizaciones de datos — todo construido en código y animado con muelles físicos (spring).

Cuándo usar

El usuario menciona una marca o proporciona una URL y quiere un vídeo de lanzamiento / marketing / demostración.

NO usar para (redirigir a otro skill en lugar de forzar este): extraer clips cortos de un vídeo largo existente (eso es un trabajo de cortes/remontaje); añadir subtítulos a metraje con alguien hablando; edición estilo NLE de metraje de usuario (re-tiempo/re-color/re-ordenar); una pista musical simple que necesita un videoclip lírico sincronizado al ritmo. Este skill construye un vídeo de lanzamiento a partir de la presencia web de una marca — maquetas de interfaz de usuario construidas con código, activos reales raspados, narrativa de 5 actos. Si la entrada no es una marca/producto a presentar, esta es la herramienta equivocada.

Stack Tecnológico

Remotion 4.x (andamio fijado ≥4.0.484) + React 19 + TypeScript + Zod + lucide-react + @remotion/transitions + @remotion/google-fonts + @remotion/paths + @remotion/light-leaks + @remotion/media + @remotion/effects (gradiente/tablero de ajedrez/relieve/líneas de cuadrícula oficiales — preferir sobre equivalentes CSS hechos a mano)

Requisitos Previos del Sistema — Gestionados Automáticamente

NO pedir al usuario que instale nada. NO ejecutar una verificación manual con command -v. El orquestador (scripts/url-to-video.ts) tiene un preflight integrado que detecta herramientas faltantes, imprime las que faltan y las instala mediante brew/apt/dnf/pacman/npm — todo dentro del Paso 1.

Herramientas necesarias (todas se instalan automáticamente si faltan):

Herramienta	Por qué
ffmpeg	Corte de audio, loudnorm, corte de vídeo, comprobaciones de volumedetect
yt-dlp	Raspar vídeos de demostración de marca + música libre de derechos de YouTube
aubiotrack	Respaldo de ritmo en modo degradado para analyze-audiomap.py + beat-sync.ts heredado (mediante paquete aubio)
playwright	Captura de pantalla de la página de inicio sin cabeza (headless)

Indicadores de preflight (pasar estos a url-to-video.ts):

• --yes — instalar automáticamente sin preguntar (usar esto al ejecutar como Claude, ya que no tienes TTY)
• --no-install — saltar instalaciones, ejecutar en modo degradado (ritmos → respaldo, captura de pantalla → solo recuperación)

Si encuentras una plataforma donde la instalación automática falla (entorno bloqueado, sin sudo), el orquestador imprime el comando de instalación manual por herramienta y continúa en modo degradado. Nunca abandonar la ejecución — la salida degradada sigue siendo mejor que nada.

El analizador de mapas de música (scripts/analyze-audiomap.py, Paso 4) tiene su propio preflight: instala librosa/numpy/soundfile con pip en la primera ejecución y, si la instalación falla (o se pasa --no-install), degrada a aubiotrack — el mapa de audio solo lleva entonces bpm + beats_sec con todos los demás campos null y rhythmic: false (la cuadrícula no es fiable aguas abajo).

El generador de BGM (scripts/generate-bgm.py, Paso 2 nivel ②) tiene la misma forma de preflight: instala con pip transformers/torch/soundfile/numpy (normal → --break-system-packages → --user); si la instalación falla, sale con la pista de respaldo de yt-dlp en lugar de bloquear — la obtención de BGM se degrada, nunca muere. Las pistas generadas fluyen hacia analyze-audiomap.py exactamente como cualquier otro BGM.

Contrato de Salida de URL-to-Video V2

Ruta preferida: ejecutar el orquestador de ingesta V2 y luego refinar el proyecto generado en Remotion.

node --experimental-strip-types <directorio-del-skill-instalado>/scripts/url-to-video.ts https://sitio-de-la-marca.com --out ./<nombre-de-marca>-video-lanzamiento

El orquestador debe emitir:

• brand-report.json
• scene-constitution.json
• asset-manifest.json
• story.md
• review.md
• un directorio de proyecto Remotion completo con public/brand/*, opcional public/brand/beat-map.json, src/theme.ts y datos de ingesta generados para que el andamio los consuma

Ruta de regresión:

node --experimental-strip-types <directorio-del-skill-instalado>/scripts/benchmark-suite.ts --match stripe-fintech --offline --reuse-brand-dir ./public/brand --install --verify --render

El ejecutor de benchmarks debe emitir archivos benchmark-result.json por benchmark y un resumen del conjunto para que los cambios en V2 puedan probarse bajo presión en lugar de discutirse.

Este skill no optimiza para renders finales con un solo clic. Optimiza para un primer corte de calidad de equipo de vídeo que Claude o un humano puedan empujar el último 10-20% dentro de Remotion.

Filosofía Central

1. Construir maquetas de interfaz de usuario del producto, no gráficos abstractos. LA INTERFAZ DE USUARIO ES LA ANIMACIÓN.
2. Raspar primero, diseñar después. Cada color, fuente, logotipo proviene del sitio real de la marca.
3. El ritmo es lujo. 40 segundos deja que el contenido respire. Nunca apresurar las características.
4. El gusto sobre las plantillas. Si parece "hecho por IA", rediseñar.
5. Una familia de fuentes, jerarquía de pesos. Solo rango 300-600, nunca negrita (700+).

Constitución de Tres Capas

• Capa fenoménica: cosechar evidencia del sitio web oficial. ScreenshotProof es obligatorio. VideoProof es preferido. Sin prueba visual, no hay vídeo creíble.
• Capa esencial: inferir un DesignArchetype a partir de la evidencia. Usar referencias para agudizar el juicio, nunca para anular la marca.
• Capa filosófica: rechazar los valores predeterminados reflejos antes de construir. El gusto vence a la conveniencia. La credibilidad vence al espectáculo. La realidad del producto vence a la energía de la plantilla.

Este skill absorbe explícitamente ideas de:

• agent-browser como el cosechador preferido de la capa fenoménica (headless, no secuestra la pantalla)
• awesome-design-md como una biblioteca de referencia de arquetipos de diseño empresarial
• taste-skill como una fuente de disciplina de ejecución
• Impeccable como la puerta de acabado y fuente de vocabulario anti-monocultivo

Ninguno de los anteriores son dependencias duras. Su valor está incrustado en el pensamiento y las puertas de este skill.

Reglas

Leer los archivos de reglas individuales para explicaciones detalladas y ejemplos de código:

Sistema de Diseño

• rules/typography.md - Pesos de fuente (máx. 600), jerarquía de tamaños (mín. 24px), seguridad de texto
• rules/color.md - Polaridad de marca, matiz neutro, regla 60-30-10, niveles de opacidad de acento
• rules/layout.md - Sistema de cuadrícula, escala de espaciado de 4px, zonas seguras, jerarquía de border-radius, anti-superposición
• rules/composition.md - Ley de Composición a Medida: base de atmósfera de vacío cero, momentos a sangre completa, tipo editorial de 200-320px, primero activos reales, diversidad de composición — además la LISTA NEGRA de SLOP compositivo (diagrama de píldoras con centro radial, tríptico de tarjeta hueca, objeto centrado en vacío, apertura eterna de primavera+brillo) y el manual de evidencia débil (puntuación < 40 → hacer crecer un mundo de marca desde la geometría del logotipo, nunca tarjetas vacías)

Contenido Visual

• rules/ui-mockups.md - Construcción de interfaz de usuario de producto, densidad, barras de título, coloreado de sintaxis, simulación de cursor, especificación de Giant Terminal de fondo ascendente (geometría probada + contrato de contenido + lista de fallos)
• rules/cards.md - Cuadrículas de tarjetas escalonadas, técnicas de relleno interior, cuerpos de tarjetas animados, sin duplicados
• rules/data-viz.md - Gráficos SVG, métricas animadas, tabular-nums, insignias de estado, anti-métrica-héroe
• rules/artifact-catalog.md - Leer antes de diseñar cualquier acto: 15 familias de artefactos a medida probadas en batalla (con punteros de origen) + inventario de andamio + registro de rotación de héroes entre producciones (~/.media/hero-ledger.jsonl) — la diversidad es una puerta, no una sugerencia

Movimiento y Producción

• rules/motion.md - Muelles (springs), easeOutExpo, escalonamiento por carácter, estándares de temporización, mantener-luego-saltar, vocabulario orgánico de AE (wiggle / overshoot / idle float / lookAt — conectado desde el skill hermano remotion-motion)
• rules/transitions.md - TransitionSeries, fugas de luz, fondos fluidos, texturas de ruido, paralaje
• rules/cinematic.md - Grano de película, viñeta, barrido de brillo, gradación de color, vidrio esmerilado, ajustes de render
• rules/beat-sync.md - Temporización impulsada por BGM desde audiomap.json: un analizador confiado incondicionalmente, ajuste a la cuadrícula de ritmo cuando rhythmic: true, ritmo de fase de energía/silencio cuando no, mantener-luego-saltar en picos de energía
• rules/narration-sync.md - Solo vídeos con voz en off/subtítulos: bloquear visuales a marcas de tiempo de palabras susurradas, limpieza de subtítulos/palabras de marca, ajuste de corte en límites de oración

Estrategia y Calidad

• rules/creative-moves.md - Cinco generadores creativos destilados de cada veredicto "impresionante" — literalismo idiomático, crecimiento de geometría de logotipo, alquimia de restricción, inversión semántica, prueba nativa del dominio
• rules/taste.md - Lista negra de basura de IA, principios de diseño, leyes de UX, lista de verificación de auto-revisión, ritmo
• rules/narrative.md - Estructura de 5 actos, ritmo de titular/UI, arco narrativo, constelación de logotipos
• rules/narrative-templates.md - Plantillas narrativas específicas de la industria (SaaS de IA, FinTech, Herramienta de Desarrollo, Comercio Electrónico, Salud, Ciberseguridad, Colaboración)
• rules/workflow.md - Raspar marca, sistema de iconos, estrategia de activos, incrustación de vídeo, organización de archivos, Mandato de Variedad de BGM (estado de ánimo derivado de la marca + deduplicación de registro global — nunca la misma pista dos veces)
• rules/media-resolve.md - Cascada de resolución de activos (registro → adoptar → programático → catálogo → web) con registro de congelación .media/manifest.jsonl; programático primero: mapas mundiales de puntos, marcas simple-icons, logotipos de modelos de IA de LobeHub como componentes en línea coloreables
• rules/archetypes.md - Arquetipos de diseño empresarial abstraídos de referencias de diseño de alta calidad
• rules/finish-gate.md - Protocolo de acabado estilo Impeccable, comprobaciones anti-monocultivo, criterios de bloqueo de render
• rules/qc-gates.md - Cuatro puertas de control de calidad basadas en evidencia: auditoría de assets (Paso 2.5), evidencia de fotogramas por acto (Paso 4), cableado de bucle de crítica (Paso 7.5), divulgación honesta (Paso 8). Solo evidencia — píxeles renderizados + Lectura, nunca grep

Archivos de Referencia (Patrones de Código)

• references/animations.md - FadeIn, ScaleIn, SplitText, Typewriter, CountUp, AnimatedPath
• references/audio.md - Sincronización de audio, detección de ritmo, silenciamiento de voz, tubería de VO (voz en off) de ElevenLabs TTS with-timestamps (temporización de palabras gratis, manejo de clave restringida, silenciamiento derivado de VO_CUES)
• references/components.md - GradientMesh, GlassPanel, FilmGrain, ProductFrame, BrandIcon
• scaffold/src/components/Transitions.tsx - 7 familias de transición (whipPan/maskWipe/push/zoomPunch/blurDissolve/flashThrough/glitchCut) — reemplazos directos para fade(); los vídeos completamente con fade son una violación
• scaffold/src/components/ShaderFX.tsx - GPU ShaderPlane (liquidWarp listo para producción; silk/lens en progreso) — renderizar con --gl=angle (integrado en el script de render del andamio)
• scaffold/src/components/Captions.tsx - Subtítulos con marcas de tiempo de palabra, 6 estilos (karaoke/scalePop/weightShift/neonGlow/kineticSlam/editorial)
• references/lottie.md - Integración @remotion/lottie, fuentes recomendadas
• references/visual-effects.md - Referencia de biblioteca de efectos visuales por niveles (lottie, motion-blur, confetti, flubber, three.js)

Referencia de API de Remotion (Incluida)

Este skill incluye la referencia completa de remotion-best-practices para patrones de API de Remotion. Cargar estos cuando necesites conocimiento específico de la API de Remotion:

• remotion-best-practices/rules/videos.md - Incrustación, corte, volumen, velocidad, bucle de vídeo
• remotion-best-practices/rules/audio.md - Importación, corte, volumen, velocidad, tono de audio
• remotion-best-practices/rules/timing.md - Curvas de interpolación, lineal, easing, spring
• remotion-best-practices/rules/transitions.md - Patrones de transición de escena
• remotion-best-practices/rules/compositions.md - Composiciones, fotogramas fijos, carpetas, props predeterminadas
• remotion-best-practices/rules/sequencing.md - Retardo de secuencia, corte, limitación de duración
• remotion-best-practices/rules/fonts.md - Google Fonts y carga de fuentes locales
• remotion-best-practices/rules/images.md - Uso del componente Img
• remotion-best-practices/rules/charts.md - Patrones de gráficos de barras, circulares, de líneas, de acciones
• remotion-best-practices/rules/light-leaks.md - Efectos de superposición @remotion/light-leaks
• remotion-best-practices/rules/lottie.md - Integración @remotion/lottie
• remotion-best-practices/rules/text-animations.md - Patrones de animación tipográfica
• remotion-best-practices/rules/calculate-metadata.md - Metadatos de composición dinámicos
• remotion-best-practices/rules/voiceover.md - Voz en off de IA con ElevenLabs TTS
• remotion-best-practices/rules/parameters.md - Parametrización de esquema Zod
• remotion-best-practices/rules/ffmpeg.md - Operaciones de FFmpeg para corte de vídeo

Flujo de Trabajo (8 pasos + 4 puertas de evidencia)

Cuatro puertas de control de calidad basadas en evidencia se ejecutan dentro de este flujo de trabajo — Auditoría de Assets (Paso 2.5), Evidencia de Fotogramas por Acto (Paso 4), Cableado de Bucle de Crítica (Paso 7.5), Divulgación Honesta (Paso 8).