Cómo grabar vídeos con scroll fluidos para plantillas de Framer

1. 1

   Publícala en una dirección pública

   Publica la plantilla, o su demo, en su dirección .framer.website o en un dominio propio. Tiene que abrirse en una ventana privada sin contraseña.

2. 2

   Pega la URL y elige Captura en vivo

   Pega la dirección en la página de inicio. En Motor, elige Captura en vivo. Hace una captura de la página en cada posición del scroll en lugar de desplazar una imagen fija, así que los efectos de aparición, las transformaciones con el scroll y las secciones fijas se reproducen exactamente como en el navegador.

3. 3

   Marca el ritmo

   De doce a veinte segundos va bien para la mayoría de las páginas de inicio de plantillas. Suave es el movimiento seguro; Pulso avanza sección a sección y se asienta en cada una, lo que permite lucir la estructura de la plantilla.

4. 4

   Haz pausas en lo que la vende

   Haz clic en la página donde debe detenerse el scroll: la cabecera, la cuadrícula bento o de funciones, los testimonios, los precios. Hasta 6 pausas, de 0,5 a 5 segundos cada una. Activa «Ida y vuelta» si el vídeo vuelve a subir.

5. 5

   Muestra los estados hover

   Activa el cursor, añade un hover y haz clic en la tarjeta o el botón sobre el que debe posarse. El cursor va hasta allí, se reproduce el efecto hover y se queda de 0,5 a 5 segundos antes de seguir. Hay ocho estilos de cursor, desde el de macOS hasta un simple punto.

6. 6

   Exporta las versiones que necesites

   Un MP4 en 16:9 a 1080p o 1440p para la ficha; después cambia el dispositivo a Móvil y exporta una versión en 9:16 o 4:5 de la maquetación para móvil para X, Instagram o TikTok.

Desplazamiento estático lee la página una vez y mueve un encuadre a lo largo de ella. Es rápido y perfectamente uniforme, pero todo lo que se anima con el scroll queda congelado en el estado en que estaba cuando se leyó la página. Activa «Asentar animaciones» y los efectos de entrada se llevan antes a su estado final, para que nada quede a medio aparecer. Captura en vivo reproduce los efectos de verdad. Tarda bastante más en renderizar y suma 13 créditos a la exportación.

• Usa Captura en vivo cuando el movimiento forma parte de lo que vendes, que en la mayoría de las plantillas de Framer es así.
• Usa Desplazamiento estático con «Asentar animaciones» para borradores rápidos, para páginas cuyas animaciones son solo de entrada o para la versión móvil, donde el espacio en pantalla es escaso.

• Un marco de navegador. Safari o Chrome, claro u oscuro, para que la presentación se lea como una web de un vistazo.
• Un fondo. Un margen alrededor de la ventana con un color, un degradado o uno de los 36 fondos predefinidos. Las esquinas redondeadas y una sombra suave hacen que parezca una foto de producto y no una captura de pantalla.
• Claro y oscuro. Si la plantilla sigue el tema del sistema, fuerza Claro u Oscuro en «Esquema de color» y exporta uno de cada.
• Un primer fotograma limpio. Quédate un segundo en la cabecera antes de que empiece el scroll. Los marketplaces y las apps sociales suelen usar el primer fotograma como miniatura.