portfolio-reel

Portfolio reel (plantilla: "skill 2")

Esta habilidad crea un reel de presentación de ~30 segundos a partir de un único archivo de configuración, promo.json. Una escena en canvas dibuja cada fotograma en Chrome sin cabeza y reproduce los clips del usuario dentro de las tarjetas. No se utiliza metraje de archivo, video generado por IA ni servicios de plantillas. La estructura sigue el ritmo del reel de referencia skill2.MP4 (un intro de creador de TikTok). Solo se copian las técnicas, nunca su metraje, palabras, nombres, identificadores o marca de agua.

Tiempo (3 secciones)	Escena
0-2.3 s	degradado mostaza, dos grandes círculos suaves se deslizan; hook[0] se escribe palabra por palabra, luego hook[1] aparece grande y en negrita
2.3-2.9 s	un círculo blanco se levanta desde abajo; el avatar aparece como un pequeño disco amarillo
2.9-6.4 s	héroe de perfil sobre blanco: el avatar crece hasta convertirse en un círculo grande (con un anillo amarillo o un duotono amarillo), luego la píldora de badge delineada con una estrella, hello palabra por palabra, roles separados por barras finas, y una píldora de button negra con ↑ en un círculo blanco. La flecha se dispara hacia arriba y la página se desplaza
6.4-20.5 s	una página por sección (4.6 s cada una) sobre gris claro con sombras suaves de luz de ventana: un título degradado, luego 1-3 tarjetas redondeadas que siguen el desplazamiento y flotan. Los videos se reproducen, las imágenes se acercan lentamente. Las tarjetas verticales son altas, las horizontales anchas, las filas mixtas se escalonan
20.5-24.4 s	una luz amarilla emerge desde la parte inferior izquierda de regreso al degradado; cta[0], luego cta[1], palabra por palabra
24.4-30.3 s	una tarjeta de perfil negra aparece desde un punto (avatar o logo, handle, name, hasta 3 stats contadores, dos botones). Un cursor hace clic en el primer botón, que se vuelve gris y muestra clicked, luego la tarjeta gira en 3D mostrando su back

La duración es de aproximadamente 30 s con 3 secciones, 4.6 s más o menos por sección, y un poco más larga con textos extensos.

Dos interfaces: "ui": "classic" (predeterminada) o "app"

app mantiene la misma línea de tiempo y textos, pero cada escena es una pantalla de aplicación moderna sobre un degradado de malla en movimiento:

Tiempo	Escena app
hook	una barra de búsqueda de cristal escribe hook[0] hook[1]; un menú desplegable de resultados lista a la persona (avatar, nombre, roles) y las dos primeras secciones; el cursor hace clic en la persona
hero	el resultado clickeado crece hasta convertirse en un panel tipo bento de mosaicos de cristal: un mosaico de foto alto (nombre y handle), el mosaico de saludo (badge, hello con resaltador, chips de rol), un mosaico de estadísticas que cuenta profile.stats, un mosaico de button que el cursor clickea, y un mosaico que lista las secciones
sections	un carrusel horizontal, una diapositiva por sección: un número grande, el título, "n trabajos", una barra de progreso en la parte superior. El trabajo se muestra en maquetas de dispositivos: clips horizontales en una ventana de navegador (luces de tráfico, barra de direcciones site/title-de-la-sección), clips verticales en un teléfono, en cascada hacia el lado derecho
cta	una pantalla de chat: puntos de escritura, luego cta[0] y cta[1] llegan como burbujas de mensaje de la persona (la última en el color de acento)
card	una tarjeta de perfil con un banner de portada degradado, avatar superpuesto, handle, nombre, estadísticas contadoras y dos botones en píldora; el cursor hace clic en Seguir (confeti), luego gira para mostrar un código QR de profile.qr / profile.back (generado con qrencode si está instalado), con la dirección debajo

site (opcional) establece la dirección que se muestra en las maquetas del navegador; por defecto es profile.back. Todos los estilos y efectos funcionan en ambas interfaces (en app, no se usan orbit ni ticker).

Estilos y efectos

"style" elige un tema de color. Los estilos oscuros tienen páginas oscuras con una cuadrícula tenue y tarjetas brillantes en lugar de sombras de ventana.

Estilo	Apariencia
mustard (predeterminado)	la plantilla: degradado mostaza, héroe blanco, páginas gris claro, píldora negra, botones azules
midnight	índigo a negro, neón cian y violeta, páginas oscuras, tarjetas brillantes
sunset	melocotón a rosa, páginas blanco cálido, títulos y botones coral
amber	dorado sobre casi negro (aspecto de desarrollador o portafolio), páginas oscuras, píldora y botones ámbar
mint	menta a verde azulado, páginas blancas, títulos verdes

"colors" sobrescribe cualquier color individual del estilo.

Todos los efectos están activados por defecto. Desactiva uno con "effects": {"ticker": false}, o todos con "effects": false para el aspecto de plantilla simple:

