Degradado mesh
Un video de fondo para página web con tu titular encima
Un degradado mesh de cuatro puntos que se desplaza en un bucle continuo de ocho segundos, con un logotipo, un titular de tres líneas en tipografía grotesca, un subtítulo, un botón oscuro tipo píldora y un enlace secundario encima. El hero de una landing page, convertido en clip.
- 8s
- duración
- 4
- relaciones de aspecto
- 7
- controles
- 720p
- exportaciones gratis e ilimitadas
Motion Background · 8s · 9:16
Gradient · Mesh · Landing page · Loop
Una sección hero que puedes exportar como video
Este es el diseño que toda landing page de software ha usado en los últimos cinco años (degradado mesh suave, titular grande en tipografía grotesca, una frase de subtítulo, un botón principal y un enlace secundario) armado como documento de motion. El degradado es un shader con cuatro puntos de color que se desplazan unos contra otros en un ciclo de ocho segundos, calculado píxel a píxel para que nunca forme bandas ni se repita en mosaico.
La gracia de tenerlo como clip y no como CSS es que llega a lugares a los que una página web no puede: una publicación de lanzamiento de producto, una pantalla en una conferencia, la intro de una demo, un espacio publicitario. Todo es editable (titular, subtítulo, texto del botón, logotipo y enlace secundario) y el control de suavidad decide si el degradado se lee como cuatro campos de color distintos o como un solo lavado continuo.
8 segundos, tres momentos
Qué aparece en pantalla y cuándo. Cada elemento nombrado aquí es una capa del documento: puedes hacer clic en cualquiera en el lienzo y cambiarlo.
Momento 1 · 1.4s
El hero ya está montado
El mesh se desplaza bajo su velo, y el logotipo, el titular de tres líneas, el subtítulo y el botón principal ya aterrizaron.
Momento 2 · 3.4s
Enlace secundario y pie
El enlace de Contactar a ventas apareció junto al botón: el cuadro que se lee como una landing page terminada.
Momento 3 · 6.9s
De vuelta al inicio
El degradado volvió al punto donde empezó, con el texto todavía en pantalla antes de despejarse para el bucle.
Tres pasos para un hero en bucle
- 01
Escribe el titular y el subtítulo
El titular acepta saltos de línea, así que el corte lo colocas tú. El subtítulo es un control de una sola frase: mantenlo en una sola idea y seguirá siendo legible en una exportación vertical.
- 02
Define los dos colores del degradado
Dos controles manejan el mesh de cuatro puntos, y el control de suavidad, de 0,6 a 1,8, decide qué tan marcada es la separación entre los campos.
- 03
Ponle texto al botón y exporta
El texto del botón principal es un control; el enlace secundario y el logotipo se editan en el lienzo. Exporta en 16:9 y ponlo en bucle.
Degradado por shader
Sin bandas, a cualquier resolución
El mesh se calcula píxel a píxel en lugar de muestrearse de una imagen, así que las transiciones entre los puntos de color se mantienen perfectamente suaves tanto en una exportación de 1080p como en una de 720p. Los degradados exportados desde herramientas de diseño forman bandas; este no.
Sin cortes
Ocho segundos, bucle cerrado
El degradado corre en un ciclo exacto de ocho segundos, así que el último fotograma cae de nuevo sobre el primero. Déjalo correr detrás de un stand o en la pantalla de un escenario durante una hora y no hay ninguna unión que se note.
Un hero completo
Logotipo, titular, subtítulo, botón, enlace
Todo lo que tiene el hero de una landing page ya está maquetado y escrito en una grotesca real. Estás reemplazando texto, no construyendo un diseño, y por eso suele ser la plantilla más rápida de terminar de toda la galería.
Qué puedes cambiar
Siete controles, con el logotipo y el enlace secundario editables directamente en el lienzo.
- Haz clic en cualquier elemento del lienzo para editarlo directamente
- O describe el cambio en una frase y deja que el asistente lo haga
- Exporta en 9:16, 16:9, 1:1, 4:5 desde el mismo documento
Controles del Studio
7 con nombre
- HeadlineTextGet paid anywhere in the world
- LedeTextCards, wallets and local bank transfers in 135 currencies — live in an afternoon, with no setup fees.
- ButtonTextStart now →
- Gradient colourColour#1E6FE8
- Gradient colour 2Colour#FFB703
- SoftnessSlider 0.6–1.80.9
- SpeedSlider 0.5–21
Por qué exportar un hero como video
Una animación de degradado en CSS le cuesta a cada visitante un poco de GPU y nunca sale de tu sitio. Un bucle renderizado se reproduce sin costo, funciona en un feed, en una pantalla y en un espacio publicitario, y lleva el mismo titular a todos lados. Esta plantilla es la forma más barata de tener un cuadro de hero consistente durante todo un lanzamiento: un documento, cuatro relaciones de aspecto, un solo mensaje.
Degradado mesh: preguntas y respuestas
¿La plantilla de video de fondo para página web es gratis?+
Es gratis abrirla y editarla, y con una cuenta gratis puedes exportar en 720p sin límite, con una pequeña marca de agua de LazyKiwi. El 1080p sin marca de agua viene incluido con cualquier plan de pago, si necesitas Full HD para una pantalla grande.
¿En qué relaciones de aspecto puedo exportar?+
9:16, 16:9, 1:1 y 4:5. El 16:9 es el indicado para el hero de un sitio o una pantalla; la versión vertical apila el titular y el botón en lugar de recortarlos.
¿Puedo cambiar el texto y los colores?+
El titular, el subtítulo, el texto del botón, los dos colores del degradado y la suavidad son controles con nombre, y el logotipo y el enlace secundario son texto editable en el lienzo.
¿Necesito After Effects?+
No. El mesh es un shader dentro del documento: no hay nada que instalar ni ninguna imagen de degradado que volver a exportar cuando cambien los colores.
¿Cuánto dura el clip?+
Ocho segundos, creado como bucle continuo, con el hero completo montado a los 3,4 s.
Más gradient & particle backgrounds
Todas las backgrounds
Formas que caenAnillos, cruces y signos de más en naranja, cobalto y crema llueven y se amontonan, mientras tres bloques blancos con palabras aparecen de golpe entre ellos.
Resplandor ambientalUna luz ámbar y naranja quemado flota despacio por un cuadro oscuro y cálido mientras un panel nítido de luz suave brilla en el centro: un bucle minimalista de 8 segundos que se cierra sobre sí mismo.
Limaduras de hierroFinos trazos de limaduras de hierro se alinean de golpe con las líneas de campo de un dipolo horizontal y siguen desplazándose por ellas, alrededor de un imán de barra que lleva una palabra en tipografía display.
Vidrio fractalEl azul y el ámbar fluyen detrás de una pared de vidrio acanalado vertical, y cada estría refracta el degradado en franjas desplazadas. Un bucle de 8 segundos que se cierra sobre sí mismo, sin nada encima.
Toroide iridiscenteUn gran toroide holográfico 3D gira lentamente sobre dos ejes encima de un fondo casi negro, con bandas cian y magenta que se deslizan por su superficie brillante: un bucle perfecto, sin nada más en el cuadro.Publica tu hero como clip.
Titular, subtítulo, botón, dos colores. Exporta un degradado mesh en bucle con tu mensaje encima.