# Nahtloser Loop: so machst du ein Video, das nie springt

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

Ein Loop, der alle zehn Sekunden einmal springt, ist schlimmer als gar keine Bewegung. Die Lösung ist kein besserer Editor, sondern Bewegung, die dafür gemacht ist, nach Hause zu kommen.

## The short version

- Ein nahtloser Loop ist ein Video, dessen letztes Frame direkt ins erste führt, sodass es sich ohne sichtbaren Sprung wiederholen kann.
- Generierte Bewegung loopt sauber, wenn alles, was sich bewegt, innerhalb der Videolänge eine ganze Zahl von Zyklen durchläuft.
- Das häufigste Ruckeln ist ein doppeltes Frame: Das letzte Frame sollte das direkt vor dem ersten sein, keine Kopie davon.
- Filmmaterial, das nicht zum Loopen gedacht war, lässt sich retten, indem man seine beiden Hälften tauscht und an der neuen Stelle überblendet.
- Prüf einen Loop, indem du ihn mehrmals in voller Größe abspielst und sein letztes Frame mit dem ersten vergleichst.

Ein **nahtloser Loop** ist ein Video, dessen letztes Frame direkt ins erste führt, sodass es sich endlos wiederholen kann, ohne dass jemand sieht, wo es beginnt. Das Geheimnis: Alles im Bild muss genau im richtigen Moment nach Hause kommen. Jede Position, Farbe, Helligkeit und jedes Partikel endet einen Schritt vor dem Punkt, an dem es begann. Stimmt das, kann ein zehnsekündiger Clip den ganzen Tag laufen.

