posts/video

Video-Komponenten

Einblendungen für den Videoschnitt, in derselben Bildsprache wie die Posts: weiße Karten mit Haarlinie und weichem Schatten, ein gelber Akzent, Manrope. Gedacht für Noahs Beitrag über den Betrieb, taugt aber für jeden Schnitt.

Jede Komponente liegt zweimal vor — als Standbild und als Bildsequenz mit fertiger Ein- und Ausblendung. Alles mit Alphakanal, alles freigestellt: kein Rand, keine Leinwand, keine Farbe hinter der Karte.

video/
├── komponenten.html    die Vorlage, hier steht die Gestaltung
├── bauen.mjs           rendert daraus die Dateien
├── liste.json          was zuletzt gebaut wurde, mit Maßen
├── png/                Standbilder
└── sequenz/            je Komponente ein Ordner "-ein" und einer "-aus"

In Premiere holen

Standbild: png/<name>.png in die Timeline ziehen. Ein- und Ausblendung machst du selbst über Position und Deckkraft. Das ist der flexiblere Weg.

Sequenz: Datei → Importieren, im Ordner sequenz/<name>-ein/ das erste Bild anklicken und unten „Bildsequenz" ankreuzen. Premiere legt daraus einen einzigen Clip an, nicht 20 Einzelbilder.

Eine Bildsequenz hat keine eigene Bildrate. Die Dateien wissen nichts davon, wie schnell sie laufen sollen — Premiere vergibt sie beim Import aus Einstellungen → Medien → Zeitbasis für unbestimmte Medien. Ab Werk stehen dort meist 30 fps. Was das für die Dauer heißt, steht in der Tabelle unten. Ändern lässt es sich jederzeit: Rechtsklick auf den Clip im Projektfenster → Ändern → Videomaterial interpretieren → Bildrate annehmen. Die Bewegung wird davon nur schneller oder langsamer, nie ruckelig — es liegt für jedes Bild eine eigene Datei vor.

Der übliche Aufbau im Schnitt sind drei Teile hintereinander: <name>-ein → png/<name>.png beliebig lang gezogen → <name>-aus. Das letzte Bild von -ein und das erste von -aus sind das Standbild, die Stöße sind also unsichtbar. Alle drei Teile haben dieselben Maße und denselben Bildausschnitt — was du am ersten an Position und Größe einstellst, kannst du auf die beiden anderen einfügen (Bearbeiten → Einfügen → Attribute).

Der Alphakanal kommt mit. Kein Keying, keine Maske, kein Mischmodus: die Karte liegt auf einer eigenen Spur über dem Bild und der Rest ist durchsichtig.

Dauer je Komponente

Komponente	Bilder ein / aus	bei 25 fps	bei 30 fps
bauchbinde-noah, bauchbinde-betrieb	20 / 12	0,80 s / 0,48 s	0,67 s / 0,40 s
chip-generation	16 / 10	0,64 s / 0,40 s	0,53 s / 0,33 s
alle satz-*	18 / 11	0,72 s / 0,44 s	0,60 s / 0,37 s
beide stapel-*	22 / 13	0,88 s / 0,52 s	0,73 s / 0,43 s
ring-kern, wabenfeld	12 / 7	0,48 s / 0,28 s	0,40 s / 0,23 s
logo-bug	14 / 8	0,56 s / 0,32 s	0,47 s / 0,27 s
endkarte	20 / 12	0,80 s / 0,48 s	0,67 s / 0,40 s

Mehr Bilder heißt längere Bewegung, nicht flüssigere: die Staffelung steckt in Anteilen des Verlaufs, nicht in Zeitwerten. Wer eine langsamere Einblendung will, erhöht bilder bei der Komponente in komponenten.html und baut neu.

Nicht skalieren, wo es nicht sein muss. Die Dateien sind in doppelter Größe gerendert (FAKTOR in bauen.mjs). In einer Zeitleiste mit 1920 × 1080 setzt du sie also auf rund 50 % — dann sitzt jeder Pixel, und nach oben ist bis 4K Luft.

Was es gibt

