Título cinético de seis segundos

Kinetic Title Drop

Una película de seis segundos, 1920×1080, solo texto, en tres tiempos:

1. Una primera palabra enorme abre el encuadre con una línea diagonal fina que la atraviesa, luego se coloca en la esquina superior izquierda.
2. Una segunda palabra aparece como contorno y se rellena con el color de acento.
3. Una línea de cierre entra desde la derecha con un efecto de arrastre, y una barra de acento aparece debajo. Un chip y un pie de página aparecen gradualmente, todo se mantiene y luego sale limpiamente.

La plantilla es una composición de HyperFrames. Tú completas un resumen, un script lo escribe en la plantilla y HyperFrames verifica y renderiza el MP4 localmente. El texto se mide con la fuente real y se dimensiona para llenar el encuadre, de modo que las palabras cortas y largas ocupen el mismo espacio.

Lo que necesitas

• Node.js 22 o superior y FFmpeg en el PATH.
• HyperFrames se ejecuta mediante npx, fijado a la versión con la que se probó esta plantilla: npx --yes [email protected].
• El primer renderizado descarga un Chrome headless. Si render dice que falta Chrome, ejecuta npx --yes [email protected] browser ensure una vez.
• Acceso a la red a cdn.jsdelivr.net, que sirve GSAP a la plantilla. Consulta Solución de problemas si está bloqueado.

La carpeta de esta habilidad es <skill> debajo: la carpeta en la que se encuentra este SKILL.md.

Pasos

1. Obtén el texto

Pregunta todo lo que no puedas deducir. Cada campo tiene un límite; el script rechaza valores que lo superen.

Campo	Qué es	Límite	Buen ejemplo
line1	Primera palabra. Aparece enorme, luego se coloca arriba a la izquierda.	10	Ship
line2	Segunda palabra. Aparece como contorno, se rellena con el acento.	6	it
line3	La línea final. La más grande, con la barra debajo.	12	today.
chip	Pequeña etiqueta, arriba a la derecha. Versión, fecha o estado.	24	v2.0 · Out now
metaLeft	Pie de página, izquierda. Qué es, en pocas palabras.	60	Release notes · 14 fixes
metaRight	Pie de página, derecha. Normalmente una URL o un identificador.	40	relay.example/changelog

Consejos de escritura:

• Las líneas 1 y 2 comparten la fila superior, por lo que juntas deben leerse como el inicio de una frase ("Ship / it", "Notes / that", "Meet / the"). La línea 3 la completa.
• Todo está en mayúsculas. Las palabras individuales se leen mejor; la línea 3 puede ser dos palabras cortas.
• Mantén line1 + line2 por debajo de unos 12 caracteres, o la fila superior se vuelve pequeña en comparación con la línea final.
• El pie de página se mantiene durante unos 2 segundos, así que mantenlo escaneable.

2. Elige los colores

Tres colores hexadecimales: ground (fondo), ink (texto) y accent (contorno, relleno, barra, chip). Usa los colores de la marca si los tienes. De lo contrario, empieza con un preajuste:

Preajuste	ground	ink	accent
Ember	#0f1013	#f5f4ef	#ff5b2e
Fieldnote	#f1ede4	#18201c	#2f6b4f
Cobalt	#0b1020	#eef1ff	#5b7cff
Paper	#fbfaf7	#111111	#e8462b
Lime	#101410	#f2f5ee	#b6f23a

ink necesita un fuerte contraste con ground; accent necesita al menos 3:1 contra ground, porque la línea 2 se dibuja con él. check mide ambos y te indica si alguno falla.

3. Crea el proyecto y aplica el resumen

cp -r <skill>/template ./title-drop
cd title-drop

Escribe brief.json en el proyecto con los campos de los pasos 1 y 2:

{
  "line1": "Ship",
  "line2": "it",
  "line3": "today.",
  "chip": "v2.0 · Out now",
  "metaLeft": "Release notes · 14 fixes · 3 new features",
  "metaRight": "relay.example/changelog",
  "ground": "#0f1013",
  "ink": "#f5f4ef",
  "accent": "#ff5b2e"
}

Luego escríbelo en la plantilla:

node <skill>/scripts/apply-brief.mjs . brief.json

Comprueba cada valor contra las variables declaradas de la plantilla (tipo, longitud, formato de color) y enumera todos los problemas de una vez si algo está mal. Corrige el resumen y ejecútalo de nuevo. Puedes omitir campos para mantener el valor actual.