Efecto	Qué hace
bokeh	partículas de luz suave flotan hacia arriba en las escenas de degradado
shine	un barrido de luz sobre la pregunta grande, el botón y la tarjeta de perfil, más anillos de eco en la cortinilla circular y un anillo de pulso en el botón
marker	un resaltador se desliza debajo del nombre (text.highlight elige las palabras, o todo después de la segunda palabra)
orbit	un anillo discontinuo con tres puntos gira alrededor del avatar
blur	desenfoque de movimiento vertical mientras la página se desplaza
labels	"01 / 03" sobre cada título de sección y una línea subrayada que se dibuja
glare	un destello diagonal cruza cada tarjeta de trabajo después de que aterriza
ticker	grandes etiquetas delineadas se desplazan detrás de las líneas de cierre (text.tags, o si no, los roles y títulos de sección)
confetti	una explosión de confeti en los colores del estilo cuando se hace clic en el botón
grain	grano de película y una viñeta suave sobre todo

Para permitir que el usuario elija, renderiza los mismos 4 momentos en cada estilo (un "tablero de estilos") antes del renderizado completo. Usa render.mjs --times en copias de promo.json que solo difieran en style.

Requisitos: ffmpeg, Node 22+, Google Chrome o Chromium (CHROME_PATH), y un Python con numpy y scipy (PROMO_PY; promo.sh encuentra uno automáticamente).

Flujo de trabajo

1. Reúne lo que necesita el reel

• Avatar: una foto de retrato, cara y hombros. Proporciona crop: [x, y, size] (píxeles) para que la cara quede en el círculo, y verifica la vista previa. Con un fondo ocupado o claro, "avatarStyle": "duotone" crea una figura oscura sobre amarillo, como en la plantilla.
• Secciones (1-4): un título corto cada una (2-4 palabras) y 1-3 clips: videos ({"file", "at"}, 5.5 s desde at se reproducen en la tarjeta) o imágenes. Usa el mejor trabajo del usuario, y mezcla vertical y horizontal para variedad.
• Textos: mantenlos cortos.
  • hook: una línea pequeña y una pregunta grande de 1-2 palabras.
  • badge: un eslogan de hasta aproximadamente 50 caracteres.
  • hello: "Hola, soy …".
  • roles: 2-4 roles cortos.
  • button: la etiqueta del botón.
  • cta: dos líneas de cierre.
• Tarjeta de perfil: handle, name, hasta 3 stats, buttons, clicked y back. Usa solo números reales (del usuario, su sitio o su perfil). Un valor de cadena (como "2023") se muestra tal cual, sin contar.
• Idioma: para khmer, establece "lang": "km" y escribe khmer natural. Kantumruy Pro está incluido.
• Opcional: style, effects, logo (dentro del círculo de la tarjeta), colors, text.highlight, text.tags, music (+ musicStart), sfxDir.

2. Escribe el proyecto

Crea una carpeta de proyecto y copia examples/creator-reel.json dentro como promo.json, luego edítalo. Cada clave está descrita en references/config.md. Las rutas son relativas a la carpeta del proyecto.

3. Vista previa (aproximadamente 10 s)

<skill>/scripts/promo.sh <project>/promo.json --preview

Esto corta los clips y renderiza aproximadamente 13 fotogramas estáticos en out/<name>-preview.png. Lee la vista previa y verifica:

• el recorte del avatar;
• que ninguna línea esté apretada (los textos largos se encogen);
• que las tarjetas de cada sección muestren buenos fotogramas: cambia at;
• los números de la tarjeta de perfil.

4. Renderizado (aproximadamente 2 minutos; ejecútalo en segundo plano)

<skill>/scripts/promo.sh <project>/promo.json --jobs 4

Las etapas se ejecutan en este orden: assets, plan, render, mix, encode. --from mix re-mezcla el sonido sin renderizar los fotogramas de nuevo.

Salida: out/<name>-1080p60.mp4 y out/<name>-contact.png.

5. Verifica antes de entregar

• Lee la hoja de contacto.
• ffprobe debería mostrar la duración que da build/cues.json. La mezcla está normalizada a -14 LUFS / -1 dBTP.
• No puedes escuchar el resultado, así que informa al usuario de lo que verificaste y pídele que lo escuche.

Ajustes

• Tiempos: plan() en scripts/scene.mjs. SEC es la duración de una sección y SCROLL la duración de un desplazamiento de página. Las marcas en buildCues() se actualizan automáticamente.
• Apariencia:
  • Los temas son STYLES y los efectos son EFFECTS en scene.mjs; los colores también pueden venir de colors.
  • El diseño de las tarjetas es layout().
  • Las sombras de ventana son buildShade().
  • El giro es drawFlip(), tiras con perspectiva.
• Sonido: SFX en scripts/audio.py lista los nombres de archivo que se prueban en sfxDir. make_bed() es el ritmo lo-fi.