Creación de un Reel de Página

¿Qué hace Creación de un Reel de Página?

Resumen

La página ya contiene el mejor metraje que obtendrás: su propio movimiento, ejecutándose en tiempo real. El trabajo consiste en capturarlo fielmente, elegir el recorrido a través de él y probar el resultado.

Principio fundamental: graba la animación real, nunca la recrees, y edita por medición, no por intuición.

Una grabación de una página es un recorrido. Dilo así. Una película de marca es un trabajo diferente: una película animada diseñada con un storyboard. Esta habilidad es para "así es como se ve y se mueve la página que construimos".

Decide antes de grabar

• Qué prueba el reel. Una frase. "La nueva página se construye sola y se desplaza según lo diseñado".
• Qué versión. Graba la versión que sea real y esté publicada en un entorno de revisión. Nunca una versión que aún no esté publicada (una página de producto no anunciada, un borrador), y nunca un prototipo que aún esté en medio de cambios. Graba el entorno de staging, no una compilación local.
• Formato. 16:9 a 1920x1080 es la captura de escritorio nativa y la más segura. No inventes un diseño vertical que el equipo no haya probado.
• Duración. Corta. De 15 a 20 segundos muestra la capacidad de una página completa. Cinco segundos muestra un movimiento. Decide cuál necesita el reel.
• Qué no debe aparecer. Logotipos de clientes, citas con nombres, marcas de terceros, texto de relleno, imágenes rotas, afirmaciones no publicadas. Escribe la lista ahora.
• Resolución. Revisa a 1080p. No renderices un master 4K hasta que el corte esté aprobado.

Paso 1: graba la animación real

Usa Chrome con un screencast CDP, no una captura de pantalla por fotograma. Las animaciones GSAP con scroll, el scroll suave, los trazados de canvas y las introducciones temporizadas se ejecutan en tiempo real. Avanzarlas fotograma a fotograma cambia el movimiento.

Page.startScreencast  format jpeg, quality 100, maxWidth = viewport width, everyNthFrame 1

En un laptop Apple Silicon, esto entrega aproximadamente 60 fotogramas por segundo (brecha media de 16,7 ms).

• Introducciones al cargar: inicia el screencast, luego recarga la página, para que la introducción esté en la grabación. Recorta los fotogramas anteriores a la recarga.
• Desplazamiento: controla el scroll desde fotogramas clave [segundos, posición]. Pasa las posiciones a través de una cúbica monótona (sin sobreimpulso, las pausas se mantienen planas) y aplica cada valor con la función scrollTo(y, { immediate: true, force: true }) de la biblioteca de scroll suave, para que el propio scrub y suavizado de la página se ejecuten exactamente como lo harían para un lector. Nunca anime los elementos de la página manualmente.
• Oculta, no elimines: visibility: hidden en logotipos y citas mantiene intactos los diseños anclados. display: none los desplaza.
• Reloj: toma la hora de inicio dentro de la página (performance.timeOrigin + performance.now()) para que los fotogramas clave de scroll y las marcas de tiempo del screencast compartan un mismo reloj.
• Remuestrea a una velocidad de fotogramas constante: el fotograma de salida k muestra el último fotograma del screencast en o antes de k / fps.

video/capture.mjs en este repositorio hace todo esto a partir de un pequeño plan JSON.

Paso 2: elige el recorrido mediante medición

Un recorrido de scroll elegido por intuición deja zonas muertas, estiramientos donde la rueda se mueve y nada en la pantalla cambia. Encuéntralas:

1. Graba un barrido lento y constante de todo el rango.
2. Ejecuta video/analyze.py sobre él. Informa de ejecuciones congeladas (fotogramas idénticos) y los mayores cambios entre fotogramas.
3. Mapea las ejecuciones congeladas a las posiciones de scroll. Esas son zonas muertas: crúzalas rápidamente.
4. Dale a los momentos de scrub de scroll (un círculo que crece, una tarjeta que se construye, un contador que cuenta) los tramos lentos y legibles. Las escenas con scrub siguen el scroll, por lo que esperar no las termina.
5. Las animaciones basadas en tiempo comienzan cuando se cruza un umbral y necesitan tiempo real para terminar. No termines el clip hasta que la última haya terminado.

