Video ist jetzt Code: Mein Promo-Video aus HTML, CSS & JS

Kein After Effects, kein Premiere, keine Kamera. Kein Stock-Material, keine KI-Bilder, keine KI-Stimme. Alles, was Sie in diesem Video sehen und hören, ist Code: rund 500 Zeilen HTML und JavaScript für das Bild, gut 200 Zeilen Python für den Ton. Ein Rendervorgang dauert auf meinem Mac 18 Sekunden.

Alle Texte im Video zum Nachlesen

„Zu viel.“ — „Reduziert auf das, was wirkt.“ — „Websites, die Ziele erreichen.“ — „Mehr Anfragen.“ (Handwerk & Dienstleister) — „Mehr Verkäufe.“ (Online-Shops) — „Mehr Bewerbungen.“ (Arbeitgeber) — „Mehr Reservierungen.“ (Gastronomie & Praxen) — „Von der Website bis zur Werbung, die sich rechnet. KI-gestützt — im Sinne Ihrer Kunden.“ — „01900 Großröhrsdorf · Rödertal. Ein Ansprechpartner. Persönlich vor Ort — seit 2005.“ — „SYFRT. Reduziert auf das, was wirkt. Sascha Seyfert · Webentwicklung & KI-Automatisierung · Rödertal · syfrt.de“

Die Herleitung: erst der Satz, dann das Bild

Am Anfang stand kein Effekt, sondern ein Satz: „Reduziert auf das, was wirkt.“ Ein Promo-Video sollte diesen Claim nicht erklären — es sollte ihn sein. Also baut der Film den Satz in Akten auf, und erst der Wurf vollendet ihn.

Zeit	Akt	Was passiert	Warum
0–4 s	Zu viel	Eine überladene Website: Newsletter-Pop-up, Slider, Besucherzähler, Autoplay-Video, App-Banner	Das Problem, das jeder kennt
4–8 s	Reduziert	Alles kollabiert in einen einzigen roten Punkt	Weglassen als Prinzip — wie SEYFERT → SYFRT
8–13 s	Der Wurf	Der Punkt dribbelt, die Klammern gleiten herein, Wurf entlang der Logo-Kurve	Die Kurve im Logo ist ein Basketballwurf
13–23 s	Was wirkt	Die Kurve wächst nach oben rechts: mehr Anfragen, Verkäufe, Bewerbungen, Reservierungen	Was wirkt, entscheidet das Ziel des Kunden — nicht die Technik
23–27 s	Von hier	Karte mit 10- und 20-km-Radius um Großröhrsdorf	Ein Ansprechpartner, vor Ort
27–30 s	Endcard	SEYFERT verliert seine Vokale → SYFRT, darunter der Claim	Der Name erklärt die Methode

Der erste Akt ist übrigens bewusst nicht in syfrt-Optik: blaue Buttons, gelber Willkommens-Banner, „Sie sind Besucher Nr. 004.718“. Eine Parodie auf die Homepage, die viele Unternehmen noch heute haben. Damit der Kontrast zur Reduktion danach auch wirklich sitzt.

Vier Feedbackrunden — in Sätzen statt in Stunden

Hier zeigt sich am deutlichsten, was heute möglich ist. Nach der ersten Fassung kam mein Feedback als ganz normale Sätze:

1. „Kein Rabatt-Thema.“ — Countdown und Gutschein-Karten im Chaos-Akt flogen raus, Besucherzähler und App-Banner kamen rein.
2. Ziele statt Leistungen — Akt 4 sollte nicht zeigen, was ich mache, sondern was Kunden davon haben: mehr Anfragen, mehr Verkäufe, mehr Bewerbungen, mehr Reservierungen.
3. „Google Ads“ ist ein Fachbegriff — daraus wurde „Werbung, die sich rechnet.“ Gleiche Aussage, aber ein Handwerksbetrieb versteht sie sofort.
4. „Zwischen Reservierung und dem nächsten Schnitt ist zu wenig Zeit.“ — Nachgemessen: Das letzte Ziel war nur 0,3 Sekunden zu sehen. Weil alle Zeitpunkte in einer Datei stehen, wurden Akt 1 und 2 eine halbe Sekunde straffer, und jedes Ziel bekommt jetzt 1,4 Sekunden — Bild und Ton wanderten automatisch mit.

