Auf unserer Startseite läuft ein Video von 25 Sekunden. Wörter springen ins Bild, Flächen wechseln die Farbe, eine Karte klappt auf und zeigt die nächste Leistung. Gedreht wurde dafür nichts. Es gab keine Kamera und keinen Sprecher, auch keinen KI-Videogenerator. Das ganze Video ist Code, und an einem einzigen Tag ist es in vier Fassungen entstanden.
So etwas heißt Motion Graphics. Hier steht, was dahintersteckt, wofür es sich auf einer Firmenwebsite lohnt und was du vorbereiten solltest, wenn du so ein Video willst.
Was ist Motion Graphics?
Motion Graphics ist animierte Grafik: Schrift, Formen, Symbole, Diagramme, die sich bewegen. Anders als ein Erklärfilm mit gezeichneten Figuren erzählt es keine Geschichte mit Personen, und anders als ein Imagefilm braucht es keinen Drehtag. Typische Einsätze sind ein kurzer Loop oben auf der Startseite, der die Leistungen zeigt, eine animierte Grafik, die einen technischen Ablauf erklärt, oder ein paar Sekunden Bewegung für Social Media.
Auf einer Website läuft so ein Video fast immer stumm. Das ist kein Nachteil, sondern Voraussetzung: Browser spielen Videos nur dann von allein ab, wenn der Ton aus ist. Googles Entwicklerseite für Chrome sagt dazu knapp, stummes automatisches Abspielen sei immer erlaubt. Ein Video, das ohne Ton nicht verständlich ist, taugt deshalb nicht für diesen Platz. Motion Graphics schon, weil die Botschaft in Schrift und Form steckt.
Wann lohnt sich ein Motion-Graphics-Video auf der Website?
Immer dann, wenn du etwas zeigen willst, das sich schlecht fotografieren lässt. Eine Dienstleistung zum Beispiel. Oder ein Vorgang im Inneren einer Maschine. Oder fünf Leistungen, für die auf dem ersten Bildschirm nur Platz für einen Satz ist.
Weniger gut passt es, wenn Menschen, Räume oder echte Produkte die Hauptrolle spielen. Wer sein Team, seine Werkstatt oder sein Restaurant zeigen will, braucht Fotos oder Film. Animierte Grafik ersetzt keinen Eindruck davon, wie es bei dir aussieht.
Realfilm, KI-Video oder Motion Graphics im Vergleich
Drei Wege führen heute zu einem kurzen Video. Sie unterscheiden sich weniger im Preis als darin, was du hinterher noch ändern kannst.
| Frage | Realfilm | KI-Videogenerator | Motion Graphics aus Code |
|---|---|---|---|
| Zeigt echte Menschen und Orte | ja | nur erfundene | nein |
| Schrift im Bild fehlerfrei | nachträglich eingesetzt | oft fehlerhaft | ja, echte Schrift |
| Hausfarben und Hausschrift exakt | in der Nachbearbeitung | nur ungefähr | ja, dieselben Dateien wie auf der Website |
| Ein Wort nachträglich ändern | Schnitt und neuer Export | neu erzeugen, Ergebnis offen | Zeile ändern, neu rendern |
| Querformat und Hochformat | zweimal schneiden, oft zweimal drehen | zweimal erzeugen | aus derselben Vorlage |
Die Spalte zum KI-Video beruht auf unserer eigenen Erfahrung mit Bildgeneratoren, nicht auf einer Studie. Ein Beispiel von heute: Für eine Comiczeichnung hatten wir eine Waage verlangt, deren beide Schalen „exakt gleich hoch“ hängen. Das Bild kam mit schiefer Waage zurück. Für eine Illustration ist das verschmerzbar. Für die Kurve, die zeigt, wie dein Gerät arbeitet, nicht.
Wie so ein Video bei uns entsteht
Das Video ist eine Webseite, die sich selbst abspielt. Jede Szene besteht aus gewöhnlichem HTML, also demselben Stoff wie deine Website, mit Schriften, Farben und Formen. Eine Animationsbibliothek namens GSAP bewegt diese Elemente nach einem genauen Zeitplan. Am Ende geht das Werkzeug HyperFrames die Seite Bild für Bild durch, fotografiert jedes einzelne in einem unsichtbaren Browser und setzt daraus eine MP4-Datei zusammen.
Den Code schreiben wir mit Unterstützung eines KI-Assistenten. Das Video selbst erzeugt aber keine KI, es entsteht Bild für Bild aus diesem Code. Was darin steht, steht dort, weil es jemand so geschrieben hat.
Der Ablauf sieht in der Praxis so aus:
- Kurzbeschreibung. Was soll hängen bleiben, für wen, wo läuft das Video, wie lang darf es sein? Bei unserer Startseite lautete der Kern: fünf Leistungen, höchstens 15 Sekunden, stumm.
- Entwurf. Eine erste Fassung, die man ansehen kann. Kein Storyboard auf Papier, sondern gleich das bewegte Ergebnis.
- Rückmeldung und Umbau. Hier spielt der Ansatz seine Stärke aus.
- Prüfen und rendern. Vor der Ausgabe misst ein Prüflauf, ob jede Schrift auf ihrem Hintergrund genug Kontrast hat, bei unserer ersten Fassung an 52 Stellen, alle bestanden. Dann entstehen zwei Formate, eines quer für große Bildschirme, eines hoch fürs Telefon.
Vier Fassungen an einem Tag
Die erste Fassung unseres Startseiten-Videos endete mit dem Logo. Die Rückmeldung: Es soll als Endlosschleife laufen, ohne Logo am Schluss, dynamischer und farbiger. Zweite Fassung. Dann: lieber 20 Sekunden, ein breiteres Format, und die äußeren Ränder frei von wichtigem Text. Dritte Fassung. Zuletzt waren bei einer Schrift die Unterlängen abgeschnitten, das Format wurde noch einmal breiter, die Ränder noch großzügiger, die Schrift bewegter. Vierte Fassung, am selben Tag, und mit 25 Sekunden am Ende etwas länger als geplant.
Die freien Ränder haben einen handfesten Grund. Ein Video oben auf der Seite füllt die volle Breite, und auf einem schmaleren Bildschirm schneidet der Browser links und rechts etwas ab. Steht dort Text, fehlt er. Heute läuft das Video im Format 2970 mal 1080 Pixel, und in den äußeren 20 Prozent auf jeder Seite steht nichts, was man lesen muss, nur Verzierung.
Für unsere Plugin-Seite ist danach ein Schwestervideo nach demselben Muster entstanden, mit anderen Begriffen. Die Bausteine waren schon da.
Wenn die Kurve stimmen muss
Ein zweites Beispiel stammt von einem Servicebetrieb für Antriebstechnik. Das Video sollte sechs Leistungen rund um Frequenzumrichter zeigen, also die Geräte, die in Fabriken die Drehzahl von Motoren regeln. Die zweite Fassung kam mit einer klaren Ansage zurück: kreativer, und die Kurven sähen nicht echt aus.
Der Einwand war berechtigt. Wer täglich mit diesen Geräten arbeitet, erkennt eine Fantasiekurve sofort. Also haben wir mehrere neue Konzepte vorgelegt, gewählt wurde eine Reise durch das Gerät: Die Kamera folgt der Energie vom Stromnetz bis zum Motor, und jede Leistung steht an der Stelle, an der sie wirkt. Die Signale sind jetzt berechnet statt gezeichnet, von der gleichgerichteten Netzspannung bis zu den Schaltpulsen am Ausgang. Erfundene Messwerte, Fehlercodes oder der Nachbau einer echten Herstelleroberfläche waren von Anfang an ausgeschlossen.
Mit einem Bildgenerator wäre diese Korrektur ein Glücksspiel gewesen. Im Code war sie Rechenarbeit.
Was HyperFrames und GSAP sind, und warum die Lizenz zählt
Beide Werkzeuge sind frei verfügbar, und das ist für dich als Auftraggeber mehr als eine Fußnote.
HyperFrames stammt vom Videoanbieter HeyGen und liegt seit März 2026 öffentlich bei GitHub, unter der Apache-Lizenz 2.0, einer offenen Lizenz, die auch gewerbliche Nutzung erlaubt. Anfang November 2026 hatten es rund 78.000 Nutzer der Plattform mit einem Stern markiert, für ein so junges Werkzeug ist das viel.
GSAP ist seit dem 30. April 2025 vollständig kostenlos, einschließlich der Erweiterungen, die früher Geld kosteten. Das hat Webflow bekannt gegeben, der Websitebaukasten, der GSAP im Herbst 2024 übernommen hat. Die Lizenz erlaubt den Einsatz in kommerziellen Websites ausdrücklich, solange Endnutzer nicht für den Zugang bezahlen. Dass ein Kunde einmalig für die Erstellung zahlt, ist laut Lizenztext ausdrücklich in Ordnung.
Für dich heißt das: Am Ende steht eine gewöhnliche MP4-Datei. Kein Abo, keine Plattform, an die sie gebunden ist, kein Wasserzeichen, das nach einem Jahr auftaucht.
Damit das Video nicht nervt
Bewegung zieht den Blick an. Das ist der Sinn der Sache und zugleich das Risiko. Drei Punkte gehören deshalb zu jedem Video, das automatisch läuft.
Ein Schalter zum Anhalten. Die Richtlinien für barrierefreie Webinhalte, WCAG 2.2, verlangen schon auf der untersten Stufe A: Bewegt sich etwas automatisch länger als fünf Sekunden neben anderen Inhalten, muss man es anhalten, stoppen oder ausblenden können. Ein Loop von 25 Sekunden fällt darunter. Für Angebote, die unter das Barrierefreiheitsstärkungsgesetz fallen, ist das keine Kür, mehr dazu in unserem Beitrag zum BFSG.
Rücksicht auf die Einstellung „Bewegung reduzieren“. Wer in den Bedienungshilfen von iPhone, Android, Windows oder macOS weniger Animation eingestellt hat, teilt das dem Browser mit. Die Website kann darauf reagieren und statt des Videos ein Standbild zeigen. Das ist wenig Aufwand und hilft Menschen, denen Bewegung auf dem Bildschirm buchstäblich schlecht bekommt.
Ein Blick auf die Dateigröße. Ein Loop von 25 Sekunden in hoher Auflösung landet schnell bei 13 bis 16 Megabyte, so ist es bei unseren eigenen. Das Video sollte deshalb erst laden, wenn es ins Bild kommt, und auf dem Telefon nur die Hochformat-Fassung.
Was du für ein Motion-Graphics-Video vorbereitest
Je klarer diese Punkte vorher feststehen, desto weniger Fassungen braucht es:
- Ein Satz, der hängen bleiben soll. Nicht fünf, einer.
- Die Stichworte, die im Video vorkommen, in deiner Schreibweise. Vier bis sechs sind ein guter Rahmen für einen Loop.
- Der Platz auf der Website: ganz oben auf der Startseite, in einem Abschnitt weiter unten, auf einer Unterseite? Davon hängen Format und Länge ab.
- Farben und Schriften, am besten als Dateien. Liegt deine Website schon bei uns, haben wir beides.
- Was auf keinen Fall vorkommen darf: erfundene Zahlen, fremde Logos, Versprechen, die du nicht halten willst.
- Wer abnimmt. Eine Person, die am Ende ja sagt, spart mehr Zeit als jede Technik.
Wir bauen solche Videos als Teil unserer Gestaltung und setzen sie im Webdesign gleich an der richtigen Stelle ein. Wenn du sehen willst, wie das aussieht: Die Startseite zeigt das Ergebnis der vierten Fassung.
Quellen
- HeyGen: HyperFrames bei GitHub, Beschreibung, Lizenz Apache 2.0, Projektdaten abgerufen am 3. November 2026
- Webflow: GSAP wird kostenlos, 30. April 2025
- GSAP: Standard „No Charge“ License
- Chrome for Developers: Autoplay policy in Chrome
- W3C: WCAG 2.2, Erfolgskriterium 2.2.2 Pausieren, Beenden, Ausblenden
- MDN Web Docs: prefers-reduced-motion