Dos resúmenes completos están en <skill>/examples/.

4. Verifica

npx --yes [email protected] check --json

check analiza el archivo, lo reproduce en un navegador, mide el diseño a lo largo del tiempo y prueba el contraste. "ok": true sin hallazgos significa que está listo. Corrige cualquier hallazgo antes de renderizar. Los que el texto puede causar:

• contrast_aa_failure: un par de colores está demasiado próximo. Usa el suggestedColor que proporciona, o elige un tono más oscuro o más claro.
• text_box_overflow, clipped_text o content_overlap: un valor es más largo de lo que espera la plantilla, normalmente un pie de página o un chip que se superpone a su vecino. Acórtalo.

No cambies la estructura de la plantilla para silenciar un hallazgo. Corrige el resumen en su lugar.

5. Mira antes de renderizar

npx --yes [email protected] snapshot --at 0.3,1.6,3.6,5.2 -o snapshots

Esto escribe fotogramas PNG en snapshots/. Ábrelos y comprueba el fotograma de apertura, la llegada de la segunda palabra y el fotograma final mantenido. Busca palabras que choquen con el chip, un pie de página que se superponga a la barra o un acento que desaparezca sobre el fondo.

6. Renderiza

npx --yes [email protected] render --quality delivery -o renders/title-drop.mp4

El package.json del proyecto tiene los mismos comandos que npm run check y npm run render. Usa --quality draft para una prueba rápida y --fps 60 para un resultado más suave en redes sociales.

7. Entrega

Dale a la persona la ruta a renders/title-drop.mp4 y una imagen fija del paso 5. Indícale qué campos cambiar para otra versión: solo necesita editar brief.json y volver a ejecutar los pasos 3 a 6.

Mapa de tiempos

Tiempo (s)	Qué sucede
0.00	line1 ya está en pantalla, grande y centrada, como miniatura
0.00–0.42	Una línea diagonal fina de acento la atraviesa y luego se desvanece
0.80–1.35	line1 se mueve a la esquina superior izquierda
1.35–1.77	line2 aparece como contorno
1.90–2.06	line2 se rellena con el acento
2.05–2.55	line3 entra desde la derecha
2.60–3.05	La barra de acento aparece debajo de line3
3.10–3.50	El chip, el pie de página y las marcas de esquina aparecen gradualmente
3.50–5.45	Se mantiene
5.45–5.80	Todo sale hacia arriba con un breve desenfoque

Varias versiones a la vez

Para renderizar muchas variantes (una por idioma, producto o fecha), escribe un array JSON de resúmenes y renderízalos de una sola vez. Cada objeto es un resumen completo o parcial, fusionado con los valores ya aplicados:

npx --yes [email protected] render --batch variants.json --quality delivery -o "renders/{index}.mp4"

--batch establece variables por renderizado, por lo que no necesitas apply-brief para cada uno. La ruta de salida necesita un marcador de posición como {index} o un campo como {line3}, o los archivos se sobrescribirán entre sí. Ejecuta check primero en un resumen representativo y mira el texto más largo en una instantánea.

Solución de problemas

• El renderizado se cuelga, luego muestra un fotograma estático, o informa sub_timeline_script_failure. GSAP no se cargó. Si tu red bloquea cdn.jsdelivr.net, ejecuta npm i [email protected] en el proyecto, copia node_modules/gsap/dist/gsap.min.js a assets/vendor/ y apunta <script src> en index.html a assets/vendor/gsap.min.js.
• Las palabras parecen tener la fuente incorrecta. La plantilla usa League Gothic y JetBrains Mono, que HyperFrames incluye. Si cambias las fuentes, usa otra familia incluida (npx hyperframes docs compositions las lista) o añade un @font-face, o check fallará.
• Los colores no cambiaron. Vuelve a ejecutar apply-brief desde el paso 3 y comprueba que imprimió Applied N values. Editar los colores CSS :root no tiene efecto; las variables ganan.
• ¿Quieres una duración diferente? Mantenla en 6 s. Los tiempos están sincronizados para caer en esa ventana; estirar la duración raíz solo alarga la pausa.

Archivos

• template/: el proyecto HyperFrames (index.html, hyperframes.json, package.json).
• scripts/apply-brief.mjs: valida un resumen y lo escribe en la plantilla. Sin dependencias.
• examples/relay-v2/ y examples/fieldnote-beta/: resúmenes completos. Las vistas previas en Lookbk se renderizan a partir de estos.
• NOTICE.md: software de terceros que utiliza esta habilidad.