Jede Runde lief gleich ab: Text in der Vorlage ändern, automatischer Check beider Formate (überlappende Texte, Kontrast), Standbilder ansehen, rendern. Rechenzeit für beide Formate: unter 40 Sekunden. Der Engpass ist nicht mehr die Produktion, sondern die Entscheidung, was man sagen will.

Warum Video als Code?

• Versionierbar: Jede Fassung ist ein Git-Commit. Jede alte Version lässt sich jederzeit wieder rendern.
• Eine Vorlage, mehrere Formate: Hochformat für Reels und Querformat für YouTube entstehen aus derselben Datei — nur das Layout passt sich an.
• Die Marke kommt direkt von der Website: Farben und Schriften sind 1:1 aus dem CSS von syfrt.de übernommen. Kein Styleguide-PDF dazwischen.
• Datengetrieben: Texte oder Zahlen austauschen, neu rendern, fertig. Das ist der eigentliche Hebel — dazu unten mehr.

Die Werkzeuge (Stand Oktober 2026)

Werkzeug	Lizenz	Einschätzung
HyperFrames	Apache 2.0	Reines HTML mit Zeitangaben als Attributen, Headless Chrome und FFmpeg. Meine Wahl.
Remotion	frei bis 3 MA	Ausgereift, aber React-basiert — passt nicht zu meinem Astro-Stack.
Motion Canvas	MIT	Stark für technische Erklär-Animationen, mit eigenem Editor.
GSAP 3	kostenlos	Die Animations-Engine in der Komposition. Seit der Webflow-Übernahme inklusive aller Plugins gratis.

HyperFrames stammt von HeyGen und setzt genau dort an, wo Webentwickler ohnehin zu Hause sind: HTML, CSS, JavaScript. Kein neues Programm, keine neue Sprache.

Making-of in vier Tricks

1. Ein Video ist eine Webseite

Die Komposition ist eine ganz normale HTML-Datei. Zeitangaben stehen als Attribute an den Elementen, die Animation ist eine pausierte GSAP-Timeline:

<div id="root" data-composition-id="main" data-start="0" data-duration="30">
  <svg id="stage" class="clip" data-start="0" data-duration="30"></svg>
  <div id="texts" class="clip" data-start="0" data-duration="30"></div>
  <audio src="assets/audio/sfx.wav" data-start="0" data-duration="30"></audio>
</div>
<script>
  const tl = gsap.timeline({ paused: true });
  // … alle Animationen …
  window.__timelines = { main: tl };
</script>

HyperFrames öffnet die Seite in einem unsichtbaren Chrome, spult die Timeline Bild für Bild vor und nimmt jedes Bild auf — 900 Stück bei 30 Bildern pro Sekunde. FFmpeg macht daraus eine MP4.

2. Der Wurf: ein Pfad, zwei Animationen

Der Ball fliegt exakt die Kurve aus dem Logo — und die Kurve zeichnet sich dabei hinter ihm nach. Beides nutzt denselben SVG-Pfad:

const curveD = `M${start} Q${control} ${end}`; // die Kurve aus dem Logo
tl.to(ball,  { motionPath: { path: curveD }, duration: 1.5, ease: "power3.out" }, 9.85);
tl.to(curve, { drawSVG: "100%",             duration: 1.5, ease: "power3.out" }, 9.85);

Die Easing-Funktion power3.out sorgt für den schnellen Abwurf und die kleine Zeitlupe kurz vor dem Ziel. Genau dieser Moment macht den Wurf glaubwürdig.

3. Kein Zufall, keine Uhr

Ein Render muss bei jedem Durchlauf exakt dieselben Bilder liefern. Math.random() und Date.now() sind in der Komposition deshalb tabu. Selbst der Tipp-Effekt ist kein Timer, sondern jedes einzelne Zeichen hat seinen festen Platz auf der Timeline:

