dejanandClaude Opus 5
ceb63fec38
POST 3 Slide 2 zeigt den Aufbau: HiveGrid in der Mitte, die eigenen Module auf dem gelben Ring, die fremden Programme aussen am gestrichelten Kreis. Nachbau des Schaubilds aus dem Prototyp, aber in den Markenfarben -- Magenta ist keine (rules.md 2) -- und ohne Produktnamen im Kern. Achtung: das ist eine andere Aussage als in post2-alt.html, wo in der Mitte das Branchenprogramm liegt und HiveGrid ausdruecklich der Ring ist. Steht als Warnung im Code. Die Ueberschrift "Der Kern bleibt." passt seit dem Wechsel der Mitte nicht mehr zum Bild und ist noch offen. Slide 1 traegt nur noch die Ueberschrift; ein leerer Fliesstext erzeugt jetzt keinen leeren Absatz mehr. Das Wabenfeld ist enger geschnitten (Faktor 1,301 statt 1,227) und steht am Anschlag: 96 px zur Slide-Kante, die Sicherheitszone liegt bei 92. Ueberschriften in 76 px und 3 px versetzt wie in post2-alt -- gemessen, nicht geschaetzt. Zwei Fehler, die dabei aufgefallen sind: - Die Andock-Kacheln lagen auf denselben Strahlen wie die Module und beruehrten sich. Dieselbe Ueberlappung hat der Exportpruefung eine Spanne von 37 vorgetaeuscht, wo eine fehlende Marke 0 ergeben muss -- der Gegentest kam durch, obwohl die Marke fehlte. 22,5 Grad Versatz behebt beides. - Die Pruefung kannte nur den Ausschnitt des Wabenfelds und haette auf Slide 2 an der falschen Stelle gemessen. Der Ausschnitt wandert jetzt mit in die Ablage, wabenZonen heisst darum markenZonen. VIDEO Neuer Ordner video/ mit 13 Einblendungen fuer den Schnitt, jede als Standbild und als Bildsequenz mit Ein- und Ausblendung, alle mit Alphakanal. Gerendert aus komponenten.html von bauen.mjs ueber CDP; kein ffmpeg noetig, weil eine Bildsequenz dieselbe Transparenz traegt wie ProRes 4444. Der Schatten fehlte zunaechst ganz: die Karte trug clip-path fuer die Ecken und box-shadow fuer den Schatten, und clip-path beschneidet ihn mit. Genau so steht es in rules.md 3. Sitzt jetzt als drop-shadow auf einer Huelle. NEBENBEI - Das ZIP hiess in allen Projektdateien "hivegrid-post1-loesung", weil sie voneinander kopiert wurden. Kommt jetzt aus PROJECT. - Das rechte Element-Feld liess sich nicht schliessen, wenn es nicht ganz ins Fenster passte: sein Knopf rutschte als erster hinaus. Knopf nach vorn, Escape hebt die Auswahl auf, max-width auf den Feldern. - uebersicht.html schrieb "1 Slides". Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
153 lines
7.7 KiB
Markdown
153 lines
7.7 KiB
Markdown
# 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
|
||
|
||
```sh
|
||
./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.
|