Motion-Graphics-Beispiele: KI-gestützte Videos nach Aufgabe sortiert
Von Potto AI Team·
Motion-Graphics-Beispiele nach Aufgabe: Launch-Filme, Produktbildschirme, Kinetic Type, Data Stories, Erklärvideos und Logo-Reveals, jeweils von einer genannten Autorin oder einem genannten Autor.
Die nützlichsten Motion-Graphics-Beispiele sind nach der Aufgabe des Videos sortiert, nicht nach dem visuellen Stil: ein Launch-Film, ein animierter Produktbildschirm, ein Kinetic-Type-Reel, eine Data Story, ein Erklärvideo oder ein Logo-Reveal. Jede Aufgabe hat ihre eigene Länge, ihr eigenes Seitenverhältnis und ihre eigene Reihenfolge der Ideen. Ein „gutes Beispiel“ hilft also nur, wenn es die richtige Art von Beispiel ist. Dieser Leitfaden nimmt 21 Motion-Graphics-Beispiele aus der Bibliothek der KI-Motion-Graphics-Videos auf Potto, sortiert sie in diese sechs Aufgaben und nennt zu jedem die Autorin oder den Autor, die Länge, das Seitenverhältnis und worauf du achten solltest.
Zuerst eine Sache: Keines dieser Videos hat Potto gemacht. Unabhängige Creator haben sie gemacht und veröffentlicht. Unten stehen sie mit ihren X-Handles. Potto sammelt sie, damit du sie ansehen, den Prompt lesen kannst, wenn die Autorin oder der Autor einen geteilt hat, und aus der Idee dein eigenes Video starten kannst. Die Beschreibungen nutzen nur den Titel jedes Videos und die Angaben auf seiner Seite (Autor, Kategorie, Länge, Verhältnis, Werkzeuge), weil es darum geht, dir beim Aussuchen zu helfen, was du dir ansehen willst, und nicht darum, die Arbeit anderer zu bewerten. Alles über Pottos eigenes Werkzeug kommt aus dem Produkt, so wie es heute funktioniert.
Was als Motion Graphics gilt
Motion Graphics sind Grafikdesign in Bewegung: Text, Formen, Icons, Diagramme und Bilder, die sich bewegen, um etwas zu erklären, etwas anzukündigen oder einer Marke ein Aussehen zu geben. Adobes Leitfaden zu Motion Graphics definiert sie als „graphics with movement“ und nennt sie „shorter pieces of animation that entertain or impart information“, im Gegensatz zu abendfüllenden Animationsfilmen mit Figuren und einer Handlung. Der Wikipedia-Artikel zu sagt, Motion Design werde typischerweise damit verbunden, abstrakte Objekte, Text und andere Elemente des Grafikdesigns in Bewegung zu setzen.
Zusammen nennen die beiden Quellen die Orte, an denen die Arbeit auftaucht: Vorspanne für Film und Fernsehen, Broadcast- und Nachrichtengrafik, Werbung und Branding, animierte Typografie, Gestaltung von Benutzeroberflächen sowie Erklär- und Werbevideos. Diese Liste ist nach Branche geordnet. Dieser Leitfaden ordnet nach Aufgabe, denn beim Machen eines Videos lautet die Frage „Was will ich rüberbringen?“ und nicht „Welche Branche ist das?“. Die sechs Aufgaben unten entsprechen den Kategorien der Bibliothek und decken das meiste ab, was ein Unternehmen oder ein Creator tatsächlich braucht.
Aufgabe
Was sie tut
Typische Frage, die sie beantwortet
Launch
Kündigt ein Produkt oder ein Release an
Was ist neu, und warum sollte es mich interessieren?
Produktbildschirme
Animiert eine Oberfläche
Wie sieht dieses Produkt aus, und wie funktioniert es?
Kinetic Type
Bewegt Wörter als Hauptbild
Welchen Satz soll ich behalten?
Data Story
Lässt eine Zahl oder einen Trend ankommen
Was hat sich geändert, und um wie viel?
Erklärvideo
Bringt eine Idee in Schritten bei
Wie funktioniert das?
Logo-Animation
Zeigt ein Markenzeichen
Wer hat das gemacht?
Wie die 21 Beispiele ausgewählt wurden
Die Bibliothek ist groß und wächst weiter, deshalb nennt dieser Leitfaden keine Gesamtzahlen. Die Seite zeigt immer die aktuellen Zahlen. Zum Auswählen der Beispiele hat der Leitfaden vier Filter benutzt. Jedes Werk braucht eine genannte Autorin oder einen genannten Autor, eine erfasste Länge und ein erfasstes Seitenverhältnis, ein abspielbares Video und einen Titel, der sagt, worum es im Video geht. Innerhalb jeder Aufgabe wurden Werke bevorzugt, die sich in Länge, Verhältnis und Werkzeugen unterscheiden, damit du die Spanne siehst und nicht ein wiederholtes Muster.
Zwei Fakten über die ganze Bibliothek solltest du vor den Beispielen kennen. Sie stammen aus den Einträgen der Bibliothek, geprüft am 2026-10-12, und sie verschieben sich, wenn Werke hinzukommen:
Die meisten Werke sind 16:9. Etwa vier von fünf Werken sind 16:9, ungefähr eines von acht ist 9:16, der Rest ist 1:1. Jede Aufgabe unten folgt derselben Schieflage, und das passt dazu, wo Leute zusehen: Websites, Präsentationen und X.
Die Länge hängt von der Aufgabe ab. Die mittlere Länge liegt bei etwa 9 Sekunden für Logo-Animation, 15 für Kinetic Type, 30 für Launch, 35 für Data Story, 36 für Produktbildschirme und 60 für Erklärvideos. Die Mediane je Aufgabe stehen in jedem Abschnitt.
Die 21 Werke stehen unten in eigenen Abschnitten, jedes mit Link zu seiner Seite, wo du es abspielen kannst. Für jedes Werk nennt der Leitfaden das X-Handle, die Länge, das Verhältnis, die Werkzeuge, wenn die Seite sie aufführt, und ob der Prompt geteilt wurde. „Prompt geteilt“ heißt: Die Autorin oder der Autor hat den Prompt auf der Werkseite veröffentlicht, du kannst ihn also lesen, bevor du entscheidest, ihn weiterzuverwenden.
Beispiele für Launch-Filme
Ein Launch-Film kündigt etwas an und bittet die Zuschauerin oder den Zuschauer, sich eine Sache zu merken: den Namen. Unter den Launch-Videos der Bibliothek liegt die mittlere Länge bei 30 Sekunden, und etwa die Hälfte ist 30 Sekunden oder kürzer. Die Kategorie hat auch die größte Streuung der Seitenverhältnisse: ungefähr eines von fünf ist 9:16 fürs Handy.
Reddit marketing tool launch video von @anthonyriera läuft 52,8 Sekunden in 16:9. Die Seite nennt Remotion als Werkzeug, denselben Renderer, den Potto nutzt. Das macht das Video zu einer nützlichen Referenz dafür, was ein in Code gebauter Launch-Film auf knapp einer Minute tragen kann.
TypingMind showreel announces team features von @ann_nnng ist 15,0 Sekunden in 16:9, gebaut auf canvas, und der Prompt wurde geteilt. Der Titel nennt den Inhalt, team features, und die Form, ein Showreel.
CodePilot promo floats 17 model-provider logos von @op7418 läuft 50,0 Sekunden in 16:9. Der Titel ist selbst ein präzises Briefing: ein wiederholtes visuelles Mittel, 17 Logos, auf einer Uhr von 50 Sekunden.
Worauf du achten solltest. Spiel einen Launch-Film einmal ohne Ton und notiere die Sekunde, in der der Produktname zum ersten Mal erscheint. Zähl dann, wie viele getrennte Aussagen der Film macht. Die Beispiele oben legen eine Regel nahe, die über die Kategorie hinweg hält: Je kürzer der Film, desto weniger Aussagen. Ein Film von 15 Sekunden trägt eine Idee und einen Namen. Ein Film von 50 Sekunden hat Platz für ein Problem, ein paar Funktionen und eine Schlusszeile.
Mit Potto übernehmen. Pottos Maker für Produktvideos baut Launch-Filme aus einer Beschreibung oder einem Link. Ein Briefing, das gut funktioniert, nennt Publikum, Länge und die Beats:
Launch-Film für eine fiktive Budget-App namens Ledgerly, 30 Sekunden, 16:9. Mit dem Problem beginnen, Ausgaben in Tabellen zu verfolgen, drei Funktionen zeigen, mit dem App-Namen und einem Call to Action enden.
Beispiele für Produktbildschirme
Die Animation von Produktbildschirmen zeigt eine Oberfläche, die etwas tut: Eine Liste sortiert sich, ein Dashboard füllt sich, ein Handy geht einen Ablauf durch. Die mittlere Länge der Kategorie ist 36 Sekunden, die mittlere Hälfte der Werke läuft aber von etwa 24 bis etwa 67 Sekunden. Damit ist sie die unterschiedlichste der sechs. Hier sind die Beispiele in 9:16 und 1:1 auch am nützlichsten, weil App-Abläufe oft auf dem Handy gezeigt werden.
Worauf du achten solltest. Halt auf dem ersten Frame an, der die Oberfläche zeigt, und frag, wohin die Zuschauerin oder der Zuschauer schauen soll. Sieh dann, wie lange jeder Zustand auf dem Bildschirm bleibt. Die Animation von Produktbildschirmen scheitert, wenn der Bildschirm wechselt, bevor das Auge die Änderung gefunden hat. Deshalb zeigen die kürzesten Beispiele hier eine Verwandlung, und die längeren gruppieren ihre Zustände in Schritte.
Mit Potto übernehmen. Ein Produktdemo-Video startet mit Screenshots, die du hochlädst, bis zu acht Bilder, Dokumente oder Audiodateien pro Projekt. Screenshot-Szenen zoomen heran und folgen einem Cursor-Pfad, und jede Szene kann eine Beschriftung tragen. Das übliche Briefing ist deshalb eine Liste von Schritten:
Produktdemo für eine fiktive Rechnungs-App, 30 Sekunden, 16:9. Meine drei Screenshots nutzen: Rechnung erstellen, senden, als bezahlt sehen. Eine kurze Beschriftung pro Screenshot, Schluss auf dem App-Namen.
Beispiele für Kinetic Type
Kinetic Type setzt Wörter als Hauptbild in Bewegung. Es ist die kürzeste der textgeführten Aufgaben: Der Median liegt bei etwa 15 Sekunden, und etwa sieben von zehn Werken laufen 30 Sekunden oder weniger. Weil keine Oberfläche und kein Diagramm die Bedeutung trägt, muss der Text das tun.
Showreel opens on a bold Decision title card von @kenn ist 15,0 Sekunden in 16:9, und der Prompt wurde geteilt. Es ist ein Typografie-Showreel, die Titelkarte ist also der erste Zug.
Slanted credit names glide over an orange grid von @goodside läuft 75,0 Sekunden in 16:9, mit geteiltem Prompt. Bei dieser Länge ist das wiederholte Mittel eine Namensliste, die über einen einzigen Hintergrund zieht.
Worauf du achten solltest. Schalt den Ton aus und lies. Kinetic Type sollte als Text funktionieren: Wenn die Sätze schwach sind, rettet Bewegung sie nicht. Schalt den Ton dann wieder an und prüfe, ob das Timing jedes Wortes dem Ton folgt. Die beiden Beispiele von 15 Sekunden binden ihre Bewegung an eine Titelkarte oder ein Tempo. Die beiden Beispiele von 75 Sekunden stützen sich auf Struktur, eine Credit-Liste und Kapiteltitel, um die Aufmerksamkeit zu halten.
Mit Potto übernehmen. Pottos Textszenen bauen sich auf Stichwort auf, und die Szenen für Zitat, Titel und Liste tragen kurze Zeilen. Freie Buchstabenanimation gibt es nicht, eine 128-BPM-Welle liegt also außerhalb dessen, was Potto rendert. Was gut passt, ist ein kurzes Skript, bei dem jede Zeile ihren eigenen Bildschirm bekommt:
Kinetic-Text-Video, 15 Sekunden, 16:9, Stil Bold Pop. Fünf kurze Zeilen, eine pro Bildschirm, über ein Team, das jeden Freitag ausliefert. Ende auf der Zeile „Ship it.“
Beispiele für Data Stories
Eine Data Story lässt eine Zahl oder einen Trend ankommen. Unter den Data-Story-Videos der Bibliothek liegt der Median bei etwa 35 Sekunden, und die Streuung ist groß, von 15 Sekunden bis deutlich über eine Minute. Die Kategorie gehört zu den kleineren, deshalb eignet sie sich gut, um jedes Beispiel für sich anzusehen.
LLM release timeline tracks 2026 models month by month von @nummanali ist 62,1 Sekunden in 16:9, gebaut auf canvas, mit geteiltem Prompt. Die Seite beschreibt eine canvas-Animation, die 2026 Monat für Monat durchgeht. Die Achse ist die Zeit.
Worauf du achten solltest. Finde die eine Zahl, die das Video dir zum Merken gibt, und prüfe dann, wie das Video sie verdient: was davor kommt und was danach gezeigt wird. Die drei Beispiele nutzen drei verschiedene Mittel für dieselbe Aufgabe. Eines nennt ein Ergebnis, eines geht eine Zeitleiste ab, eines paart eine Zahl mit einem Bild dessen, was sie misst.
Mit Potto übernehmen. Statistik-Szenen zeigen eine einzelne große Zahl, und Diagramm-Szenen zeichnen Balken- oder Donut-Diagramme mit drei bis sechs Werten, die hochzählen. Schreibst du die Zahlen ins Briefing, nutzt das Video sie so, wie sie geschrieben sind. Prüf jede Zahl vor dem Export an deiner Quelle. Die Seite animiertes Diagramm sammelt mehr davon:
Data Story, 30 Sekunden, 16:9. Die durchschnittlichen Tassen pro Tag eines fiktiven Cafés stiegen von 120 im Juni auf 190 im September. Mit der Frage öffnen, die vier Monate als Balkendiagramm zeigen, mit dem Anstieg von 58 % enden.
Beispiele für Erklärvideos
Ein Erklärvideo bringt eine Idee in Schritten bei. Es ist das längste der sechs: Die mittlere Länge ist 60 Sekunden, und nur etwa eines von fünf läuft 30 Sekunden oder weniger. Die Erklärvideos der Bibliothek haben auch die größte Spanne an Umsetzungen, von Pixel Art bis zu handgezeichneten Whiteboards.
Kinetic word cloud pitches an AI inference startup von @deedydas ist 26,0 Sekunden in 16:9, gebaut mit SVG und GSAP, mit geteiltem Prompt. Es ist das kürzeste Erklärvideo hier und verdichtet ein Pitch in ein einziges bewegtes Mittel.
Worauf du achten solltest. Ein Erklärvideo sollte den Satztest bestehen: Kannst du die Idee nach einmaligem Sehen in einem Satz sagen? Achte auf den Moment, in dem das Problem zur Lösung wird, und zähl die Schritte zwischen diesem Moment und dem Ende. Zwei der drei Beispiele greifen sich ein kleines, konkretes Thema (eine Ziffer, einen Onboarding-Ablauf) und lassen es die ganze Lektion tragen.
Mit Potto übernehmen. Die Struktur hinter den meisten Erklärvideos ist Problem, Lösung, wie es funktioniert und nächster Schritt. Der Leitfaden Was ein Erklärvideo ist behandelt das im Detail, und 12 Erklärvideo-Beispiele schlüsseln sie nach Szenenfolge auf.
Pottos Maker für Erklärvideos kann von einem Thema, einem Link oder einem Dokument wie einem PDF starten. Einen handgezeichneten oder Whiteboard-Stil gibt es nicht. Die zwölf eingebauten Stile sind Clean Modern, Midnight Tech, Editorial Paper, Bold Pop, Blueprint, Warm Organic, Neon Night, Soft Pastel, Mono Minimal, Sunset Gradient, Studio Noir und Fresh Mint.
Beispiele für Logo-Animation
Ein Logo-Reveal ist die kürzeste Aufgabe: Die mittlere Länge in der Bibliothek liegt unter 9 Sekunden, und die Beispiele hier laufen von 8,7 bis 21,0 Sekunden. Es gibt eine Sache anzusehen, das Video handelt also vor allem von Timing und von der Form der Bewegung.
TypingMind logo reveal von @tdinh_me läuft 21,0 Sekunden in 16:9, mit geteiltem Prompt. Die Seite beschreibt ein langsames Reveal, in dem sich das Zeichen nach und nach zusammensetzt.
Worauf du achten solltest. Sieh dir den letzten Frame an. Ein Logo-Reveal gelingt, wenn das fertige Zeichen sauber, zentriert und lange genug lesbar ist, um anzukommen. Die Bewegung davor gibt dem Zeichen seine Persönlichkeit. Das Beispiel von 8,7 Sekunden zeigt, wie viel eine einzelne Bewegung leisten kann, eine Form, die sich in eine andere verwandelt.
Mit Potto übernehmen. Pottos abschließende Call-to-Action-Szene kann ein Video auf deinem Logo enden lassen, und die Kategorie Logo-Animation in der Bibliothek ist der Ort, um eigenständige Reveals anzusehen. Potto rendert aus einem festen Satz von Szenentypen und Stilen, ohne eigenen Animationscode. Eine bestimmte Easing-Kurve wie der elastic Morph oben ist deshalb etwas zum Ansehen, nicht etwas zum genauen Nachbauen.
Mach deine eigene Version
Du hast drei Wege zu einem Video wie diesen. Schreib den Code selbst, bitte einen Coding-Agenten, ihn zu schreiben, oder beschreib das Video einem Werkzeug, das es für dich rendert.
Viele Creator in der Bibliothek bauen mit Code. Remotion, der Renderer, den Potto nutzt, beschreibt sich als Weg, Videos und Motion Graphics mit React zu erstellen, und veröffentlicht Agent Skills, damit Coding-Agenten damit arbeiten können. Pottos Seite Skills sammelt kostenlose Agent Skills von Drittautoren, die du in einem Agenten installieren kannst, der SKILL.md-Dateien liest. Sie laufen in deinem eigenen Agenten mit deinem eigenen Modell.
Anthropics Claude Motion, angekündigt am 8. Oktober 2026 und Stand 2026-10-12 als Beta in den Plänen Team und Enterprise, animiert Text, Diagramme, Formen und Bilder aus einem Prompt und exportiert ein MP4. Potto ist nicht Claude Motion und hat keine offizielle Beziehung zu Anthropic. Der Beitrag zu Alternativen zu Claude Motion vergleicht die Wege anhand von Fakten, die du prüfen kannst.
Der Weg über die Beschreibung ist Pottos Werkzeug KI-Motion-Graphics. Du gibst einen Prompt, einen öffentlichen Link oder ein Dokument. Claude Opus 5.5 schreibt Briefing, Skript und Storyboard, und Remotion rendert die Szenen zu einem MP4 mit Voiceover, Untertiteln und Musik, in 16:9, 9:16 oder 1:1. Du kannst das Storyboard Bild für Bild bearbeiten oder im Chat um eine Änderung bitten. Auf den Bibliotheksseiten hat ein Video mit geteiltem Prompt einen Button Use this prompt, der ihn an den Potto-Video-Creator schickt. Das Ergebnis ist Pottos eigene Version, mit eigenen Szenentypen und Stilen, es wird dem Original also nicht gleichen. Behandle das Original als Referenz für die Idee, das Tempo und den Look.
Vorschauen und Storyboards kosten nichts. Credits werden beim Export berechnet, und die Summe steht da, bevor du bestätigst (siehe Preise). Potto erzeugt kein Realfilmmaterial, keine Avatare und keine Personen, und es bearbeitet kein Video, das du schon hast.
FAQs
Welche Arten von Motion Graphics gibt es?
Die Arten von Motion Graphics werden gewöhnlich danach gruppiert, wo sie erscheinen: Titelvorspanne für Film und Fernsehen, Broadcast- und Nachrichtengrafik, Werbung und Branding, kinetische Typografie, Animation von Benutzeroberflächen sowie Erklär- oder Werbevideos. Dieser Leitfaden sortiert sie stattdessen nach Aufgabe: Launch-Filme, Produktbildschirme, Kinetic Type, Data Stories, Erklärvideos und Logo-Animationen. Der Wikipedia-Artikel zu Motion Graphic Design trennt außerdem explainer, emotive und promotional graphics, je nachdem, ob das Ziel ist zu klären, ein Gefühl hervorzurufen oder Aufmerksamkeit zu wecken.
Was gilt als Motion Graphics?
Motion Graphics sind animiertes Grafikdesign: Text, Formen, Icons, Diagramme und Bilder, die in Bewegung gesetzt werden, um zu informieren, zu werben oder eine Marke zu bilden. Adobe definiert sie als „graphics with movement“ und beschreibt sie als kürzere Animationsstücke, die unterhalten oder Information vermitteln. Ein Video, das einen Produkt-Screenshot, ein Balkendiagramm oder ein Logo animiert, ist Motion Graphics. Ein abendfüllender Animationsfilm mit Figuren und einer Handlung heißt gewöhnlich Animation.
Was ist der Unterschied zwischen Motion Graphics und Animation?
Motion Graphics bewegen Elemente des Grafikdesigns, etwa Schrift, Formen und Diagramme, meist um in einem kurzen Stück Information zu vermitteln, während Animation weiter gefasst Geschichten mit Figuren und Handlungen erzählt. Die beiden überlappen sich, die Linie ist also eher eine Frage von Zweck und Maßstab als von Technik. Adobes Leitfaden zieht die Linie über Länge und Zweck: Motion Graphics sind kürzere Stücke, die unterhalten oder Information vermitteln.
Wie lang sollte ein Motion-Graphics-Video sein?
Das hängt von der Aufgabe ab. In der Potto-Bibliothek, Stand 2026-10-12, liegt die mittlere Länge bei etwa 9 Sekunden für Logo-Animation, 15 für Kinetic Type, 30 für Launch-Videos, 35 für Data Stories, 36 für Produktbildschirme und 60 für Erklärvideos. Pass die Länge an die Zahl der Ideen an: Eine Idee passt in 15 Sekunden, und ein Problem, drei Funktionen und eine Schlusszeile passen in 30 bis 45. Pottos Längenoptionen sind 15, 30, 45, 60 und 90 Sekunden.
Wurden die Videos in diesem Leitfaden mit Potto gemacht?
Nein. Unabhängige Creator haben sie gemacht, und jedes ist über das X-Handle seiner Autorin oder seines Autors genannt. Potto beansprucht sie nicht als eigene Arbeit. Sie sind als Referenzen enthalten, und die Seite jedes Werks verlinkt den Originalbeitrag, wo einer vorliegt.
Kann ich mit Potto Motion Graphics wie diese machen?
Ja, für die Arten von Motion Graphics, die Potto anbietet: Launch-Filme, Produktbildschirme, textgeführte Videos, Data Stories und Erklärvideos aus seinen elf Szenentypen, zwölf Stilen und deinen eigenen Markenfarben. Potto rendert aus deinem Prompt seine eigene Version, das Ergebnis kopiert also kein Original, und eigener Animationscode, handgezeichnete Stile oder freie Buchstabenanimation werden nicht unterstützt.
Remotion, Dokumentation der Agent Skills (was die Skills abdecken und wie man sie installiert): https://www.remotion.dev/docs/ai/skills (abgefragt 2026-10-12)
Remotion-Startseite („Create videos and motion graphics with React“): https://www.remotion.dev/ (abgefragt 2026-10-12)
Potto-AI-Seiten zu den 21 Werken, ihren Autorinnen und Autoren, Längen, Verhältnissen und geteilten Prompts sowie zu den Medianen der Bibliothek je Kategorie (geprüft 2026-10-12)
Potto AI
Erstellen Sie Ihr nächstes Video zur Produkteinführung.
Greifen Sie auf, was Ihr Interesse geweckt hat, und machen Sie daraus Ihr eigenes Video oder Bild. Bringen Sie Screenshots, ein Thema oder einen Prompt mit.
