← Retour au journal

Distro / Décryptage

Distro en mouvement : six secondes pour donner du relief.

Emblème Distro sombre aux reflets vert lime
Image de départ de l’animation réalisée pour la page d’accueil de Distro.

L’animation de la page d’accueil part d’une intention simple : donner du volume à l’identité de Distro. Une courte séquence créée avec l’IA, puis préparée pour trouver sa place sur le web.

Commencer par une image juste

Le point de départ du projet est un emblème sombre, travaillé comme un objet, avec des reflets vert lime. Avant de produire du mouvement, il fallait définir cette matière, sa lumière et la place qu’elle occuperait dans la page. Une animation réussie commence souvent par un cadre qui fonctionne déjà à l’arrêt.

Pour Distro, la direction visuelle associe des surfaces sobres et une couleur vive. L’image de départ reprend ce contraste. Elle sert de référence à la génération vidéo et reste également utile comme affiche de remplacement lorsque la séquence ne joue pas.

Diriger la génération, puis travailler la boucle

La séquence a été produite avec Kling à partir de cette image validée. La réalisation ne s’arrête pas au fichier généré : il faut regarder la continuité du mouvement, choisir la durée et préparer le retour au début. Une rupture perceptible peut devenir très présente quand la même séquence tourne en boucle.

La version intégrée dure six secondes et ne comporte pas de son. Le mouvement et la lumière donnent de la présence à l’emblème tout en laissant le texte porter la présentation de l’activité. Ce format court permet de travailler un geste visuel précis.

La boucle intégrée à la page d’accueil. Lecture manuelle ici, sans son.

Penser à la page qui accueille la vidéo

Un film destiné au web fait partie d’une interface. Sur l’accueil, une image fixe assure la continuité visuelle avant la lecture. La vidéo dispose d’une commande de pause et s’arrête lorsqu’elle sort de l’écran ou que l’onglet devient inactif. Les préférences de réduction des animations sont également prises en compte.

Ces choix font partie du travail de réalisation. Ils permettent de conserver l’intention graphique dans des conditions de consultation différentes, notamment sur smartphone. La création d’image, la direction du mouvement et le développement se répondent ainsi jusqu’à la mise en ligne.

Voir l’animation dans la page d’accueil →

Une idée à concrétiser ?

Passons de la lecture
à la création

contact@distro.fr