spans.forEach((char, i) =>
  tl.set(char, { display: "inline" }, cue.start + i * cue.step));

4. Eine Zeitquelle für Bild und Ton

Alle Zeitpunkte stehen in genau einer Datei. Die Animation liest sie — und das Python-Skript, das den Ton erzeugt, liest dieselbe Datei:

window.CUES = {
  "dribble": { "fall": 8.2, "impacts": [8.55, 9.15] },
  "throw":   { "start": 9.85, "dur": 1.5 },
  // …
};

for t in cues["dribble"]["impacts"]:
    add(t - 0.004, thud(), 0.75)   # Aufprall
    add(t + 0.05,  thud(), 0.12)   # kurzer Hall vom Boden
add(th["start"] + th["dur"] - 0.02, swish(), 0.5)  # Netz

Die Geräusche sind keine Samples, sondern Mathematik: Der Aufprall ist ein tiefer Sinuston bei 58 Hz mit Obertönen und einem kurzen, gefilterten Rauschen. Weil Bild und Ton aus derselben Quelle kommen, können sie nicht auseinanderlaufen. Nachgemessen im fertigen Video: Die Dribblings sitzen auf zwei Millisekunden genau.

Wo KI im Spiel ist — und wo nicht

Den größten Teil des Codes hat eine KI geschrieben (Claude Code) — unter Regie. Claim, Drehbuch, Timing, Geschmack und jede Feedbackrunde kamen von mir. Die KI ist der Motor, nicht das sichtbare Produkt: keine generierten Bilder, keine synthetische Stimme, kein austauschbarer KI-Look.

Dazu kommen automatische Prüfungen, die ich bei jeder Fassung laufen lasse: Überlappen sich Texte? Läuft etwas aus dem Bild? Erfüllen alle Texte den Kontrast nach WCAG AA? Erst wenn das grün ist, schaue ich mir Standbilder an — und erst dann wird gerendert.

Ehrliche Grenzen

• Ohne Drehbuch wird es generisch. Eine KI animiert alles, was man ihr sagt — genau das ist das Problem. Ohne klare Idee entsteht ein Haufen Effekte, aber kein Film.
• Zwei Formate heißen zwei Layouts. Was im Querformat passt, bricht im Hochformat um („Mehr Reservierungen.“ brauchte eine kleinere Schrift). Und bei Reels müssen oben und unten Zonen frei bleiben, weil dort die Bedienelemente der App liegen.
• Synthetischer Ton ist gut genug, nicht großartig. Ein echtes Dribbling, im Hof aufgenommen, klingt besser. Der Austausch ist eine einzige Datei.
• Kein Ersatz für Film. Gesichter, Emotionen, echte Orte — dafür braucht es eine Kamera. Motion aus Code ist für Marke, Daten und Erklärungen da.

Und auf der Website? Null JavaScript

GSAP läuft nur beim Rendern auf meinem Mac. Auf syfrt.de liegt eine fertige MP4-Datei im ganz normalen Video-Element, selbst gehostet: kein YouTube, kein Cookie, kein Drittanbieter. Bis Sie auf Play drücken, wird nur das Vorschaubild geladen. Das Hochformat für Reels und WhatsApp-Status sieht so aus:

Was das für Ihr Unternehmen heißt

Einmal gebaut, ist eine Komposition eine Vorlage: Daten rein, Video raus. Ein paar Ideen, die sich daraus ergeben:

• Produktvideos aus dem Shop-Feed — dieselbe Vorlage, hundert Produkte.
• Wochen-Reels aus echten Zahlen — automatisch gerendert, statt jede Woche eine Grafik zu basteln.
• Ein Website-Check als 30-Sekunden-Video — statt eines PDFs, das niemand öffnet.

Das Prinzip dahinter ist dasselbe wie bei meiner KI-Automatisierung: wiederkehrende Arbeit einmal sauber bauen und dann laufen lassen. Und wie bei dieser Website gilt: die einfachste Lösung, die das Ziel erreicht. Wenn Sie eine Idee für Ihr Unternehmen haben: Sprechen Sie mich an.