Looprande video: så gör varumärken klipp som aldrig verkar ta slut

En looprande video är ett kort klipp som är byggt för att upprepas i evighet utan att någon ser var det startar om. För varumärken är det ett av de mest användbara formaten som finns: en enda fil kan rulla bakom rubriken på en webbplats, på en skärm vid kassan, under en låt på Spotify eller bakom en livestreams väntkort. Hantverket är enkelt att beskriva. Låt sista bildrutan leda rakt in i den första, håll rörelsen långsam och kontinuerlig och lägg aldrig in en engångshändelse i klippet, för allt som sker bara en gång blir ett tecken på omstarten.

Var varumärken använder looprande video

Loopar passar överallt där människor dyker upp vid en slumpmässig tidpunkt och stannar en okänd tid. Ingen börjar titta på ett skyltfönster vid sekund noll, så en berättelse med början och slut har fel form. En loop har ingen början, och det är precis poängen.

Varje sådan plats har sina egna regler för storlek och ljud. Videobakgrunder på webbplatser går igenom webbfallet i detalj, och ambient videobakgrund handlar om de långa, lugna looparna som rullar på skärmar och i streamar.

Vad som får en loop att kännas oändlig

Tekniskt behöver en loop bara att slutet möter början. För ögat krävs mer. Människor märker upprepning genom hållpunkter: ögonblicket när en ljus fläck passerar ett hörn, bildrutan där en form kommer in, en kornflimmer som alltid hamnar på samma ställe. Ta bort hållpunkterna så kan ett tolv sekunder långt klipp kännas som om det pågår i timmar.

• Kontinuerlig rörelse. Drivande, roterande och långsamma panoreringar som aldrig stannar. Stopp och start skapar en takt som ögat kan räkna.
• Hela varv. Allt som rör sig fullbordar ett helt antal varv eller passager under klippets längd, så att det slutar exakt där det började.
• Flera lager med besläktade hastigheter. En bakgrund som går ett varv och ett ljussken som går två varv döljer varandras upprepning.
• Inga engångshändelser. Inget blixtljus, ingen klippning, ingen logotypsignal och inget föremål som dyker upp bara en gång. Om det sker en gång markerar det omstarten.
• Stillastående ord. Text som animeras in animeras in igen vid varje varv. I en looprande video ska orden helt enkelt bara finnas där.

Detaljerna på bildrutenivå för en ren skarv, inklusive den dubblerade sista bildrutan som orsakar de flesta hackningar, finns i sömlös loopvideo.

Hur lång ska en looprande video vara

Längden beror på farten och på hur länge människor tittar. En loop som någon ögnar på i tre sekunder kan vara kort. En loop som rullar på en vägg hela eftermiddagen måste vara tillräckligt lång och långsam för att upprepningen aldrig ska bli tydlig. Längre klipp ger större filer, så väg de två mot varandra.

Hur lång ska en videoloop vara går igenom avvägningen plats för plats, med filstorlekar i åtanke.

Så gör du en looprande video av en design

1. 1

   Utgå från platsen där den ska spelas

   Välj den exakta storleken först: 1920×1080 för en liggande skärm eller hero, 1080×1920 för stories, Reels och stående skärmar, 1080×1350 för ett inlägg i flödet.

2. 2

   Välj ett rörligt lager

   Oftast bakgrunden. En rörlig gradient eller ett rörligt material är idealiskt, eftersom det saknar kanter som kan avslöja loopen.

3. 3

   Låt orden vara stilla och lugna

   Placera texten där bakgrunden är som lugnast. Måste den animeras, håll rörelsen inne i bakgrunden i stället.

4. 4

   Sätt längden till hela varv

   Se till att varje rörelse fullbordar ett helt antal varv i klippet, så att sista bildrutan flyter över i den första.

5. 5

   Exportera som video och titta på den i loop

   Exportera MP4, eller WebM för webben, och spela den på repeat i full storlek i minst en minut. Rätta till det du lägger märke till två gånger.

Här passar Gradiently in. Varje Mark är en levande gradient och en materialbakgrund som redan rör sig, så med Pro exporteras en design byggd på den som en sömlös loop på 5 till 30 sekunder utan att du animerar något. Eftersom inga två Marks ser likadana ut blir loopen i ditt fönster inte samma stockbakgrund som hos butiken bredvid.

Så lägger du en looprande video på en webbplats

Webbläsare spelar bara upp video automatiskt om den är ljudlös, och mobiler behöver playsinline för att hålla den kvar på sidan. Lägg till en posterbild så att något syns innan videon har laddats, och erbjud den mindre WebM-filen först med MP4 som reserv.

<video class="hero-loop" autoplay muted loop playsinline
       poster="hero-first-frame.jpg" width="1920" height="1080">
  <source src="hero-loop.webm" type="video/webm">
  <source src="hero-loop.mp4" type="video/mp4">
</video>

<style>
  @media (prefers-reduced-motion: reduce) {
    .hero-loop { display: none; }
    .hero { background: url(hero-first-frame.jpg) center / cover; }
  }
</style>

Den sista regeln spelar roll. Vissa tycker att ständig rörelse är störande eller fysiskt obehaglig, och deras operativsystem talar om det för webbläsaren. Minskad rörelse förklarar hur du respekterar det på rätt sätt.