pedro-cmyks/skill-video-explicativo

Vídeo explicativo, estilo de casa

Cada vídeo comparte un mismo aspecto y un mismo lenguaje de movimiento, construido inicialmente para un CRM explicativo. La referencia dorada es reference/desk-crm-explainer.html (84.5 s, 9 escenas, un producto ficticio llamado Desk CRM) y su cuadrícula de fotogramas reference/contact.png. Ante la duda, abre la referencia y copia el patrón.

Archivos en este skill:

Ruta	Qué es
templates/explainer-template.html	Empieza aquí. Kit de ayudas completo más 3 escenas de ejemplo (título, tarjetas con clic del cursor, cierre).
templates/apply-theme.mjs	Sella un tema de themes/ en el HTML del vídeo (--theme studio --html explainer.html, --list). Ejecuta en el lugar.
themes/*.json	Aspecto y sonido por tema (house, studio, ember, tide): colores, degradados, fuente, radio de tarjeta, marca de logotipo, clave musical, progresión, tempo, arpegio. house es el predeterminado.
templates/render.mjs	Avanzador de fotogramas de Playwright canalizado a ffmpeg. Vídeo, póster, hoja de contactos, fotogramas fijos. Ejecuta en el lugar, nunca se copia.
templates/compose.py	Banda sonora musical numpy más SFX sincronizados con los tiempos locales de la escena, masterizada y multiplexada. Cópialo por cada vídeo.
templates/voiceover.sh	Voz en off opcional de macOS say, atenuada bajo la música. Ejecuta en el lugar con argumentos.
checklist.md	Lista de verificación de crítica. Cada elemento debe pasar antes de la entrega.
reference/	El HTML de referencia y su hoja de contactos. Nunca editar.
examples/tidy-tasks/	Un vídeo corto terminado (20 s) construido a partir de la plantilla: HTML, su compose.py y hoja de contactos.

Configuración, una vez por máquina: npm install y npx playwright install chromium en la carpeta del skill (tiene un package.json), además de ffmpeg y Python 3 con numpy. render.mjs explica lo que falta cuando no puede iniciar.

El aspecto

Un lenguaje de movimiento, muchos aspectos. Todo lo siguiente describe el tema predeterminado, house. Un tema cambia las fichas de paleta, los degradados, la fuente, el radio de la tarjeta, la marca del logotipo y la música; nunca cambia el movimiento, el cursor, los subtítulos ni la lista de verificación. El mismo tema más las mismas escenas da el mismo vídeo, fotograma a fotograma. Los temas viven en themes/*.json (house, studio, ember, tide); node $SK/apply-theme.mjs --list los muestra, y --theme <nombre> --html explainer.html sella uno en el bloque THEME en la parte superior del HTML. compose.py lee la configuración de música de ese mismo bloque. El briefing nombra el tema; sin uno, usa house. Para un tema nuevo, copia un json, cambia las fichas, mantén gr, am y rd reconocibles como verde, ámbar y rojo, elige una fuente que exista en la máquina que renderiza, y comprueba la hoja de contactos para el contraste antes de usarlo. Tema por escena (opcional): pega más objetos de tema en THEMES y dale a una escena theme: 'studio'. La paleta, los degradados y el radio de la tarjeta se transforman a lo largo del fundido cruzado de 1 s; la fuente y la marca del logotipo cambian en el límite; la música se queda con el primer tema. Úsalo cuando el vídeo trate sobre la variedad misma; un tema es el caso normal.

Escenario: SVG 1920x1080, fuente 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif (font del tema).

Fondo, tres capas, nunca se cambian dentro de un tema:

• degradado radial centrado en 50% / 30%, r 75%: #172638 -> #111b26 (60%) -> #0f1720
• cuadrícula de puntos: patrón de 40 px, r 1.6 puntos #22303f al 70% de opacidad
• banda de subtítulos: 200 px inferiores (y 880..1080) difuminándose a #0b121a al 90%

Fichas de paleta (C en la plantilla, mantén los nombres):

Ficha	Hex	Uso
bg	#0f1720	página, destino de fundido a negro
s1	#141d27	superficie de tarjeta
s2	#1b2733	filas, inserciones, paneles internos
bd	#2a3a4b	bordes, líneas de cuadrícula, puntos vacíos
tx	#e6edf3	texto principal
mu	#a0b1c5	texto secundario, encabezados de columna
bl	#3b82f6	acción, selección, paquetes, explosión del cursor, palabra de acento de marca
gr	#2fca73	hecho, vivo, ganancia, éxito
am	#f59e0b	atención, caliente, valor atípico
rd	#ef4444	solo pérdida o error
off	#3a4a5c	punto de estado inactivo
paper / ink	#f3f6fa / #1b2733	páginas de documentos claros
light blue	#93c5fd, core #dbeafe	lazo, resaltes, núcleo de paquete
click spark	#ffd166	radios alternos de la explosión de clic

Degradados: logoG azul #3b82f6 a verde #2fca73 (diagonal) para el mosaico del logotipo y la barra subrayada; hotG ámbar a rojo para barras "calientes"; blueBar #2563eb a #3b82f6; areaG verde 38% a 0 debajo de los gráficos.

Formas:

• Tarjeta: radio 26, relleno s1, trazo bd 2 px, sombra dy 16, desenfoque 20, negro 42% (card()).
• Fila: radio 14..18, relleno s2, altura 52..80, paso 64..96 px.
• Chip: píldora completa, altura 40, color al 16% de relleno, etiqueta 24 px / 600 en el color (chip()).
• Botón principal: radio 22, altura 84, bl sólido, blanco 34 px / 700 etiqueta, pulso de brillo suave hasta que se hace clic.
• Sombra pequeña para iconos y píldoras: dy 8, desenfoque 8, negro 45% (#shs).
• Ventana de aplicación (referencia dashboard()): barra superior de 66 px en s2 con puntos de semáforo r 8 (rd, am, gr al 80%), barra lateral de 214 px en #111922, elementos de navegación 48 de alto radio 14, elemento activo bl al 20%, mosaicos KPI radio 18.
• Punto de estado r 14; anillo de avatar 4 px más un halo del 25%; candado de lock().
• Marca de error: logotipo 46 px más nombre 28 / 700 en (56, 40), opacidad 85%, mostrado desde la escena 2 hasta el cierre.

Escala tipográfica (px / peso): marca denominativa 132 / 700 (cierre 96), eslogan 58 / 500 mu, línea de cierre 56 / 600, subtítulo 50 / 600, números grandes 52..64 / 700 tabular, títulos de tarjeta 34..40 / 700, texto de fila 26..28 / 600, etiquetas y chips 24 / 600, nada por debajo de 22. Espaciado entre letras de la marca denominativa -1%.

Reglas de composición:

• El contenido vive en y 120..860 y x 140..1780. La banda de subtítulos y la esquina de la marca de error se mantienen despejadas. Eso incluye el cursor en reposo: mantén su punta en y <= 800 (la flecha alcanza aproximadamente 75 px por debajo de la punta).
• Cualquier cosa dimensionada al texto (tachados, subrayados, cuadros de resalte, píldoras) toma su ancho de textW(str, size, weight), nunca una constante adivinada.
• Nunca dejes dos tercios del fotograma vacíos. Cuando el contenido se divide entre izquierda y derecha, conecta el medio con líneas de flujo, paquetes o un abanico de páginas. Desplaza un grupo de escena completo (G(s, {x: SX})) para volver a centrar.
• Una idea por escena. Como máximo dos tarjetas una al lado de la otra más una tarjeta de detalle.
• Los datos siempre son ficticios: Cliente A, Northwind, Maple Ridge, Bluebird, Harbor Point, ACC 01.

Lenguaje de movimiento

Kit de easing (en la plantilla): E cúbico in out (predeterminado para todo), EO cúbico out (asentamiento), EB back out con aproximadamente 10% de sobreimpulso (pop: tarjetas, chips, insignias, iconos), esine para trazados dibujados, fadeIO(t, a, b, 0.35) para opacidad del cursor, ease out quint 1 - (1 - x)^5 para contadores. Determinismo: solo rng(seed), nunca Math.random o reloj de pared.

Entradas:

• Tarjetas: fundido en 0.5 s más ascenso de 20 px en 0.6 s, o escala mix(0.92, 1, EB) en 0.7 s.
• Filas de lista: escalonamiento 0.08..0.12 s, deslizamiento desde x -20 / -30 o y +16, 0.5 s cada una.
• Pops: EB en 0.5..0.7 s. Las insignias escalan 0.7 -> 1.
• Marca denominativa: barrido de recorte que se abre desde el centro en 0.8 s con un ascenso de 34 px; la marca del logotipo se dibuja con pathLength.

Kit de cursor (drawCursor, curPos):

• Ruta de flecha blanca ARROW, contorno #0b1118 3.4 px, sombra dx 4 dy 7 desenfoque 4 al 50%, escala base 1.1.
• keys: [[t, x, y], ...] en segundos locales, (x, y) es la punta de la flecha. El deslizamiento usa cúbico in out más un arco lateral del 12% de la distancia (máx. 110 px). La inclinación sigue la velocidad horizontal (0.35 deg por px, máx. 14 deg).
• Deslizamiento típico 0.7..1.5 s. Entrada desde fuera del fotograma en (1880, 1080) aproximadamente 1.5 s después de la escena.
• Llegada al menos 0.15 s antes del clic y siéntate exactamente en el centro del control.
• Clic: aplastar x +16% y y -22% que culmina en el clic (ventana 0.34 s comenzando 0.1 s antes), luego una explosión de 0.6 s: anillo azul r 8 -> 54 adelgazando 6 -> 1 px, más 8 radios alternando blanco / #ffd166.
• El control pulsado se hunde con press() a escala 0.93 y su pulso de brillo se detiene.
• Después de la acción, deslízate a un lugar de descanso tranquilo (entre tarjetas, por ejemplo, (1010, 800)) y mantén. Funde con la escena.
• trail añade un cometa azul de 12 puntos mientras dibuja; pos reemplaza las teclas para trazados personalizados (el lazo).

Movimientos característicos (escena de referencia para copiar):

• Lazo: el cursor dibuja una elipse temblorosa con esine, discontinua #93c5fd 5 px (16 12, fluyendo), se cierra sólida con un destello de brillo de 0.35 s y relleno del 7%, luego los iconos vuelan a lo largo de trazados curvos hacia un marco fantasma que se solidifica en la ventana de la aplicación (sBefore).
• Paquetes: punto brillante (r 22 brillo más r 12 núcleo #dbeafe) con una cola de cometa de 6 puntos en una curva S, cúbico in out en 1.2..1.45 s, línea guía discontinua que fluye a 24 px/s, el remitente parpadea azul, anillo verde a la llegada (packet(), sClose).
• Puntos de estado: gris -> verde con una explosión de anillo (r 14 -> 40, 0.6 s) y un pop de 1.25x, luego brillo respiratorio 0.25 + 0.2 sin(3t). Advertencia: ámbar, anillo repetido cada 1.3 s, sacudida corta (statusDot(), sStatus).
• Los gráficos se dibujan: pathFrom revela la línea en 1.5..3.7 s, 6..7 px verde, relleno areaG, punto principal brillante (r 18 brillo más r 10 blanco). Las barras crecen desde cero escalonadas 0.18 s. Las celdas del mapa de calor aparecen escalonadas (sAlgos, sHistory).
• Contadores: cuentan hacia arriba con ease out quint en 1.0 s, numerales tabulares.
• Abanico de páginas: las páginas salen del botón, se abren en abanico a través del centro (rotaciones -10, -3.5, 3.5, 10 deg, salto de 60 px), luego cada una salta 110 px a una bandeja a escala 0.56, escalonadas 0.55 s; la bandeja brilla en verde cuando está llena (sReports).
• Abanico de organización: las líneas se dibujan desde un avatar pulsado a las columnas del equipo, los candados se cierran de golpe, un contorno discontinuo agrupa el escritorio (sBook).
• Listas de verificación (kit de plantilla): checkbox() casilla de verificación redonda que se hunde, aparece verde y dibuja su marca de verificación en el clic; strike(x, y, textW(...) + 8, u) tacha la etiqueta; cada marca envía un packet() a un progressRing() que se alivia un paso por llegada y brilla cuando se cierra. Una escena de lista es casilla de verificación + tachado + paquete + anillo (ver examples/tidy-tasks/).

Transiciones: las escenas son consecutivas. Cada una se funde en sus últimos 0.5 s y la siguiente se funde en sus primeros 0.5 s con un asentamiento de escala 0.985 -> 1 (una inmersión a través del fondo). La primera escena comienza sólida, el cierre termina con su propio fundido a bg de 0.6 s. Un fotograma de transición está intencionalmente casi en blanco; no lo "arregles".

Mantenciones y movimiento inactivo: algo se mueve en cada fotograma. Usa desplazamientos de guiones fluidos, brillos respiratorios (sin(3t)), flotaciones bob() de 3..5 px, giradores lentos (60 deg/s), iconos a la deriva (18 / 14 px). Mantén al menos 1.5 s de espera después del último golpe de una escena para que el subtítulo termine de leerse.

Reglas de copia

• Subtítulos en inglés, mayúscula inicial, terminando con un punto. Una o dos líneas, aproximadamente 48 caracteres máx. por línea.
• Tiempo en pantalla (el subtítulo se funde en 0.45..1.05 s, sale a dur - 0.75) debe ser al menos 1 s por cada 4 palabras y nunca menos de 2.5 s. En la práctica, una escena nunca es más corta de aproximadamente 5 s.
• Sin guiones como puntuación (sin em dash, en dash o guión con espacios) en subtítulos o en pantalla. Usa comas y puntos.
• Solo afirmaciones verdaderas. Los números en pantalla (clientes, cuentas, intervalos) provienen del usuario o del producto, nunca inventados. Los números de la plantilla están marcados como PLACEHOLDER. ¿Sin números reales (teaser, producto ficticio)? Haz que el cierre STATS sean palabras simples, ['Simple lists', 'Daily focus', 'Clear progress']: las píldoras aparecen en lugar de contar.
• Sin datos reales de clientes: sin nombres reales, números de cuenta, saldos, correos electrónicos o logotipos de clientes. Usa el conjunto ficticio.
• El título y el cierre no llevan subtítulo; el eslogan y la línea de cierre hacen ese trabajo.

Arquitectura

• Un único archivo HTML autónomo, sin red, sin librerías. Escenario SVG más un script IIFE.
• render(t) es puro: reconstruye el innerHTML de #frame solo a partir de t. Expuesto como window.renderAt(t), con window.TOTAL_DURATION y window.SCENES_INFO. Sin #manual en la URL, buclea en tiempo real.
• SCENES = [{ id, start, dur, fn, cap }], consecutivas. Mantén cada entrada en una línea en ese orden de clave y const TOTAL = <number>; como literal: compose.py analiza ambos con regex.
• Una escena es fn(lt, dur) -> { svg, cursor? } con tiempo local lt. Todos los tiempos de beat dentro de una escena son constantes locales (click, send(i), onT(i)), que es lo que el script de audio refleja.
• Ayudantes: matemáticas (clamp lin E EO EB mix f rng fadeIO bob), svg (T G R Ci card chip check avatar lock logo wordmark textW), gráficos (pathFrom walk scalePts spark areaChart bez), movimiento (ring statusDot packet press progressRing checkbox strike), cursor (curPos drawCursor), caption. G() devuelve '' cuando la opacidad es ~0, por lo que las capas ocultas son libres.
• Orden de dibujo: contenido de la escena, subtítulo, marca de error, cursor al final.
• const STATS = [...] permanece en una línea al inicio de una línea: compose.py lo lee para los sonidos del cierre.

Flujo de trabajo

1. Briefing. Audiencia, producto, 3..6 afirmaciones verdaderas con números reales, duración (60..90 s completo, 20..40 s teaser), dónde se publicará, y el tema (house, studio, ember, tide, o un nuevo json).
2. Storyboard. Una tabla con id de escena, duración, subtítulo, metáfora visual, acción del cursor y tiempos de beat. Arco: gancho (logotipo, eslogan) -> antes (el dolor) -> una función por escena -> cierre (estadísticas o píldoras de palabras, línea de cierre). Verifica la sincronización de los subtítulos con las reglas de copia antes de construir.
3. Construir. En la carpeta de trabajo, con SK establecido en la carpeta templates de este skill (por ejemplo SK=~/.claude/skills/explainer-video/templates): cp $SK/explainer-template.html explainer.html && cp $SK/compose.py . Nunca edites las copias del skill. Aplica el tema: node $SK/apply-theme.mjs --theme <nombre> --html explainer.html (salta para house). Establece BRAND, reemplaza la escena de tarjetas de ejemplo, añade escenas en el bloque marcado, actualiza los inicios y TOTAL, establece STATS. Toma patrones de la referencia.
4. Vista previa. Abre el HTML en un navegador (buclea), luego renderiza fotogramas fijos en cada clic, aterrizaje y límite: node $SK/render.mjs --html explainer.html --stills 3.2,4.9,8.6 --stills-dir critique/v1.
5. Renderizar. node $SK/render.mjs --html explainer.html --out name.mp4 escribe el MP4, -poster.png y -contact.png.
6. Criticar. Lee la hoja de contactos y los fotogramas fijos contra checklist.md. Cada elemento debe pasar; corrige, vuelve a renderizar.
7. Entregar. MP4 final, póster, hoja de contactos. Nombra product-scene-theme.mp4 (por ejemplo, desk-crm-84s-house.mp4).

Nunca copies el reproductor de renderizado ni el aplicador de temas dentro del directorio de trabajo: se ejecutan en el lugar desde la carpeta del skill. El sintetizador de audio se copia porque necesitas añadir beats locales de SFX. Renderiza desde la carpeta de trabajo.

Reglas de la línea de comandos

• $SK es la carpeta templates del skill. render.mjs y apply-theme.mjs se ejecutan desde allí.
• compose.py se copia al directorio de trabajo, se edita localmente, se ejecuta en el lugar.
• voiceover.sh se ejecuta desde $SK con argumentos.
• checklist.md se lee desde la carpeta del skill. Copia su contenido en la respuesta si se te pide que critiques.
• Para los PDF de guión gráfico, usa la salida de markdown de Claude para generar tablas; no se incluye ningún generador de PDF aquí.
• Nunca edites ningún archivo dentro de $SK excepto los temas json y el propio skill si mejora. El trabajo del usuario vive en su carpeta de trabajo.
• Si el usuario pide que abras el HTML renderizado, llama a open (macOS) o xdg-open (Linux).