Communitygithub.com

jeremyhan520/promo-film-looks

Dos plantillas de estilo visual listas para videos promocionales institucionales en Remotion (宣传片 / 形象片 / VCR), orientadas a escuelas, universidades e instituciones.

¿Qué es promo-film-looks?

Este skill proporciona dos plantillas de estilo visual completas y listas para usar en Remotion, diseñadas para la producción de videos promocionales institucionales. Incluye '苹果风格' (estilo Apple de vidrio esmerilado en azul, blanco y un toque de amarillo) y '华章版' (Aurum Nocturne, un acabado de laca negra con pan de oro), junto con un motor de plantilla funcional. El usuario puede elegir el estilo mediante una propiedad de entrada (`--props`), lo que permite que la misma línea de tiempo y escenas se entreguen en dos ediciones. Además del motor, incluye scripts para renderizado, control de calidad (QA), masterización y segmentos de reemplazo, así como principios de diseño detallados. Es ideal para cuando se necesita un video promocional para una escuela, universidad, instituto o empresa, o cuando se mencionan términos como 苹果风格, 华章版, 磨砂风, 毛玻璃, 黑金, 苹果风, vidrio esmerilado o un look de lujo oscuro-dorado, ya sea para una nueva edición o un cambio de estilo de un video existente, o para segmentos de reemplazo de uno, incluso si el skill no se nombra explícitamente.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jeremyhan520/promo-film-looks/tree/HEAD/promo-film-looks

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Looks para videos promocionales: 苹果风格 y 华章版

Dos plantillas de estilo terminadas para videos promocionales institucionales. Comience desde un motor funcional en lugar de un proyecto en blanco de Remotion.

  • 苹果风格 (glass): Vidrio esmerilado estilo Apple. Fondos por toma en blanco / cielo / azul, acentos amarillos, títulos en 优设标题黑, fotos sin marco redondeadas y gráficos de datos en vivo detrás del vidrio. Lea references/glass.md.
  • 华章版 (aurum, Aurum Nocturne): Fondo de laca negra, tipo champán y títulos en pan de oro. Agrega marcos de fotos con ribete dorado, fugas de luz y algunos destellos de lente. Lea references/aurum.md.

Un único código base renderiza ambos looks. El look es una propiedad de entrada (--props=glass.json o --props=aurum.json), por lo que la misma línea de tiempo y escenas pueden entregarse en dos ediciones.

Elegir el look

El valor predeterminado es 苹果风格: brillante, limpio e internacional, y es el más adecuado para videos de admisiones y reclutamiento. 华章版 es más oscuro y ceremonial. Ofrézcalo para aniversarios, galas, premios y videos de marca premium, o cuando el usuario solicite 华丽 / 黑金 / luxury. Muestre algunas imágenes fijas antes de renderizar un video completo con él.

Si la paleta de la marca no es azul, mantenga el motor de vidrio esmerilado y recoloque los tokens (glassVars en looks.tsx, GLASS en theme.ts). No construya un nuevo look desde cero.

Iniciar un nuevo video

python <skill-dir>/scripts/scaffold.py <new-project-dir>

Luego, en el proyecto:

npm install
npx tsc --noEmit -p .
PROPS=glass.json bash qa.sh demo 30 150 268 320 460 520

La línea de tiempo de demostración (src/scenes/Demo.tsx) tiene una toma por componente característico. Renderice sus imágenes fijas en ambos looks antes de cambiar cualquier cosa, para confirmar que las fuentes y el navegador funcionan en esta máquina.

Notas de configuración:

  • Fuentes: No se redistribuyen con el skill. assets/fonts/README.md enumera cada archivo, su origen y su licencia. El andamio copia lo que sea que esté en assets/fonts/; las fuentes faltantes se sustituyen sin romper el renderizado.
  • Navegador: remotion.config.ts apunta a Edge local cuando existe, porque Chrome Headless Shell puede no descargarse en algunas redes.
  • Shell: Los scripts son bash, y PROPS=… bash qa.sh es sintaxis de bash. En Windows, ejecútelos en Git Bash. Desde PowerShell, invoque Git Bash explícitamente, por ejemplo & "C:\Program Files\Git\bin\bash.exe" -c "PROPS=glass.json bash qa.sh demo 30 150", porque un bash simple allí puede iniciar WSL en su lugar.

Qué contiene la plantilla:

