Amartileyton/autovideo

Resaltados de Artículo

Usar con remotion-best-practices, motion-graphics y cinematic-camera para noticias, lanzamientos, tendencias y momentos de prueba de artículo donde una terminal se sentiría forzada.

Entrada obligatoria

Antes de codificar, preguntar por cualquier decisión faltante:

¿Qué formato quieres: inserto de media pantalla 4:3 para Instagram o 9:16 pantalla completa para Instagram? ¿Y qué fondo: luz cálida, oscuro limpio, cuadrícula clara o cuadrícula oscura?

• Inserto 4:3: 1440×1080, diseñado para ser legible en aproximadamente la mitad de un fotograma 9:16.
• Pantalla completa 9:16: 1080×1920, respetando las zonas de título/interfaz.
• Usar 16:9 solo cuando se solicite explícitamente.
• Si el usuario delega el fondo, usar luz cálida.

El papel del artículo puede permanecer claro en una escena oscura limpia o de cuadrícula oscura. No cambiar silenciosamente toda la composición a oscuro.

Prohibición visual absoluta

Prohibido: neón, brillo, desenfoque luminoso, bordes luminosos, sombras coloreadas, degradados cian-púrpura, orbes degradados, lavados de color radiales, vidrio esmerilado, iluminación cyberpunk o decoración AI generada por sensación. Los resaltados deben verse como tratamiento físico de marcador/papel, no como luz emitida.

Rechazar cualquier tratamiento prohibido antes de la entrega.

Referencia aprobada

Inspeccionar assets/examples/article-highlight.mp4 y consultar fotogramas de referencia antes de codificar. Continuar su jerarquía editorial, espaciado generoso de papel, tratamiento contenido de marcador, cámara lenta y legibilidad. Usar la galería del repositorio canónico cuando los activos locales no estén disponibles: https://github.com/Liamrjohnston/remotion-motion-graphics-skill.

Cuándo usar

Usar para:

• Momentos informativos/noticias/lanzamientos/tendencias.
• Prueba de “algo cambió o se lanzó”.
• Extractos reales de artículos con frases significativas resaltadas.
• Evidencia no terminal donde el material editorial aclara el punto.

Usar terminal-inserts para historias de CLI/configuración/agente. Usar metraje auténtico de producto/UI cuando el momento sea una demostración de producto.

Arquitectura central

No aplanar el artículo cuando los trazos del marcador deben quedar detrás del texto. Construir DOM/SVG de Remotion en capas:

1. Superficie de escena seleccionada.
2. Papel/tarjeta editorial con amplio relleno seguro.
3. Capa de marcador rough.js/SVG encima del papel.
4. Texto DOM/SVG encima del marcador.

El marcador debe quedar visiblemente detrás de las palabras y encima del papel.

Material y diseño

• Papel: blanco cálido/blanco roto con borde neutro y sombra neutra suave; nunca brillo coloreado.
• Tipografía: jerarquía editorial/noticias: etiqueta de sección pequeña, titular grande serif/editorial, firma/fecha atenuada, y como máximo 2-3 líneas cortas de cuerpo.
• Resaltados: color de marcador físico semitransparente contenido, como amarillo apagado; nunca fluorescente.
• Usar identidad real del artículo/fuente y copia proporcionada. No inventar publicaciones, fechas, afirmaciones o citas.
• Ajustar intencionalmente y mantener el texto dentro de márgenes seguros transformados.
• No centrar como una diapositiva de título; debe sentirse como un extracto de artículo auténtico.
• Eliminar píldoras/botones/clutter de fuente no esenciales si son ilegibles en el tamaño de destino.

Animación

• Comenzar con un breve desenfoque a enfoque contenido solo cuando respalde la referencia aprobada; el desenfoque es enfoque óptico, no brillo.
• Sin marcador visible durante la fase de enfoque temprana.
• Usar un suave y lento avance de cámara con rotación de perspectiva contenida.
• Iniciar trazos del marcador después de que el enfoque se estabilice.
• Dibujar cada resaltado de izquierda a derecha usando una máscara/barrido.
• Secuenciar los resaltados; nunca revelar todos a la vez.
• Terminar con todas las frases clave legibles y una pausa estable.
• Impulsar la animación con useCurrentFrame(), spring() e interpolate(); sin animación CSS.

Reglas del marcador

• Usar rough.js o una forma SVG irregular de marcador.
• El marcador permanece detrás del texto.
• Una ligera imperfección es buena; un rectángulo degradado perfecto no lo es.
• Resaltar solo frases significativas verificadas, no párrafos completos.
• La opacidad del marcador debe preservar el contraste del texto.
• Sin amarillo fluorescente, emisión de luz, halo borroso o borde brillante.

Sin narración redundante

El texto del artículo/fuente puede aparecer cuando es la evidencia real. No agregar un titular separado que simplemente repita la voz en off hablada. Usar solo el extracto auténtico y metadatos estructurales mínimos.

Puerta de rechazo de primera pasada

No entregar hasta que cada respuesta sea “no”:

1. ¿Quedó el formato o fondo sin confirmar?
2. ¿Hay neón, brillo, tratamiento de marcador luminoso, sombra coloreada, lavado degradado o vidrio esmerilado?
3. ¿Se inventó la identidad de la fuente/artículo o la afirmación?
4. ¿La tarjeta es una diapositiva de título centrada genérica en lugar de una superficie editorial?
5. ¿Algún texto clave es ilegible en la colocación seleccionada de Instagram?
6. ¿El marcador se sitúa encima/oscurece el texto o aparece demasiado pronto?
7. ¿La cámara recorta el papel o crea un desplazamiento vacío?
8. ¿El resultado carece de la contención y el pulido de la referencia aprobada?

Revisar en privado hasta que la puerta pase.

QA y entrega

1. Verificar tipos o ejecutar la validación más pequeña significativa.
2. Renderizar un fotograma sin resaltados temprano, un fotograma con trazo a medio camino, un fotograma con resaltado final y la pausa final.
3. Confirmar que el marcador es invisible al principio, está detrás del texto y completo al final.
4. Inspeccionar en busca de recortes, copia ilegible, detalles de fuente inventados, neón/brillo y encuadre débil.
5. Entregar MP4 con dimensiones, duración, comando de render exacto y nota de colocación en editor.