Luego, graba la toma real con el recorrido modelado y ejecuta analyze.py de nuevo. Una ejecución congelada corta dentro de una escena anclada es una pausa y está bien. Una congelación de 0,4 s en medio de un destello no lo está.

Verifica la salud de la propia captura: la brecha máxima entre fotogramas del screencast dentro de la parte que usarás debe ser inferior a aproximadamente 40 ms. Una brecha mayor es un tropiezo, así que vuelve a grabar.

Paso 3: selecciona el metraje que esté terminado

Mira una hoja de contacto cada 0,5 a 1 s antes de comprometerte. Rechaza:

• tarjetas vacías, imágenes rotas, texto alternativo que muestra dónde debería estar una imagen
• copia de relleno en una lista CMS
• un primer segundo en blanco mientras la página se pinta; recorta hasta donde el titular comienza a aparecer
• cualquier cosa de la lista "no debe aparecer"

Si una sección está sin terminar, déjala fuera e informa al propietario. Un reel que presenta una tarjeta rota es un informe de error público.

Paso 4: codifica con los colores etiquetados

./encode.sh <framesDir> out.mp4 <firstFrame> <frameCount> 60

Los fotogramas del screencast son JPEG rango completo BT.601. La codificación los convierte a rango limitado BT.709 y etiqueta el flujo, para que los reproductores no adivinen:

scale=in_range=full:in_color_matrix=bt601:out_range=tv:out_color_matrix=bt709,format=yuv420p
libx264 -crf 14 -preset slow -x264-params colorprim=bt709:transfer=bt709:colormatrix=bt709:fullrange=off
-movflags +faststart

yuv420p y +faststart hacen que se reproduzca en todas partes y comience de inmediato. Verifica el resultado decodificando algunos fotogramas y comparándolos con las fuentes píxel a píxel. No compares medias de canales: promediar unos pocos millones de valores float32 acumula suficiente error para inventar un matiz de color que no está ahí. Dentro de aproximadamente 3 niveles por canal es fiel.

Paso 5: QA del video

• Duración, velocidad de fotogramas, tamaño y etiquetas de color leídos del archivo
• Un fotograma cada segundo, observado, más las transiciones a velocidad normal
• Sin logotipos, nombres, marcadores de posición, pancartas o imágenes rotas en ningún fotograma, no solo en los seleccionados
• Sin banner de cookies ni widget de consentimiento en el fotograma, y ninguno clickeado: ocúltalo desde el CSS de la página o graba un entorno que no lo muestre
• El primer fotograma es el gancho. Si la página se pinta en blanco, recórtalo
• Elige un fotograma de póster donde la página esté completa y estática, no a medio scroll

Luego, ejecuta la puerta del revisor frío de reviewing-page-design.

Paso 6: di lo que no pudiste verificar

El sonido, si lo hay ("No puedo escucharlo"). La recompresión propia de la plataforma. Cualquier cosa mostrada en un dispositivo que no probaste.

Cuando se desea un reel diseñado

Compón el metraje de la página dentro de un diseño donde cada elemento visual sea función del tiempo (muelles de forma cerrada, una idea de superposición por compás, leyendas de dos a cinco palabras, color de marca solo en el nombre y la tarjeta final). Se aplican las mismas reglas: la ventana de la página nunca está cubierta, el texto se lee a 360 px de ancho, los remates se mantienen al menos 1,2 s.

Banderas rojas

• Una captura de fotograma por fotograma de una página con desplazamiento
• Grabar un prototipo que esté en medio de cambios, o una página que no esté publicada
• Un reel que incluya una sección a medio terminar
• Logotipos de clientes o citas con nombres en el fotograma
• Un recorrido de scroll elegido por intuición, sin un barrido detrás
• Color comparado por medias de canales
• Renderizar 4K antes de que el corte esté aprobado