Video teaser
Un teaser muestra una funcionalidad en unos pocos compases, cada uno con un enfoque claro, ambientado con música. Cada pantalla es una captura de pantalla real del producto; el movimiento proviene de la cámara, de filas recortadas de esas capturas que aterrizan en su propio lugar, y de los cortes que caen al ritmo de la música. El video completo es código (una página HTML y una tabla de tiempos, renderizada por HyperFrames), por lo que una nueva captura, un subtítulo cambiado o un clip de música diferente implica volver a ejecutar.
La persona dirige el gusto e iterará varias veces. Muestra las hojas de contacto antes de los renderizados completos, conserva cada renderizado y anota qué cambió y por qué. Comienza con los valores predeterminados en references/taste.md: son lo que convergió en una primera ronda de revisiones.
Configuración
- Node 22+ con npx (HyperFrames se ejecuta mediante
npx [email protected]; no hay nada que instalar), ffmpeg en PATH (HyperFrames lo necesita también para instantáneas y renderizados),uv(las herramientas Python declaran sus propias dependencias) y Playwright con Chromium en el proyecto del producto para las capturas. Los renderizados cargan GSAP y la fuente Inter desde una CDN, por lo que necesitan conexión de red. SK=<directorio de esta skill>/scripts.- Trabaja en una carpeta fuera de los archivos rastreados de cualquier repositorio (una carpeta
.logs/<video>/en gitignore, o una carpeta de pruebas):
<work>/
assets/<theme>/ capturas y boxes.json, por pase de captura
capture/ los scripts de captura para este producto
video/ index.html y timeline.js (copiados del ejemplo); assets/ contiene las capturas, el icono de la marca, la música
NOTES.md cada versión y por qué cambió, comandos de reconstrucción
1. Brief
Confirma en un breve intercambio, ofreciendo valores predeterminados:
- Duración: 10 s a menos que se indique lo contrario. Por debajo de un límite máximo, recorta compases, nunca aceleres el movimiento.
- Los compases: tres o cuatro, cada uno con una tarea en una pantalla (ingresar una URL, revisar lo encontrado, ver el resultado, la marca). Cada compase obtiene un subtítulo de dos o tres palabras, sin números.
- Datos de ejemplo que se lean de un vistazo: un sitio conocido, para que los resultados (nombres de competidores, favicons) sean reconocibles.
- Aspecto: los tokens de tema del producto (el modo oscuro es un buen valor predeterminado para un teaser) y su icono de marca real, tomado de su sitio web en vivo, no de una marca que dibujes.
- Música: el archivo, y si cualquier fragmento de 10 s servirá (ver paso 5).
- Qué rama o árbol de trabajo tiene la interfaz de usuario más nueva para cada pantalla. Verifica si está detrás de su remoto antes de capturar.
2. Captura
Capturas de pantalla reales a 1440x900, 2x, con $SK/capture.mjs (el mismo ayudante que narrated-video): fotogramas de escritura para cualquier cosa escrita, capturas altas (2400 px) para cualquier cosa sobre la que la cámara se desplace hacia abajo, cuadros medidos para cada elemento que una escena enmarque, del cual corte filas o sobre el que haga clic. Pasa { colorScheme: 'dark' } a cap.page() para el modo oscuro. Nunca dibujes interfaz de usuario ni edites píxeles. Detalles, incluidos fotogramas de animación congelada y captura de un estado de carga sin pagar por la solicitud: references/capture.md. Revisa cada captura antes de usarla.
3. Componer
Copia examples/openseo-ai-visibility/video (index.html, timeline.js) en la carpeta de trabajo, coloca las capturas, el icono de la marca y la música en video/assets/, y reescribe timeline.js: la tabla de tiempos, los subtítulos, la paleta, las rutas y alturas de las capturas, los cuadros medidos, las claves de cámara de cada escena y el puntero. index.html construye cada escena a partir de ese archivo: las filas se cortan de su captura usando los cuadros medidos. Cómo funcionan las piezas y los números que importan: references/composition.md.
4. Borrador y revisión
cd video
npx --yes [email protected] lint # debe informar 0 errores
npx --yes [email protected] snapshot --at 0,1.2,2.4,2.6,3.4,4.4,6.0,8.2,9.5 --no-end # en snapshots/
Las instantáneas toman segundos, por lo que úsalas en lugar de borradores renderizados. Captura en instantánea cada inicio de escena, clic, entrada de subtítulo y el centro de cada disolución, y revísalas (cada ejecución también escribe hojas de contacto): un enfoque por fotograma y centrado, el subtítulo libre de la cosa enfocada, sin borde de página en blanco mientras la página está plana, sin fila aún faltante al final de una revelación. Luego verifica un fotograma de resolución completa de cada escena para ver si el texto es nítido.
5. Música
uv run $SK/beats.py song.mp3 # tempo, sonoridad por segundo, cada golpe
uv run $SK/beats.py song.mp3 --window 51.9 10 # los golpes de un clip candidato en tiempo de video
Elige el clip, escribe su inicio en el elemento <audio> en index.html y sus tiempos de golpe en la tabla de tiempos, y mueve los cortes a ellos: el clic principal en la gota, cada cambio de escena en un golpe, el logotipo en el golpe más fuerte. Elegir el clip y mapearlo: references/music-sync.md.
6. Renderizar y verificar
npx --yes [email protected] render -o renders/<video>-vN.mp4 --fps 60 --crf 14 \
--video-frame-format png --experimental-fast-capture=false # unos 15 s para 10 s de video
uv run $SK/verify-sync.py renders/<video>-vN.mp4 <tiempos de golpe planificados...> # cada golpe dentro de un fotograma; sale con 1 si no
uv run $SK/sheet.py renders/<video>-vN.mp4 renders/sheet-vN.png <tiempos...>
Nombra los renderizados por versión y consérvalos todos; la persona los compara. Una imagen fija para compartir (una imagen social, una miniatura) es una instantánea 4K de un momento elegido: npx --yes [email protected] snapshot --at 7.3 --no-end --zoom 0,0,1920,1080 --zoom-scale 2 -o stills escribe un PNG de 3840x2160.
7. Revisar e iterar
Proporciona la ruta del mp4 (y cómo abrirlo), los compases y sus tiempos, y cualquier cosa que difiera de la solicitud. Registra cada ronda en NOTES.md. La primera versión del ejemplo trabajado tomó siete rondas; lo que cambió en cada una está en examples/openseo-ai-visibility/NOTES.md.
Reglas estrictas
- Solo capturas reales. Una revelación de fila puede cubrir brevemente filas con el fondo propio de la tabla (muestreado de la captura) mientras las filas reales aterrizan encima; una vez que han aterrizado, el fotograma es la captura.
- Verifica que las capturas no contengan secretos ni datos personales (claves, correos electrónicos, nombres de otras personas, URL de localhost) antes de renderizar.
- La música y las capturas permanecen en la máquina de la persona; no publiques nada sin que te lo pidan.
- Restaura cualquier archivo rastreado que la construcción o vista previa del producto regenere en su repositorio.
Los errores que más tiempo cuestan están en references/gotchas.md.