Dégradé mesh

Une vidéo de fond pour site web, avec votre titre par-dessus

Un dégradé mesh à quatre points qui dérive sur une boucle parfaite de huit secondes, avec par-dessus un logotype, un titre en grotesque sur trois lignes, un sous-titre, un bouton sombre arrondi et un lien secondaire. Le hero d’une landing page, en clip.

Modifiez ce modèle gratuitement Plus de backgrounds

8s: durée
4: formats d’image
7: contrôles
720p: exports gratuits et illimités

Motion Background · 8s · 9:16

Gradient · Mesh · Landing page · Loop

Une section hero que vous pouvez exporter en vidéo

C’est la mise en page que toutes les landing pages de logiciels utilisent depuis cinq ans — dégradé mesh doux, grand titre en grotesque, une phrase de sous-titre, un bouton principal et un lien secondaire — assemblée en document motion. Le dégradé est un shader à quatre points de couleur qui dérivent les uns par rapport aux autres sur un cycle de huit secondes, calculé pixel par pixel : il ne fait jamais de bandes et ne se répète jamais en mosaïque.

L’intérêt de l’avoir en clip plutôt qu’en CSS, c’est qu’il va là où une page web ne va pas : une publication de lancement produit, un écran de conférence, une intro de démo, un emplacement publicitaire. Tout est modifiable — titre, sous-titre, libellé du bouton, logotype et lien secondaire — et le réglage de douceur décide si le dégradé se lit comme quatre plages de couleur distinctes ou comme un seul lavis continu.

8 secondes, trois temps

Ce qui apparaît à l’écran, et quand. Chaque élément nommé ici est un calque du document : vous pouvez cliquer sur n’importe lequel sur le canevas et le modifier.

Modèle Dégradé mesh à 1.4s — Le hero est déjà en place — Temps 1 · 1.4s
Le hero est déjà en place
Le mesh dérive sous son voile, et le logotype, le titre sur trois lignes, le sous-titre et le bouton principal se sont tous posés.

Modèle Dégradé mesh à 3.4s — Lien secondaire et pied de page — Temps 2 · 3.4s
Lien secondaire et pied de page
Le lien « Contacter les ventes » est apparu à côté du bouton : l’image qui se lit comme une landing page finie.

Modèle Dégradé mesh à 6.9s — Retour au départ — Temps 3 · 6.9s
Retour au départ
Le dégradé est revenu à son point de départ, le texte toujours en place avant de s’effacer pour la boucle.

Trois étapes pour une boucle hero

01
Écrivez le titre et le sous-titre
Le titre accepte les retours à la ligne, pour que vous placiez la coupure vous-même. Le sous-titre est un réglage d’une seule phrase : gardez une seule idée et il reste lisible dans un export vertical.
02
Réglez les deux couleurs du dégradé
Deux réglages pilotent le mesh à quatre points, et le curseur de douceur, de 0,6 à 1,8, décide de la netteté avec laquelle les plages se séparent.
03
Libellez le bouton et exportez
Le libellé du bouton principal est un réglage ; le lien secondaire et le logotype se modifient sur le canevas. Exportez en 16:9 et lancez la boucle.

Dégradé shader

Aucun effet de bandes, à toute résolution

Le mesh est calculé pixel par pixel et non échantillonné depuis une image : les transitions entre points de couleur restent parfaitement lisses dans un export 1080p comme en 720p. Les dégradés exportés depuis les outils de design font des bandes ; celui-ci non.

Sans raccord

Huit secondes, boucle fermée

Le dégradé tourne sur un cycle de huit secondes exactement, si bien que la dernière image retombe sur la première. Faites-le tourner derrière un stand ou sur un écran de scène pendant une heure : aucun raccord ne se remarque.

Un hero complet

Logotype, titre, sous-titre, bouton, lien

Tout ce qu’un hero de landing page contient est déjà mis en page et composé dans une vraie grotesque. Vous remplacez du texte, vous ne construisez pas une mise en page : c’est pour cela que c’est en général le modèle le plus rapide à terminer de la galerie.

Ce que vous pouvez modifier

Sept réglages, avec le logotype et le lien secondaire modifiables directement sur le canevas.

Cliquez sur n’importe quel élément du canevas pour le modifier directement
Ou décrivez le changement en une phrase et laissez l’assistant s’en charger
Exportez en 9:16, 16:9, 1:1, 4:5 depuis le même document

Contrôles du Studio

7 nommés

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

Pourquoi exporter un hero en vidéo

Une animation de dégradé en CSS coûte un peu de GPU à chaque visiteur et ne quitte jamais votre site. Une boucle rendue ne coûte rien à lire, fonctionne dans un fil, sur un écran et dans un emplacement publicitaire, et transporte le même titre partout où vous la placez. Ce modèle est le moyen le moins cher d’obtenir une image hero cohérente sur tout un lancement : un document, quatre formats, un message.

Dégradé mesh : questions et réponses

Le modèle de vidéo de fond pour site web est-il gratuit ?+

Gratuit à ouvrir et à modifier, et les comptes gratuits disposent d’exports 720p gratuits et illimités avec un petit filigrane LazyKiwi. Le 1080p sans filigrane est inclus dans toute offre payante si vous avez besoin de Full HD pour un grand écran.

Quels formats d’image puis-je exporter ?+

9:16, 16:9, 1:1 et 4:5. Le 16:9 est celui d’un hero de site ou d’un écran ; la version verticale empile le titre et le bouton au lieu de les rogner.

Puis-je changer le texte et les couleurs ?+

Le titre, le sous-titre, le libellé du bouton, les deux couleurs du dégradé et la douceur sont des réglages nommés ; le logotype et le lien secondaire sont des textes modifiables sur le canevas.

Ai-je besoin d’After Effects ?+

Non. Le mesh est un shader dans le document : rien à installer, et aucune image de dégradé à réexporter quand les couleurs changent.

Quelle est la durée du clip ?+

Huit secondes, conçues comme une boucle parfaite, avec le hero complet assemblé à 3,4 s.