Loopvideo: slik lager merkevarer klipp som aldri tar slutt

En loopvideo er et kort klipp laget for å gjentas i det uendelige uten at noen ser hvor det starter på nytt. For merkevarer er det et av de mest nyttige formatene som finnes: én fil kan gå bak en overskrift på nettsiden, på en skjerm ved kassen, under en låt på Spotify eller bak ventekortet i en direktesending. Håndverket er enkelt å beskrive. La det siste bildet gå rett over i det første, hold bevegelsen langsom og sammenhengende, og legg aldri en engangshendelse i klippet, for alt som skjer én gang, blir et merke for omstarten.

Hvor merkevarer bruker en loopvideo

Looper passer overalt der folk kommer til et tilfeldig tidspunkt og blir værende en ukjent tid. Ingen begynner å se på et butikkvindu ved sekund null, så en historie med begynnelse og slutt har feil form. En loop har ingen begynnelse, og det er nettopp poenget.

Hvert av disse stedene har egne regler for størrelse og lyd. Videobakgrunner på nettsider dekker nettet i detalj, og ambient videobakgrunner tar for seg de lange, rolige loopene som går på skjermer og i strømmer.

Hva som får en loop til å føles endeløs

Teknisk trenger en loop bare at slutten møter starten. For øyet trengs mer. Folk legger merke til gjentakelse gjennom landemerker: øyeblikket en lys flekk passerer et hjørne, bildet der en form kommer inn, et korn som alltid havner på samme sted. Fjern landemerkene, og et klipp på tolv sekunder kan føles som om det varer i timevis.

• Sammenhengende bevegelse. Drift, rotasjon og langsomme panoreringer som aldri stopper. Stopp og start skaper en takt øyet kan telle.
• Hele sykluser. Alt som beveger seg, fullfører et helt antall runder eller passeringer i løpet av klippet, så det slutter nøyaktig der det begynte.
• Flere lag i beslektet tempo. En bakgrunn som går én syklus og et høylys som går to, skjuler hverandres gjentakelse.
• Ingen enkelthendelser. Ingen blink, kutt, logo-sting eller gjenstand som dukker opp én gang. Skjer det én gang, markerer det omstarten.
• Stillestående ord. Tekst som animeres inn, animeres inn igjen i hver loop. I en loopvideo bør ordene bare være der.

Detaljene på bildenivå i en ren skjøt, blant annet det dupliserte siste bildet som står bak de fleste hakkene, finner du i sømløs loopvideo.

Hvor lang bør en loopvideo være

Lengden avhenger av tempo og av hvor lenge folk ser. En loop noen kaster et blikk på i tre sekunder, kan være kort. En loop som går på en vegg hele ettermiddagen, må være lang nok, og langsom nok, til at gjentakelsen aldri blir åpenbar. Lengre klipp gir større filer, så finn balansen mellom de to.

Hvor lang bør en videoloop være går gjennom denne avveiningen plassering for plassering, med filstørrelser i tankene.

Slik lager du en loopvideo ut fra et design

1. 1

   Start med stedet den skal spilles

   Velg nøyaktig størrelse først: 1920×1080 for en liggende skjerm eller nettsidetopp, 1080×1920 for stories, Reels og stående skjermer, 1080×1350 for et feedinnlegg.

2. 2

   Velg ett lag som beveger seg

   Som regel bakgrunnen. En bevegelig gradient eller et materiale er ideelt, fordi det ikke har kanter som avslører loopen.

3. 3

   Hold ordene stille og rolige

   Plasser teksten der bakgrunnen er roligst. Må noe animeres, legg heller bevegelsen i bakgrunnen.

4. 4

   Sett lengden til hele sykluser

   Sørg for at hver bevegelse fullfører et helt antall sykluser i klippet, så det siste bildet flyter over i det første.

5. 5

   Eksporter som video, og se den loope

   Eksporter MP4, eller WebM til nettet, og spill den på repeat i full størrelse i minst ett minutt. Rett opp alt du legger merke til to ganger.

Det er her Gradiently passer inn. Hver Mark er en levende gradient- og materialbakgrunn som allerede beveger seg, så med Pro eksporteres et design bygd på den som en sømløs loop på 5 til 30 sekunder uten at du animerer noe. Fordi ingen Marks ser like ut, blir ikke loopen i vinduet ditt den samme standardbakgrunnen som butikken ved siden av har.

Slik legger du en loopvideo på en nettside

Nettlesere spiller bare av video automatisk når den er dempet, og telefoner trenger playsinline for å holde den inne på siden. Legg til et plakatbilde så noe vises før videoen laster, og tilby den mindre WebM-filen først med MP4 som reserve.

<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 siste regelen betyr noe. Noen opplever konstant bevegelse som distraherende eller fysisk ubehagelig, og operativsystemet deres sier fra til nettleseren. Prefers reduced motion forklarer hvordan du respekterer det på riktig måte.