# Vidéo en boucle parfaite : faire une boucle sans saut

[Canonical HTML page](https://gradiently.design/fr/guide/seamless-loop-video)

Une boucle qui saute toutes les dix secondes est pire que pas de mouvement du tout. La solution n’est pas un meilleur logiciel de montage : c’est un mouvement conçu pour revenir à son point de départ.

## The short version

- Une boucle parfaite est une vidéo dont la dernière image mène directement à la première, pour qu’elle se répète sans saut visible.
- Un mouvement généré boucle proprement quand tout ce qui bouge accomplit un nombre entier de cycles sur la durée de la vidéo.
- La saccade la plus courante vient d’une image en double : l’image finale doit être celle juste avant la première, pas une copie de celle-ci.
- Une séquence filmée qui n’a pas été pensée pour boucler peut se réparer en échangeant ses deux moitiés et en faisant un fondu enchaîné au nouveau raccord.
- Vérifiez une boucle en la lisant à répétition en taille réelle et en comparant sa dernière image à sa première.

Une **boucle parfaite** est une vidéo dont la dernière image mène directement à la première, si bien qu’elle peut se répéter indéfiniment sans que personne ne voie où elle commence. Le secret : tout ce qui est dans le cadre doit revenir exactement au bon moment. Chaque position, couleur, niveau de lumière et particule finit un pas avant son point de départ. Réussissez cela, et un clip de dix secondes peut tourner toute la journée.

Ce guide explique pourquoi les boucles sautent, comment concevoir un mouvement qui revient tout seul, comment sauver une séquence qui n’était pas faite pour boucler, et comment vérifier le raccord avant de publier. Pour le rendu de la boucle elle-même, voir [arrière-plans en dégradé animé](https://gradiently.design/fr/guide/animated-gradient-background).

## Pourquoi la plupart des boucles sautent

Un saut au raccord a toujours une cause précise, et chacune a sa solution. Il aide de nommer celle que vous avez sous les yeux.

| Cause | Ce que vous voyez | Solution |
| --- | --- | --- |
| La fin ne correspond pas au début | La couleur ou la position revient d’un coup | Rendre le mouvement périodique, ou faire un fondu enchaîné |
| Image en double | Une minuscule saccade ou pause au raccord | Rendre la dernière image un pas avant la première |
| Le mouvement ralentit jusqu’à l’arrêt aux extrémités | Un temps d’immobilité, puis le mouvement reprend | Garder une vitesse continue à travers le raccord |
| Bruit ou particules aléatoires qui ne se répètent pas | La texture ou les grains sautent | Boucler le bruit, ou laisser d’abord les particules se stabiliser |
| Forte compression | Une douce pulsation de flou au raccord | Exporter en meilleure qualité |

La troisième cause est sournoise. Si vous animez de A vers B puis retour avec une accélération douce aux deux extrémités, le mouvement ralentit jusqu’à l’arrêt au raccord et la boucle semble hésiter. L’accélération douce a sa place au début et à la fin d’un mouvement isolé, pas au raccord d’une boucle. [Easing](https://gradiently.design/fr/guide/easing) explique la différence.

## Concevoir un mouvement qui boucle tout seul

Les boucles les plus propres sont faites de mouvement périodique : un mouvement qui se répète par nature, comme un point qui parcourt un cercle ou une lumière qui monte et retombe. Si tout ce qui bouge accomplit un nombre entier de cycles sur la durée de la vidéo, l’image finale s’aligne automatiquement sur la première. Cercles, sinusoïdes et tours complets de teinte sont tous périodiques.

```js
const fps = 30
const seconds = 10
const frames = fps * seconds            // 300 frames, numbered 0 to 299

for (let i = 0; i < frames; i++) {
  const phase = i / frames              // 0 up to, but never reaching, 1
  const turn = phase * Math.PI * 2      // one full turn per loop

  const x = Math.cos(turn) * 40         // drift in a circle, 40 px across
  const y = Math.sin(turn) * 40
  const hue = 280 + Math.sin(turn * 2) * 20   // two gentle hue swings per loop
  const glow = 0.5 + 0.5 * Math.sin(turn)     // light breathes once per loop

  drawFrame(i, { x, y, hue, glow })     // your renderer
}
```

Un mouvement périodique pour une boucle de 10 secondes. Chaque valeur accomplit des cycles entiers, et comme `phase` s’arrête juste avant 1, l’image 300 (une copie de l’image 0) n’est jamais dessinée.

Ce dernier détail évite la saccade. Si votre image finale est identique à la première, le lecteur montre la même image deux fois de suite à chaque répétition. L’image finale doit être celle juste avant la première.

- Image 298: `linear-gradient(150deg, #0f172a 0%, #1d4ed8 52%, #22d3ee 100%)`
- Image 299 : dernière: `linear-gradient(151deg, #0f172a 0%, #1d4ed8 51%, #22d3ee 100%)`
- Image 0 : première: `linear-gradient(152deg, #0f172a 0%, #1d4ed8 50%, #22d3ee 100%)`
- Image 1: `linear-gradient(153deg, #0f172a 0%, #1d4ed8 49%, #22d3ee 100%)`

De part et d’autre d’un bon raccord, chaque image diffère de la suivante du même petit pas. Aucune image ne change davantage, et aucune ne se répète.

### Boucler le bruit, le grain et les particules

Les textures organiques sont souvent faites de bruit, qui ne se répète pas par défaut. L’astuce classique consiste à parcourir le bruit en cercle plutôt qu’en ligne droite : après une boucle, on revient au même point. Les systèmes de particules sont différents : la position de chaque particule dépend de celles d’avant. Faire tourner la simulation sur une boucle complète avant d’enregistrer permet aux particules de trouver leur rythme, si bien que la fin enregistrée se rapproche de son début.

## Comment boucler une séquence qui n’était pas faite pour boucler

Les séquences filmées, comme des vagues, de la fumée ou des nuages, finissent rarement là où elles commencent. La solution classique marche dans tout logiciel de montage : déplacez le raccord au milieu du clip, là où l’image est déjà continue, et masquez la nouvelle coupe par un fondu enchaîné.

1. **Coupez le clip au milieu** Coupez le clip en deux moitiés, A et B, à un moment où le mouvement est régulier.
2. **Échangez les moitiés** Placez B en premier et A en second. La fin de A se raccorde maintenant au début de B, car c’était un seul moment continu dans l’original : le point de boucle est donc parfait.
3. **Enchaînez en fondu le nouveau milieu** Là où B rejoint A, faites-les se chevaucher d’une demi-seconde à deux secondes et fondez l’un dans l’autre. Les images douces et texturées cachent le mieux un fondu enchaîné.
4. **Raccourcissez à une durée ronde** Visez un nombre entier de secondes : la boucle est plus facile à caler et à réutiliser.

> **Évitez les repères évidents** Un fondu enchaîné masque bien la texture, mais pas les objets. Si un oiseau traverse le cadre pendant le fondu, on verra deux fantômes. Choisissez un passage sans rien de distinctif.

## Choisir la durée d’une boucle

Les boucles longues paraissent moins répétitives, mais leurs fichiers sont plus lourds et elles demandent plus de mouvement périodique pour rester intéressantes. Les boucles courtes se répètent souvent, donc leur mouvement doit rester assez discret pour ne pas devenir hypnotique. À 30 images par seconde, une boucle de 10 secondes fait 300 images, qui se divisent proprement en moitiés, tiers et quarts pour vos cycles.

| Où elle est diffusée | Durée conseillée | Pourquoi |
| --- | --- | --- |
| Stories et courts posts | 5 à 10 secondes | Le public passe vite ; fichiers légers |
| Reels et arrière-plans vidéo | 10 à 15 secondes | De la place pour un cycle plus lent et plus calme |
| Hero de site web | 8 à 15 secondes | Assez court pour garder le fichier léger |
| Écrans, afficheurs, fonds d’écran | 15 à 30 secondes | On regarde plus longtemps : les répétitions doivent être moins visibles |

Des points de départ, pas des règles. Le format de fichier compte aussi ; voir [GIF ou MP4](https://gradiently.design/fr/guide/gif-vs-mp4).

## Comment vérifier le raccord

Ne jugez pas une boucle en la regardant une seule fois dans un éditeur. Regardez-la comme on la découvrira : en répétition, en taille réelle, plus longtemps qu’il ne semble nécessaire. Les raccords qui se cachent dans un petit aperçu se voient souvent sur un grand écran.

```bash
# Play the loop four times in a row as one file, to watch the joins
ffmpeg -stream_loop 3 -i loop.mp4 -c copy loop-x4.mp4

# Save the first and last frames as images to compare side by side
ffmpeg -i loop.mp4 -vf "select=eq(n\,0)" -frames:v 1 first.png
ffmpeg -sseof -0.5 -i loop.mp4 -update 1 last.png
```

Deux vérifications rapides avec ffmpeg. La dernière image doit différer de la première d’exactement un pas de mouvement normal.

- Regardez le fichier répété quatre fois en plein écran et ne regardez que le raccord.
- Regardez les bords et les coins, où la dérive se voit le plus.
- Regardez le grain et les particules séparément de la couleur.
- Si vous voyez une douce pulsation au raccord, c’est de la compression : exportez en meilleure qualité.

Si vous faites vos boucles dans Gradiently, c’est géré pour vous : chaque boucle exportée est construite pour que le champ en mouvement accomplisse des cycles entiers sur la durée choisie, de 5 à 30 secondes, et que sa fin rejoigne son début. C’est la même approche que celle que vous suivriez en code, appliquée à votre Mark. Les boucles font aussi de bons [fonds d’écran animés](https://gradiently.design/fr/guide/live-wallpaper) et [arrière-plans vidéo de site web](https://gradiently.design/fr/guide/video-background-website).

## FAQ

### Qu’est-ce qu’une boucle parfaite ?

C’est une vidéo ou une animation dont la dernière image mène directement à la première, pour qu’elle se répète en continu sans saut ni pause visible.

### Pourquoi ma boucle saccade-t-elle à la fin ?

Le plus souvent parce que la dernière image est une copie de la première : la même image s’affiche deux fois. Faites de l’image finale celle qui précède la première.

### Comment boucler une vidéo qui n’a pas été filmée pour ça ?

Coupez-la au milieu, échangez les deux moitiés et faites un fondu enchaîné là où elles se rejoignent maintenant. Le raccord d’origine devient continu, et le fondu masque le nouveau.

### Quelle durée pour une vidéo en boucle ?

5 à 10 secondes pour les stories et les posts, 10 à 15 pour les reels et les arrière-plans web, et 15 à 30 pour les écrans et fonds d’écran que l’on regarde plus longtemps.

### Pourquoi y a-t-il un flou au point de boucle ?

C’est en général de la compression, pas l’animation. Exporter avec une meilleure qualité ou un meilleur débit le supprime.