Motion graphics-exempel: AI-stödda videor sorterade efter vad de gör
Av Potto AI Team·
Motion graphics-exempel sorterade efter uppgift: lanseringsfilmer, produktskärmar, kinetic type, databerättelser, explainers och logotypreveals, var och en från en namngiven skapare.
De mest användbara motion graphics-exemplen sorteras efter den uppgift videon har, inte efter visuell stil: en lanseringsfilm, en animerad produktskärm, en kinetic type-reel, en databerättelse, en explainer eller en logotypreveal. Varje uppgift har sin egen längd, sitt eget bildförhållande och sin egen ordning på idéerna, så ett "bra exempel" hjälper bara om det är rätt sorts exempel. Den här guiden plockar 21 motion graphics-exempel ur biblioteket med AI motion graphics-videor på Potto, sorterar dem i de sex uppgifterna och anger för varje verk upphovsperson, längd, bildförhållande och vad du ska titta efter.
En sak först: ingen av de här videorna är gjord av Potto. De är gjorda och publicerade av oberoende skapare, som krediteras med sina X-handtag nedan. Potto samlar dem så att du kan titta, läsa prompten där upphovspersonen har delat en, och starta en egen video från idén. Beskrivningarna använder bara varje videos titel och uppgifterna på dess sida (upphovsperson, kategori, längd, bildförhållande, verktyg), eftersom målet är att hjälpa dig välja vad du ska studera, inte att recensera andras arbete. Allt om Pottos eget verktyg kommer från produkten som den fungerar i dag.
Vad som räknas som motion graphics
Motion graphics är grafisk design satt i rörelse: text, former, ikoner, diagram och bilder som rör sig för att förklara något, tillkännage något eller ge ett varumärke ett uttryck. Adobes guide till motion graphics definierar dem som "graphics with movement" och kallar dem "shorter pieces of animation that entertain or impart information", till skillnad från långfilmer med figurer och en handling. Wikipedias artikel om säger att motion design vanligtvis förknippas med att sätta abstrakta objekt, text och andra grafiska formelement i rörelse.
Tillsammans namnger de två källorna var arbetet syns: förtexter för film och tv, grafik för sändning och nyheter, reklam och varumärke, animerad typografi, gränssnittsdesign samt explainer- och reklamvideor. Den listan är ordnad efter bransch. Den här guiden ordnar i stället efter uppgift, eftersom frågan när du gör en video är "vad försöker jag få fram?" snarare än "vilken bransch är det här?". De sex uppgifterna nedan motsvarar de kategorier biblioteket använder och täcker det mesta ett företag eller en skapare faktiskt behöver.
Uppgift
Vad den gör
Typisk fråga den svarar på
Lansering
Tillkännager en produkt eller en release
Vad är nytt och varför ska jag bry mig?
Produktskärmar
Animerar ett gränssnitt
Hur ser den här produkten ut och hur fungerar den?
Kinetic type
Flyttar ord som det huvudsakliga visuella
Vilken mening ska jag minnas?
Databerättelse
Får en siffra eller en trend att landa
Vad förändrades, och med hur mycket?
Explainer
Lär ut en idé i steg
Hur fungerar det här?
Logotypanimation
Avslöjar ett varumärkesmärke
Vem har gjort det här?
Hur de 21 exemplen valdes
Biblioteket är stort och växer hela tiden, så den här guiden citerar inga totalsiffror; sidan visar alltid de aktuella talen. För att välja exempel använde guiden fyra filter. Varje verk måste ha en krediterad upphovsperson, en registrerad längd och ett bildförhållande, en fungerande video och en titel som säger vad videon handlar om. Inom varje uppgift gynnades verk som varierar i längd, bildförhållande och verktyg, så att du ser spannet i stället för ett upprepat mönster.
Två fakta om hela biblioteket är värda att känna till innan exemplen. De kommer från bibliotekets poster som de kontrollerades 2026-10-12, och de kommer att förskjutas när verk läggs till:
De flesta verk är 16:9. Ungefär fyra av fem verk är 16:9, ungefär ett av åtta är 9:16 och resten är 1:1. Varje uppgift nedan följer samma skevhet, vilket stämmer med var folk tittar: webbplatser, presentationer och X.
Längden beror på uppgiften. Medianlängden är cirka 9 sekunder för logotypanimation, 15 för kinetic type, 30 för lansering, 35 för databerättelse, 36 för produktskärmar och 60 för explainer. Medianerna per uppgift finns i varje avsnitt.
De 21 verken står i egna avsnitt nedan, vart och ett länkat till sin sida där du kan spela upp det. För varje verk anger guiden upphovspersonens X-handtag, längden, bildförhållandet, verktygen där sidan listar dem, och om upphovspersonen delade prompten. "Prompt delad" betyder att upphovspersonen publicerade prompten på verkets sida, så att du kan läsa den innan du bestämmer dig för att återanvända den.
Exempel på lanseringsfilmer
En lanseringsfilm tillkännager något och ber tittaren minnas en sak: namnet. Bland bibliotekets lanseringsvideor är medianlängden 30 sekunder, och ungefär hälften är 30 sekunder eller kortare. Kategorin är också den med störst spridning i bildförhållanden, med ungefär ett av fem i 9:16 för telefoner.
Reddit marketing tool launch video av @anthonyriera är 52,8 sekunder i 16:9. Sidan listar Remotion som verktyg, samma renderer som Potto använder, vilket gör den till en användbar referens för vad en kodbyggd lanseringsfilm kan rymma på nära en minut.
TypingMind showreel announces team features av @ann_nnng är 15,0 sekunder i 16:9, byggd på canvas, och upphovspersonen delade prompten. Titeln namnger innehållet, team features, och formen, en showreel.
CodePilot promo floats 17 model-provider logos av @op7418 är 50,0 sekunder i 16:9. Titeln är i sig en precis brief: ett upprepat visuellt grepp, 17 logotyper, på en klocka på 50 sekunder.
Vad du ska titta efter. Spela en lanseringsfilm en gång utan ljud och notera den sekund då produktnamnet först syns. Räkna sedan hur många separata påståenden filmen gör. Exemplen ovan pekar på en regel som håller i hela kategorin: ju kortare filmen är, desto färre påståenden. En film på 15 sekunder bär en idé och ett namn; en film på 50 sekunder har plats för ett problem, några funktioner och en avslutande rad.
Låna det med Potto. Pottos verktyg för produktvideo bygger lanseringsfilmer från en beskrivning eller en länk. En brief som fungerar väl namnger publiken, längden och takterna:
Lanseringsfilm för en fiktiv budgetapp som heter Ledgerly, 30 sekunder, 16:9. Öppna med problemet att hålla koll på utgifter i kalkylark, visa tre funktioner, avsluta med appens namn och en uppmaning.
Exempel på produktskärmar
Animation av produktskärmar visar ett gränssnitt som gör något: en lista sorterar sig själv, en dashboard fylls, en telefon går igenom ett flöde. Kategorins medianlängd är 36 sekunder, men den mellersta hälften av verken ligger från cirka 24 till cirka 67 sekunder, så det är den mest varierade av de sex. Det är också där exemplen i 9:16 och 1:1 är mest användbara, eftersom appflöden ofta visas på telefoner.
Vad du ska titta efter. Pausa på den första bildrutan som visar gränssnittet och fråga vad tittaren ska titta på. Titta sedan på hur länge varje tillstånd stannar på skärmen. Animation av produktskärmar misslyckas när skärmen byter innan ögat har hittat förändringen, vilket är därför de kortaste exemplen här visar en omvandling och de längre grupperar sina tillstånd i steg.
Låna det med Potto. En produktdemovideo utgår från skärmbilder du laddar upp, upp till åtta bilder, dokument eller ljudfiler per projekt. Skärmbildsscener zoomar in och följer en markörbana, och varje scen kan bära en bildtext, så den vanliga briefen är en lista med steg:
Produktdemo för en fiktiv fakturaapp, 30 sekunder, 16:9. Använd mina tre skärmbilder: skapa en faktura, skicka den, se att den är betald. En kort bildtext per skärmbild, avslut på appens namn.
Exempel på kinetic type
Kinetic type sätter ord i rörelse som det huvudsakliga visuella. Det är den kortaste av de textledda uppgifterna: medianen är cirka 15 sekunder, och ungefär sju av tio verk är 30 sekunder eller kortare. Eftersom det inte finns något gränssnitt eller diagram som bär betydelsen måste texten göra det.
Showreel opens on a bold Decision title card av @kenn är 15,0 sekunder i 16:9, och upphovspersonen delade prompten. Det är en typografisk showreel, så titelrutan är öppningsdraget.
Slanted credit names glide over an orange grid av @goodside är 75,0 sekunder i 16:9, med prompten delad. I den längden är det upprepade greppet en lista med namn som rör sig över en enda bakgrund.
Vad du ska titta efter. Stäng av ljudet och läs videon. Kinetic type ska fungera som text: om meningarna är svaga räddar rörelsen dem inte. Slå sedan på ljudet och kontrollera om tajmingen för varje ord följer ljudet. De två exemplen på 15 sekunder knyter rörelsen till en titelruta eller ett tempo, medan de två exemplen på 75 sekunder lutar sig mot struktur, en eftertextlista och kapiteltitlar, för att hålla uppmärksamheten.
Låna det med Potto. Pottos textscener byggs upp på cue, och dess citat-, titel- och listscener bär korta rader. Det erbjuder inte fri bokstavsanimation, så en rippel i 128 BPM ligger utanför det som renderas. Det som fungerar väl är ett kort manus där varje rad får sin egen skärm:
Kinetic text-video, 15 sekunder, 16:9, stilen Bold Pop. Fem korta rader, en per skärm, om ett team som släpper varje fredag. Avsluta på raden "Ship it."
Exempel på databerättelser
En databerättelse får en siffra eller en trend att landa. Bland bibliotekets databerättelsevideor är medianen cirka 35 sekunder, och spridningen är stor, från 15 sekunder till väl över en minut. Kategorin hör till de minsta, vilket gör det här till ett bra ställe att studera varje exempel.
LLM release timeline tracks 2026 models month by month av @nummanali är 62,1 sekunder i 16:9, byggd på canvas, med prompten delad. Sidan beskriver en canvas-animation som går igenom 2026 månad för månad, så tiden är axeln.
Vad du ska titta efter. Hitta den enda siffran videon vill att du ska minnas, och kontrollera sedan hur videon förtjänar den: vad som kommer före, och vad som visas efter. De tre exemplen använder tre olika grepp för samma uppgift. Ett anger ett resultat, ett går längs en tidslinje och ett parar en siffra med en bild av det den mäter.
Låna det med Potto. Statistikscener visar en enda stor siffra, och diagramscener ritar stapel- eller ringdiagram med tre till sex värden som räknas upp. Om du skriver in siffrorna i briefen använder videon dem som de är skrivna, så kontrollera varje tal mot din källa innan du exporterar. Sidan animerat diagram samlar fler av den här sorten:
Databerättelse, 30 sekunder, 16:9. Ett fiktivt kafé ökade sitt genomsnittliga antal koppar per dag från 120 i juni till 190 i september. Öppna med frågan, visa de fyra månaderna som ett stapeldiagram, avsluta på ökningen på 58 %.
Exempel på explainers
En explainer lär ut en idé i steg. Det är den längsta av de sex: medianlängden är 60 sekunder, och bara ungefär ett av fem verk är 30 sekunder eller kortare. Bibliotekets explainer-videor har också det bredaste spannet av uttryck, från pixelkonst till handritade whiteboards.
Kinetic word cloud pitches an AI inference startup av @deedydas är 26,0 sekunder i 16:9, byggd med SVG och GSAP, med prompten delad. Det är den kortaste explainer här och pressar ihop en pitch till ett enda rörligt grepp.
Vad du ska titta efter. En explainer ska klara meningstestet: kan du efter en visning formulera idén i en mening? Titta efter ögonblicket då problemet blir lösningen, och räkna stegen mellan det ögonblicket och slutet. Två av de tre exemplen tar ett litet, konkret ämne (en siffra, ett onboardingflöde) och låter det bära hela lektionen.
Låna det med Potto. Strukturen bakom de flesta explainers är problem, lösning, hur det fungerar och nästa steg, vilket guiden om vad en explainer-video är går igenom i detalj, och 12 explainer-videoexempel bryter ner efter scenordning.
Pottos verktyg för explainer-video kan utgå från ett ämne, en länk eller ett dokument, till exempel en PDF. Det har ingen handritad stil eller whiteboardstil: de tolv inbyggda stilarna är Clean Modern, Midnight Tech, Editorial Paper, Bold Pop, Blueprint, Warm Organic, Neon Night, Soft Pastel, Mono Minimal, Sunset Gradient, Studio Noir och Fresh Mint.
Exempel på logotypanimation
En logotypreveal är den kortaste uppgiften: medianlängden i biblioteket är under 9 sekunder, och exemplen här går från 8,7 till 21,0 sekunder. Det finns en sak att titta på, så videon handlar mest om tajming och rörelsens form.
TypingMind logo reveal av @tdinh_me är 21,0 sekunder i 16:9, med prompten delad. Sidan beskriver en långsam reveal där märket sätts ihop gradvis.
Vad du ska titta efter. Titta på den sista bildrutan. En logotypreveal lyckas om det slutliga märket är rent, centrerat och läsbart tillräckligt länge för att fastna, och rörelsen före är det som ger märket dess personlighet. Exemplet på 8,7 sekunder visar hur mycket en enda rörelse, en form som förändras till en annan, kan göra.
Låna det med Potto. Pottos avslutande uppmaningsscen kan avsluta en video på din logotyp, och kategorin logo animation i biblioteket är platsen att studera fristående reveals. Potto renderar från en fast uppsättning scentyper och stilar, utan egen animationskod, så en specifik easing-kurva som den elastiska morphen ovan är något att studera snarare än något att kopiera exakt.
Gör din egen version
Du har tre vägar till en video som de här. Skriv koden själv, be en kodagent skriva den, eller beskriv videon för ett verktyg som renderar den åt dig.
Många skapare i biblioteket bygger med kod. Remotion, renderern Potto använder, beskriver sig som ett sätt att skapa videor och motion graphics med React, och det publicerar agent skills så att kodagenter kan arbeta med det. Pottos sida skills samlar fria agent skills från tredjepartsförfattare som du kan installera i en agent som läser SKILL.md-filer; de körs i din egen agent med din egen modell.
Anthropics Claude Motion, tillkännagiven den 8 oktober 2026 och i beta på Team- och Enterprise-planer per 2026-10-12, animerar text, diagram, former och bilder från en prompt och exporterar en MP4. Potto är inte Claude Motion och har ingen officiell relation till Anthropic. Inlägget om Claude Motion-alternativ jämför vägarna utifrån fakta du kan kontrollera.
Beskrivningsvägen är Pottos verktyg för AI motion graphics. Du ger det en prompt, en offentlig länk eller ett dokument. Claude Opus 5.5 skriver briefen, manuset och storyboarden, och Remotion renderar scenerna till en MP4 med voiceover, undertexter och musik, i 16:9, 9:16 eller 1:1. Du kan redigera storyboarden skärm för skärm eller be i chatten om en ändring. På bibliotekssidorna har en video med delad prompt en knapp, Use this prompt, som skickar den till Pottos videoskapare. Resultatet är Pottos egen version, med egna scentyper och stilar, så det kommer inte att matcha originalet; behandla originalet som en referens för idén, tempot och uttrycket.
Förhandsvisningar och storyboards kostar inget; credits debiteras när du exporterar, och totalsumman visas innan du bekräftar (se priser). Potto genererar inte filmat material, avatarer eller personer, och det redigerar inte video du redan har.
Vanliga frågor
Vilka typer av motion graphics finns det?
Typerna av motion graphics grupperas vanligtvis efter var de syns: titelsekvenser för film och tv, grafik för sändning och nyheter, reklam och varumärke, kinetisk typografi, animation av användargränssnitt samt explainer- eller reklamvideor. Den här guiden sorterar dem i stället efter uppgift: lanseringsfilmer, produktskärmar, kinetic type, databerättelser, explainers och logotypanimationer. Wikipedias artikel om motion graphic design skiljer också på explainer-, emotive- och promotional graphics, beroende på om syftet är att förtydliga, att väcka en känsla eller att öka medvetenheten.
Vad räknas som motion graphics?
Motion graphics är animerad grafisk design: text, former, ikoner, diagram och bilder satta i rörelse för att informera, marknadsföra eller bygga varumärke. Adobe definierar dem som "graphics with movement" och beskriver dem som kortare animationsstycken som underhåller eller förmedlar information. En video som animerar en produktskärmbild, ett stapeldiagram eller en logotyp är motion graphics. En animerad långfilm med figurer och en handling kallas vanligtvis animation i stället.
Vad är skillnaden mellan motion graphics och animation?
Motion graphics rör grafiska formelement, som typ, former och diagram, vanligtvis för att förmedla information i ett kort stycke, medan animation i vidare mening berättar historier med figurer och handlingar. De två överlappar, så gränsen handlar mer om syfte och skala än om teknik. Adobes guide drar gränsen efter längd och syfte: motion graphics är kortare stycken som underhåller eller förmedlar information.
Hur lång ska en motion graphics-video vara?
Det beror på uppgiften. I Potto-biblioteket per 2026-10-12 är medianlängden cirka 9 sekunder för logotypanimation, 15 för kinetic type, 30 för lanseringsvideor, 35 för databerättelser, 36 för produktskärmar och 60 för explainers. Matcha längden mot antalet idéer: en idé ryms på 15 sekunder, och ett problem, tre funktioner och en avslutande rad ryms på 30 till 45. Pottos längdalternativ är 15, 30, 45, 60 och 90 sekunder.
Är videorna i den här guiden gjorda med Potto?
Nej. De är gjorda av oberoende skapare och var och en krediteras sin upphovsperson med deras X-handtag. Potto gör inte anspråk på dem som eget arbete. De ingår som referenser, och sidan för varje verk länkar originalinlägget där ett sådant finns.
Kan jag göra motion graphics som de här med Potto?
Ja, för de typer av motion graphics Potto erbjuder: lanseringsfilmer, produktskärmar, textledda videor, databerättelser och explainers byggda av dess elva scentyper, tolv stilar och dina egna varumärkesfärger. Potto renderar sin egen version från din prompt, så resultatet kopierar inte ett original, och det stöder inte egen animationskod, handritade stilar eller fri bokstavsanimation.
Potto AI-sidor för de 21 verken, deras upphovspersoner, längder, bildförhållanden och delade prompter, samt bibliotekets medianer per kategori (kontrollerat 2026-10-12)
Potto AI
Gör din nästa lanseringsvideo.
Ta det som väckte ditt intresse och förvandla det till en egen video eller bild. Ta med skärmbilder, ett ämne eller en prompt.