ArchivoRol¿Editar por video?
src/config.tsduración, SHOTS (tono por toma, lado del título, chips), CHAPTERS (motivo, palabra fantasma), FORMULAS, BRANDsí
src/scenes/*.tsxel video: un archivo por capítulo, construido a partir de componentes del kitsí
src/kit.tsxScene, Ground, Night, Card, Print, DocPage, Caption, Rise, En, Rule, Heading, ChapterCard, useCount, StatHit, MaskTitle, CardRail, FeatureCardraramente
src/looks.tsxfondos, transiciones, marcos de fotos y luz para ambos looksraramente
src/glassfx.tsxcapas de detalle de vidrio: motivos, discos, chips, palabras fantasma, bokeh, cometa de borderaramente
src/theme.tstokens C, fuentes F, FOIL, easings EZ, r(), mix()raramente
src/Film.tsxlínea de tiempo maestra, GLASS_CSS, conexión de VO / SFXsí (cableado)

Las escenas deben permanecer independientes del look. Color solo a través de tokens C.*, tipo solo a través de F.*, fotos a través de Print, paneles a través de Card o C.card / C.fill. Nunca codifique un color hexadecimal en una escena: la misma escena debe renderizar blanco-sobre-azul, tinta-sobre-blanco y oro-sobre-negro.

Flujo de trabajo

  1. Temporización a partir de la voz en off (VO).
    • Alinee la VO (por ejemplo, marcas de tiempo de palabras de Whisper) y anote las duraciones de los fragmentos.
    • Cada Scene se sitúa en segundos absolutos de VO. Las escenas vecinas se superponen aproximadamente 0.35 s.
    • Los tiempos de los elementos (t0, at) también son segundos absolutos: el momento en que el narrador dice la cosa. El texto que llega en la palabra hablada es lo que hace que el video se sienta editado en lugar de animado.
  2. Tabla de tomas. Agregue una fila SHOTS por escena en config.ts.
    • Alterne los tonos para que las tomas vecinas difieran.
    • Coloque el título (head) en el lado que el contenido deja vacío.
    • Marque las tomas a sangre completa o con modo de fusión como flat.
  3. Construya escenas a partir de componentes del kit. Los patrones que ya funcionan están en las referencias, por ejemplo:
    • un carril de tarjetas casi a pantalla completa para cifras densas
    • un número titular que aterriza completo
    • la apertura de texto como máscara
  4. Imágenes fijas de QA (qa.sh) en el momento más concurrido de cada toma, en cada look que vaya a entregar. Mírelas usted mismo. Vea la lista de verificación en references/pipeline.md.
  5. Masterización con master.sh: −16 LUFS, h264 crf 17, AAC 320k. Luego informe los números de verify.sh.
  6. Correcciones después de la entrega. Vuelva a renderizar solo el intervalo modificado con segment.sh. Extrae el audio del master para que el volumen coincida, y verifica que ambos fotogramas de empalme sean iguales al master.

Principios de diseño

Estos son los que hacen que los dos looks se mantengan. Cada uno va seguido de la razón, porque las razones importan más que las reglas.

  • Deje espacio para subtítulos y música. Entregue voz en off más efectos de sonido (SFX), sin subtítulos quemados y sin música de fondo (BGM) a menos que se solicite. Las instituciones suelen agregar subtítulos y música unificados después, por lo que la banda inferior (aproximadamente y > 950) se mantiene libre de contenido importante.
  • Mantenga la parte superior del encuadre limpia. Los títulos decorativos en inglés, los titulares de capítulos y las líneas de HUD se perciben como desorden para una audiencia china. En el look glass, el titular ya está desactivado, y BRAND está vacío por defecto. Las líneas de compañía en inglés debajo de los títulos están bien.
  • Evite el aspecto de presentación de diapositivas. Un diseño de vidrio esmerilado desnudo se lee como PowerPoint. Cada toma glass lleva capas lentas detrás del contenido: el motivo, los discos, la palabra fantasma y el bokeh frontal, además del giro 3-D lento del plano de contenido. Las tomas vecinas alternan fondos. No elimine estas capas para "limpiar".
  • La decoración no debe leerse como contenido. Los chips de fórmula son pura notación sin números, aproximadamente al 60% de opacidad y sin sombra. Un chip como "R² = 0.98" se lee como una afirmación sobre la institución.
  • Legible vence a elegante. Cuando una tarjeta contiene una figura densa (diagramas de investigación, resultados), dele casi todo el encuadre (CardRail). Las tarjetas pequeñas en una fila son ilegibles.
  • Las cifras titulares aterrizan completas. Una cuenta larga hacia arriba de 0 a 100% se lee como una barra de carga. Use StatHit para números titulares y useCount solo para los ordinarios.
  • Personas y documentos:
    • Nunca recorte una cabeza. Verifique cada recorte de retrato en una imagen fija y establezca focus en Print para corregirlo.
    • Nunca repita una foto dentro de un video.
    • Los certificados y las páginas de revistas cuelgan completamente rectos (DocPage no tiene inclinación), con el tamaño de la relación de aspecto real de la página.
  • Los iconos deben ser literales. Prefiera un objeto reconocible, como un automóvil visto de frente para transporte, sobre un glifo abstracto.
  • El contenido de la institución son datos. Las personas, fotos, nombres y números se utilizan exactamente como se proporcionan, nunca inventados. Cuando una foto fuente necesita trabajo (fondo, color), emparejela con sus vecinas y muestre una imagen fija antes de renderizar.

Informes

Informe lo que verificó, con números: recuento de fotogramas, decodificación, duración, LUFS, pico y qué imágenes fijas miró. Diga claramente lo que no hizo, como "no visto completo" o "audio no escuchado". Nombre los entregables <机构>宣传片_<版本>_无字幕无BGM_1080p25.mp4. Coloque los segmentos de reemplazo en una carpeta <版本>_替换片段/, nombrados con el código de tiempo de inicio (detalles en references/pipeline.md).

Referencias

  • references/glass.md: la especificación completa de 苹果风格. Cubre tokens, looks por toma, superficies de vidrio esmerilado, transiciones, capas de detalle, movimientos característicos y dificultades.
  • references/aurum.md: la especificación completa de 华章版. Cubre las capas de escenario, tipo de pan de oro, marcos, fugas de luz, destellos y trampas de contraste.
  • references/pipeline.md: temporización de VO, tabla de señales SFX, lista de verificación de QA, masterización, verificación, segmentos de reemplazo, empalme y nomenclatura de entregables.

Skills relacionados