Broadcast Graphics Design System Self-Service-Tool HyperFrames

RegionalPlus Grafik-Generator

Ein Broadcast-Design-System wird zum Werkzeug: Die Redaktion tippt den Text in eine Bauchbinde, klickt auf Rendern und bekommt Sekunden später eine fertige ProRes-Datei mit transparentem Hintergrund — direkt in jedes Schnittsystem ziehbar. Kein Motion Designer pro Insert.

2026 · FFWD Labs

On Air, self-service.
Regional Plus
Ihre lokale Nachrichtensendung
Live

Worum geht's?

Die eigentliche Herausforderung: In Österreichs R9-Verbund sind die RegionalTV-Sender aller neun Bundesländer an der Produktion beteiligt — geschnitten wird auf sieben verschiedenen Schnittsystemen, von Avid Media Composer über Premiere Pro und Final Cut bis DaVinci Resolve. Jede Grafik müsste also als eigener Template-Satz für jedes einzelne System gebaut und gepflegt werden.

Dazu kommt der Alltag: Jede Bauchbinde, jeder Namens-Insert, jeder Abspann für eine TV-Sendung war bisher ein Motion-Design-Handgriff — Text ändern, exportieren, abgeben. Bei einer täglichen Regionalsendung summiert sich das.

Also haben wir das RegionalPlus-Design-System in ein Web-Tool verwandelt. Neun broadcast-fertige Vorlagen stehen als HyperFrames-Kompositionen bereit (HTML/CSS + GSAP-Timeline). Die Redaktion wählt eine Vorlage, füllt die Textfelder, sieht die Animation live in der Vorschau und rendert mit einem Klick nach Apple ProRes 4444 mit Alphakanal — das Format, das sich sauber über jedes Footage legt und in jedes der sieben Schnittsysteme ziehen lässt. Ein Render statt sieben Template-Sätze. Was rauskommt, ist bildidentisch zum handgebauten Insert, nur ohne den Designer im Loop.

9
Vorlagen
ProRes
4444
Alpha · 25 fps
~37 s
pro Video
×50
Batch je Durchlauf

Vom Text zum Insert — vier Schritte

01 · Vorlage

Auswählen

Bauchbinde, Personen-ID, Kennzeichnung oder Abspann — neun Vorlagen im finalen RegionalPlus-Look.

02 · Text

Befüllen

Felder ausfüllen, Animation live in der Vorschau scrubben. Umlaute, Sonderzeichen, alles im Griff.

03 · Render

Rendern

Ein Klick. Läuft ein anderer Job, reiht sich der eigene mit sichtbarer Position in die Warteschlange.

04 · Schnitt

In Premiere

Fertige .mov mit Alpha herunterladen und direkt über das Footage legen. Broadcast-ready.

Die neun Vorlagen

rplus-insert-left-1/2/3

Bauchbinde links

Ort/Thema, 1–3 Zeilen — grüner Balken + weiße Fließtextzeilen.

rplus-insert-right-1/2/3

Personen-ID rechts

Name, Funktion, Betrieb — rechtsbündige Namenseinblendung.

rplus-dauerwerbesendung

Kennzeichnung

Pflicht-Label oben rechts (oben links bleibt für den Senderbug).

rplus-credits-1

Abspann Personen

Moderation, Produktion, Grafik, Sendungsleitung im linken Drittel.

rplus-credits-2

Abspann Logos

Produktions- und Auftraggeber-Logos plus Copyright-Zeile.

soft-wipe · GSAP

Gemeinsame Mechanik

Weiche Wipe-Maske rein (1 s) · halten · raus (1 s). Grün #4B6134.

Ganze Staffel auf einmal: Batch

Für einen kompletten Abspann oder eine Serie von Namens-Inserts muss niemand 20-mal klicken. Im Batch-Modus kommt eine Zeile pro Video — direkt aus Excel oder Google Sheets einfügbar. Das Tool rendert alle nacheinander, zeigt den Fortschritt („3 von 8 fertig") und legt am Ende ein ZIP mit allen ProRes-Dateien zum Download bereit, sauber benannt.

Unter der Haube

Gerendert wird mit der offiziellen HyperFrames-Engine (HeyGen, Open Source): Sie fährt die GSAP-Timeline Frame für Frame in einem headless Chromium ab und kodiert mit ffmpeg nach ProRes 4444. Der Umstieg von der ersten Eigenbau-Pipeline machte das Rendern rund zehnmal schneller. Gehostet als schlanker Node-Dienst mit React-Frontend — passwortgeschützt, auf eigener Hardware, damit die volle CPU auch wirklich fürs Rendern da ist.

HyperFrames CLI GSAP-Timeline Chromium (headless) ffmpeg · ProRes 4444 Express + React Render-Queue systemd + Caddy
Tool öffnen → · zugangsgeschützt