Dieser Leitfaden zeigt, warum Loops springen, wie du Bewegung gestaltest, die von selbst zurückkehrt, wie du Material rettest, das nicht zum Loopen gedreht wurde, und wie du die Naht vor dem Veröffentlichen prüfst. Zum Look des Loops selbst siehe [animierte Farbverlauf-Hintergründe](https://gradiently.design/de/guide/animated-gradient-background).

## Warum die meisten Loops springen

Ein Sprung an der Naht hat immer eine bestimmte Ursache, und jede hat eine bestimmte Lösung. Es hilft, zu benennen, welche du gerade vor dir hast.

| Ursache | Was du siehst | Lösung |
| --- | --- | --- |
| Ende passt nicht zum Anfang | Farbe oder Position springt zurück | Bewegung periodisch machen oder überblenden |
| Doppeltes Frame | Ein winziges Ruckeln oder eine Pause an der Naht | Das letzte Frame einen Schritt vor dem ersten rendern |
| Bewegung bremst an den Enden bis zum Stillstand | Ein Moment Stille, dann wieder Bewegung | Das Tempo über die Naht hinweg gleich halten |
| Zufälliges Rauschen oder Partikel, die sich nicht wiederholen | Textur oder Pünktchen springen | Das Rauschen loopen oder die Partikel erst einschwingen lassen |
| Starke Kompression | Ein weiches Unschärfe-Pulsieren an der Naht | In höherer Qualität exportieren |

Die dritte Ursache ist tückisch. Animierst du von A nach B und zurück mit Easing an beiden Enden, bremst die Bewegung an der Naht bis zum Stillstand, und der Loop scheint zu zögern. Easing gehört an Anfang und Ende einer einmaligen Bewegung, nicht an die Naht eines Loops. [Easing](https://gradiently.design/de/guide/easing) erklärt den Unterschied.

## Bewegung gestalten, die von selbst loopt

Die saubersten Loops bestehen aus periodischer Bewegung: Bewegung, die sich von Natur aus wiederholt, wie ein Punkt, der einen Kreis abfährt, oder ein Licht, das an- und abschwillt. Durchläuft alles, was sich bewegt, eine ganze Zahl von Zyklen in der Länge des Videos, passt das letzte Frame automatisch zum ersten. Kreise, Sinuswellen und volle Umdrehungen des Farbtons sind alle periodisch.

```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
}
```

Periodische Bewegung für einen Loop von 10 Sekunden. Jeder Wert durchläuft ganze Zyklen, und weil `phase` knapp vor 1 stoppt, wird Frame 300 (eine Kopie von Frame 0) nie gezeichnet.

Dieses letzte Detail verhindert das Ruckeln. Ist dein letztes Frame identisch mit dem ersten, zeigt der Player bei jeder Wiederholung dasselbe Bild zweimal hintereinander. Das letzte Frame sollte das direkt vor dem ersten sein.

- Frame 298: `linear-gradient(150deg, #0f172a 0%, #1d4ed8 52%, #22d3ee 100%)`
- Frame 299: das letzte: `linear-gradient(151deg, #0f172a 0%, #1d4ed8 51%, #22d3ee 100%)`
- Frame 0: das erste: `linear-gradient(152deg, #0f172a 0%, #1d4ed8 50%, #22d3ee 100%)`
- Frame 1: `linear-gradient(153deg, #0f172a 0%, #1d4ed8 49%, #22d3ee 100%)`

An einer guten Naht unterscheidet sich jedes Frame vom nächsten um denselben kleinen Schritt. Es gibt kein Frame mit größerer Änderung und keines, das sich wiederholt.

### Rauschen, Körnung und Partikel loopen

Organische Texturen entstehen oft aus Rauschen, das sich standardmäßig nicht wiederholt. Der übliche Trick ist, sich im Kreis statt geradeaus durch das Rauschen zu bewegen, sodass du nach einem Loop wieder am selben Punkt bist. Partikelsysteme sind anders: Die Position jedes Partikels hängt von den vorigen ab. Lässt du die Simulation vor der Aufnahme einen ganzen Loop lang laufen, finden die Partikel ihren Rhythmus, und das aufgenommene Ende liegt nah am Anfang.

## So loopst du Material, das nicht zum Loopen gedreht wurde

Gefilmte Clips, etwa Wellen, Rauch oder Wolken, enden selten dort, wo sie beginnen. Die klassische Lösung funktioniert in jedem Videoeditor: Verleg die Naht in die Mitte des Clips, wo das Material ohnehin durchgehend ist, und versteck den neuen Schnitt mit einer Überblendung.

1. **Teil den Clip in der Mitte** Schneide den Clip in zwei Hälften, A und B, an einer Stelle mit gleichmäßiger Bewegung.
2. **Tausch die Hälften** Setz B an den Anfang und A dahinter. Das Ende von A fließt jetzt in den Anfang von B, weil das im Original ein durchgehender Moment war, also ist der Loop-Punkt nahtlos.
3. **Überblende die neue Mitte** Wo B auf A trifft, lass sie eine halbe bis zwei Sekunden überlappen und blende eine in die andere über. Weiches, texturiertes Material versteckt eine Überblendung am besten.
4. **Kürze auf eine runde Länge** Ziel auf eine ganze Zahl von Sekunden, dann lässt sich der Loop leicht timen und wiederverwenden.

> **Meide auffällige Details** Eine Überblendung versteckt Textur gut, aber keine Objekte. Fliegt während der Überblendung ein Vogel durchs Bild, sehen Leute zwei Geister. Wähle einen Abschnitt ohne auffällige Details.

## Die Länge des Loops wählen

Längere Loops wirken weniger repetitiv, sind aber größere Dateien und brauchen mehr periodische Bewegung, um interessant zu bleiben. Kurze Loops wiederholen sich oft, also muss ihre Bewegung dezent genug sein, um nicht hypnotisch zu werden. Bei 30 Frames pro Sekunde hat ein Loop von 10 Sekunden 300 Frames, die sich sauber in Hälften, Drittel und Viertel für deine Zyklen teilen lassen.

| Wo er läuft | Empfohlene Länge | Warum |
| --- | --- | --- |
| Stories und kurze Posts | 5 bis 10 Sekunden | Leute scrollen schnell weiter, kleine Dateien |
| Reels und Videohintergründe | 10 bis 15 Sekunden | Raum für einen langsameren, ruhigeren Zyklus |
| Website-Hero | 8 bis 15 Sekunden | Kurz genug, um die Datei leicht zu halten |
| Screens, Displays, Wallpaper | 15 bis 30 Sekunden | Leute schauen länger hin, also müssen Wiederholungen unauffälliger sein |

Ausgangspunkte, keine Regeln. Auch das Dateiformat zählt, siehe [GIF oder MP4](https://gradiently.design/de/guide/gif-vs-mp4).

## So prüfst du die Naht

Beurteile einen Loop nicht, indem du ihn einmal im Editor ansiehst. Sieh ihn so, wie Leute ihm begegnen: wiederholt, in voller Größe, länger als nötig erscheint. Nähte, die sich in einer kleinen Vorschau verstecken, zeigen sich oft auf einem großen Bildschirm.

```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
```

Zwei schnelle Prüfungen mit ffmpeg. Das letzte Frame sollte sich vom ersten um genau einen normalen Bewegungsschritt unterscheiden.

- Sieh dir die vierfache Datei im Vollbild an und achte nur auf die Naht.
- Schau auf Ränder und Ecken, wo Abweichungen am deutlichsten sind.
- Beobachte Körnung und Partikel getrennt von der Farbe.
- Siehst du an der Naht ein weiches Pulsieren, ist es Kompression: Exportiere in höherer Qualität.

Machst du Loops in Gradiently, ist das für dich erledigt: Jeder exportierte Loop ist so gebaut, dass die bewegte Fläche in der gewählten Länge von 5 bis 30 Sekunden ganze Zyklen durchläuft und ihr Ende auf ihren Anfang trifft. Es ist derselbe Ansatz wie im Code, angewendet auf deinen Mark. Loops eignen sich auch gut als [Live-Wallpaper](https://gradiently.design/de/guide/live-wallpaper) und [Videohintergründe für Websites](https://gradiently.design/de/guide/video-background-website).

## FAQ

### Was ist ein nahtloser Loop?

Ein Video oder eine Animation, deren letztes Frame direkt ins erste führt, sodass sie sich ohne sichtbaren Sprung oder Pause fortlaufend wiederholen kann.

### Warum ruckelt mein Loop am Ende?

Meist, weil das letzte Frame eine Kopie des ersten ist und dasselbe Bild doppelt erscheint. Mach das letzte Frame zu dem direkt vor dem ersten.

### Wie loope ich ein Video, das nicht zum Loopen gedreht wurde?

Teil es in der Mitte, tausch die beiden Hälften und überblende dort, wo sie jetzt aufeinandertreffen. Die ursprüngliche Stelle wird durchgehend, und die Überblendung versteckt die neue.

### Wie lang sollte ein Loop-Video sein?

5 bis 10 Sekunden für Stories und Posts, 10 bis 15 für Reels und Web-Hintergründe und 15 bis 30 für Screens und Wallpaper, auf die Leute länger schauen.

### Warum gibt es am Loop-Punkt eine Unschärfe?

Das ist meist Kompression, nicht die Animation. Ein Export in höherer Qualität oder Bitrate beseitigt sie.