Video: das Wabenfeld baut sich auf, gerenderte Dateien raus

Das Video ist geschnitten. Die Einblendungen liegen auf einer externen
Platte, im Repo bleibt die Werkbank: 381 Dateien und 24 MB gerenderte
Ausgabe sind raus, png/ und sequenz/ legt bauen.mjs beim naechsten Lauf
selbst wieder an.

WABENFELD
Es blendete als Ganzes auf, und das ist bei der einen Zeichnung, die
etwas behauptet, zu wenig. Jetzt steht zuerst die Nabe, dann wachsen die
Waben in fuenf Wellen nach aussen, und die Straenge ziehen jeweils kurz
nach ihrer Zelle nach. Rueckwaerts zieht sich das Feld in die Marke
zurueck, statt von aussen zu zerfallen.

Die Bewegung ist die introTimeline aus HoneycombSection.tsx, uebernommen
und nicht erfunden: scale 0,16 auf 1, back.out(1.75), gestaffelt nach
Abstand zur Mitte, danach die Straenge mit eigener Deckungsrampe. Weil
unsere Belegung nur fuenf verschiedene Abstaende kennt, sind es fuenf
Wellen und nicht achtzehn Einzelereignisse, und das liest sich als eine
Bewegung.

Dafuer brauchte der Zeitverlauf ein zweites Mass. Bisher frass der
Verzug vom Rest der Zeit: die letzte von achtzehn Zellen haette ein
Zehntel der Zeit fuer dieselbe Bewegung gehabt und waere hereingeschnappt,
waehrend die erste hereinschwebt. Mit data-d bekommt ein Element ein
eigenes Fenster fester Laenge. Ohne data-d bleibt alles wie es war, die
anderen neun Komponenten laufen unveraendert durch den alten Pfad.

50 Bilder statt 12, bei 25 fps also zwei Sekunden herein und 1,2 hinaus.
Die Bewegung ist bei 0,94 fertig, die letzten Bilder stehen still. Masse
und Ausschnitt sind unveraendert, 2168 x 1906.

DIE PNGS WAREN IN DER ERSATZSCHRIFT
KOMP_BEREIT wartete auf document.fonts.ready, bevor die Karte im DOM
stand. Zu dem Zeitpunkt braucht die Seite keine Manrope, es laeuft kein
Ladevorgang, und das Versprechen loest sofort auf -- erfuellt, ohne dass
ein Byte Schrift da waere. Danach wurde gebaut, und ob die Schrift bis
zur Messung ankam, entschied der Zufall: dieselbe Komponente
hintereinander gemessen kam abwechselnd 984 und 1010 px breit heraus.

Das ist die Falle aus rules.md 4, nur eine Ebene frueher als dort
beschrieben. document.fonts.load() holt eine Schriftlage unabhaengig
davon, ob gerade jemand sie benutzt, erst danach ist ready eine Aussage.
Dieselbe Wette steckte in der Wortmarke von logo-bug, einem img mit
width:auto, deshalb wartet der Aufbau jetzt auch auf die Bilder.

Sieben der zehn zuletzt gebauten Dateien waren betroffen und 2 bis 4
Prozent zu schmal. Die reinen Zeichnungen verraten es nicht, ihr SVG hat
feste Masse -- ring-kern war gegen einen frischen Render bildgleich.

STANDBILD KOMMT AUS DER SEQUENZ
Der Dreiteiler im Schnitt haengt daran, dass -ein, Standbild und -aus an
den Stoessen dasselbe Bild zeigen. Als zweite Aufnahme war das bisher nur
wahr, weil es zufaellig stimmte. Beim Wabenfeld stimmte es nicht mehr:
dort tragen die Zellen waehrend der Bewegung ein transform, und nach dem
Wegnehmen rastert Chrome eine Spur anders als bei einem Element, das nie
eines hatte. Der Unterschied lag bei einer Stufe auf verstreuten Pixeln,
also unsichtbar, aber die Zusage war weg. bauen.mjs schreibt das
Standbild jetzt aus dem letzten Bild der Einblendung: dieselbe Datei
statt derselbe Anblick.

NEBENBEI
- Bauchbinde Betrieb, Chip "Vierte Generation" und Endkarte sind raus.
  Die Bauchbinde liess sich ueber ?name= und ?rolle= ohnehin aus der
  ersten erzeugen, ein Schlussbild gehoert in den Schnitt und nicht als
  Einblendung darauf.