Schlüssel	Was es zeigt	Wofür im Skript
bauchbinde-noah	Noah Geerkens · Gründer	wenn er sich vorstellt
bauchbinde-betrieb	Geerkens Haustechnik · SHK, vierte Generation	dazu oder statt dessen
chip-generation	gedrehter Stempel „Vierte Generation · SHK"	zum Betrieb
satz-erp-bleibt	„Dein ERP bleibt."	der Einwand, direkt beantwortet
satz-kein-ersatz	„Kein Ersatz." / „Der Aufbau drumherum."	die Kernaussage
satz-miteinander-reden	„Die Tools reden miteinander."	was gefehlt hat
satz-handwerksalltag	„Kein Startup-Projekt."	der Abbinder
stapel-haengt-drin	Stammdaten · Aufträge · Buchhaltung	was einen Wechsel unmöglich macht
stapel-was-fehlte	KI-Lösungen · CRM · Automatisierungen	was sie wollten
ring-kern	der Kern bleibt, HiveGrid liegt darum	„kein Ersatz, sondern der Aufbau drumherum"
wabenfeld	die Marke in der Mitte, die Programme drumherum	„dass die Tools endlich miteinander reden"
logo-bug	Wortmarke für die Ecke	durchgehend oder am Anfang
endkarte	„Vom Handwerker für Handwerker"	Schlussbild

Wenig Text ist Absicht. Noah spricht das Skript, die Einblendung setzt das Stichwort. Zwei Sätze auf einer Karte lesen sich nicht, während jemand redet.

Texte ändern

Die Texte hängen an der Adresse, nicht am Code. Server starten (./serve.sh), dann zum Beispiel:

http://127.0.0.1:4321/video/komponenten.html?k=satz-erp-bleibt&zeile=Dein *CRM* bleibt.
http://127.0.0.1:4321/video/komponenten.html?k=bauchbinde-noah&name=Lena Geerkens&rolle=Geschäftsführung

*Wort* setzt den gelben Akzent, höchstens einer je Zeile (rules.md §4). Welche Felder eine Komponente kennt, steht bei ihr unter felder in komponenten.html. ?alle=1 zeigt alle nebeneinander auf einem Karo-Grund.

Wer einen geänderten Text als Datei braucht, trägt ihn in komponenten.html ein und baut neu — die Adresse wirkt nur im Browser.

Neu bauen

./serve.sh                     # muss laufen, in einem zweiten Terminal
node video/bauen.mjs           # alles
node video/bauen.mjs bauchbinde satz   # nur passende Schlüssel

Ein paar Entscheidungen, die dahinterstehen:

• Bildsequenz statt Video mit Alphakanal. Ein Video mit echter Transparenz wäre ProRes 4444, und dafür braucht es ffmpeg. Das ist hier nicht installiert, und eine Bildsequenz kann Premiere genauso importieren.
• Node statt Python, anders als sonst im Repo. Gebraucht wird eine Steuerverbindung zu Chrome, und die hat Node ohne Zusatzpaket an Bord. Chrome pro Einzelbild neu zu starten wäre die Alternative gewesen — bei rund 380 Bildern sind das zehn Minuten Warten für nichts.
• Der Ausschnitt wird gemessen, nicht angegeben. KOMP_KASTEN() misst nach dem Rendern, was tatsächlich dasteht, und legt 52 px Zugabe drumherum: der Schatten liegt außerhalb der Box, und was aufblendet, startet 26 px tiefer. Ohne die Zugabe schneidet das PNG beides ab.
• Die Ausblendung ist die Einblendung rückwärts, nur kürzer. Ein eigener Ausgang sähe eine Spur besser aus und kostete doppelt so viele Bilder.

Zwei Fallen, in die wir hier schon getappt sind

Der Schatten war nicht da. Die Karte trug clip-path für die abgeschnittenen Ecken und box-shadow für den Schatten — und clip-path beschneidet den Schatten mit. Genau so steht es in rules.md §3, und genau so ist es passiert. Am gerenderten PNG fiel die Deckung an der Kartenkante von 255 auf 0, ohne einen einzigen Zwischenwert. Der Schatten sitzt jetzt als filter: drop-shadow() auf einer Hülle. Nebenbei folgt der der Alphamaske und legt sich um die abgeschnittenen Ecken herum statt um ein Rechteck.

inset(0 0 0 0) ist nicht dasselbe wie kein Beschnitt. Die Einblendung zieht die Karte über clip-path: inset() von links auf. Am Ende steht dort rechnerisch null — das schneidet aber weiterhin exakt auf die Box und kappt damit wieder den Schatten. Bei vollem Verlauf fällt der Beschnitt deshalb ganz weg.

Was fehlt

Der Grund, warum die Marken im Wabenfeld sitzen, steht in rules.md §3 unter Wabenfeld. Wer dort etwas ändert, muss an drei Dateien denken: post2-alt.html, post3.html und diese hier. Das ist der Preis dafür, dass jede Datei für sich lauffähig bleibt.