- Das Wabenfeld steht ohne das blasse Feld aus leeren Waben. Auf dem
  weissen Blatt traegt das die Zeichnung, ueber Videomaterial ist ein
  Schleier aus halbdurchsichtigen Sechsecken im Weg. Der Ausschnitt wird
  seitdem aus den belegten Waben gerechnet. In post3.html bleibt beides.
- strangForm() heisst hier strangPfad() und liefert nur den Pfad: die
  Form muss je Bild neu gerechnet werden, weil ein Ende wandert. In den
  Post-Seiten bleibt strangForm(), die Rechnung darin ist dieselbe.
- liste.json und README stehen auf dem Stand der zehn Komponenten.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
dejanandClaude Opus 5 committed 2026-08-18 13:29:00 +02:00
1 parent ceb63fec38
commit e02e87b7e2
385 files changed
+340 -211

No files matched your search

+40 -8
View File
@@ -49,18 +49,29 @@ liegt auf einer eigenen Spur über dem Bild und der Rest ist durchsichtig.
| 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 |
| `bauchbinde-noah` | 20 / 12 | 0,80 s / 0,48 s | 0,67 s / 0,40 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 |
| `ring-kern` | 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 |
| `wabenfeld` | **50 / 30** | **2,00 s / 1,20 s** | **1,67 s / 1,00 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.
**Das Wabenfeld tanzt aus der Reihe, und das ist Absicht.** Alle anderen
Einblendungen setzen ein Stichwort, während Noah spricht — die dürfen nichts
wollen und blenden deshalb schlicht auf. Das Wabenfeld ist das Bild zur
Aussage und baut sich auf: die Nabe steht, dann wachsen die Waben in fünf
Wellen von innen nach außen, und die Stränge ziehen jeweils kurz danach nach.
Rückwärts zieht sich alles wieder in die Marke zurück.
Die Bewegung ist die `introTimeline` aus `HoneycombSection.tsx` der Website,
nicht neu erfunden: `scale` von 0,16 auf 1, `back.out(1.75)`, gestaffelt nach
Abstand zur Mitte, danach die Stränge mit einer eigenen Deckungsrampe. Wer an
der Zeitrechnung dreht, findet sie als `WABE_ZEIT` in `komponenten.html`.
> **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
@@ -71,8 +82,6 @@ will, erhöht `bilder` bei der Komponente in `komponenten.html` und baut neu.
| 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 |
@@ -82,7 +91,11 @@ will, erhöht `bilder` bei der Komponente in `komponenten.html` und baut neu.
| `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 |
> Eine Bauchbinde für den Betrieb ließ sich über `?name=` und `?rolle=` ohnehin
> aus der ersten erzeugen und ist deshalb weg, mit ihr der Stempel „Vierte
> Generation". Eine Endkarte gab es auch einmal — ein Schlussbild gehört in den
> Schnitt und nicht als Einblendung darauf.
**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.
@@ -128,7 +141,26 @@ Ein paar Entscheidungen, die dahinterstehen:
- **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
## Drei Fallen, in die wir hier schon getappt sind
**`document.fonts.ready` war erfüllt, bevor es etwas zu laden gab.** Die Seite
hat auf die Schrift gewartet, *bevor* die Karte im DOM stand — zu dem Zeitpunkt
brauchte niemand Manrope, es lief also kein Ladevorgang, und das Versprechen
löste sofort auf. Danach wurde die Karte gebaut, Chrome fing an zu laden, und ob
es bis zur Messung fertig war, entschied der Zufall. Dieselbe Komponente
hintereinander gemessen kam abwechselnd 984 und 1010 px breit heraus.
Das ist die Falle aus `rules.md` §4, nur eine Ebene früher: dort steht „auf
`document.fonts.ready` warten", und genau das tat die Seite — nur zu früh.
`document.fonts.load()` holt eine Schriftlage unabhängig davon, ob gerade jemand
sie benutzt; erst danach ist `ready` eine Aussage. Dieselbe Wette steckt in
jedem `<img>` mit `width:auto`, deshalb wartet der Aufbau jetzt auch auf die
Bilder.
> **Woran man es merkt:** an den Maßen in `liste.json`. Eine Komponente, die
> beim Neubau plötzlich 2 bis 4 Prozent schmaler wird, hat keine Textänderung
> hinter sich, sondern die Ersatzschrift. Die reinen Zeichnungen (`ring-kern`,
> `wabenfeld`) verraten es nicht — ihr SVG hat feste Maße.
**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`