dejanandClaude Opus 5
e02e87b7e2
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>
HiveGrid Social — Design-Library & Post-Generator
Eigenständige Werkbank für HiveGrid-Social-Grafiken. Slides werden im Browser als HTML gebaut, im Canvas bearbeitet und pixelgenau als Instagram-taugliche PNGs exportiert.
Das Repo ist bewusst autark. Keine CDN-Verweise, keine Google-Fonts zur Laufzeit, keine Pfade in andere Repos. Alles, was ein Post braucht — Schrift, Logos, Mockups, Screenshots, Bibliotheken — liegt hier.
Starten
./serve.sh # http://127.0.0.1:4321
Downloads landen direkt in ~/Downloads, ohne Browser-Dialog.
Projekte
| Projekt | Datei | Inhalt | Übergabe |
|---|---|---|---|
| Post 1 · Lösung | post1.html |
Carousel, Anzahl frei | |
| Post 2 · Die Geschichte | post2.html |
Carousel, 6 Slides, erscheint 12.08. | POST-2.md |
| Post 2 · Alternative | post2-alt.html |
Derselbe Beitrag im Theme modern |
|
| Post 3 · Verbinden statt ersetzen | post3.html |
Einzelbild, Theme modern, erscheint 17.08. |
Alle Streifen nebeneinander zeigt uebersicht.html, erreichbar über
Projekt → Alle Projekte im Streifen. Die Seite baut die Slides nicht selbst
nach: jedes Projekt kommt als iframe mit ?nur=streifen, und in diesem Modus
blendet die Post-Seite ihre Bedienoberfläche aus, zeigt den Streifen in
natürlicher Größe und speichert nichts — drei Kacheln, die beim Schließen
ihren Stand zurückschreiben, wären genau die Falle aus POST-2.md §6.
Jeder Streifen ist auf die Fensterbreite eingepasst, gescrollt wird nur
hoch und runter — kein Zoom, weder außen noch im Streifen.
Post 2 gibt es zweimal, in zwei Themes. Projekt und Theme sind zwei
verschiedene Dinge: das Projekt sagt, welcher Beitrag, das Theme, wie er
aussieht. notebook ist die Zeichenblock-Optik mit Raster und Marker,
modern der ruhige Grund mit farbigem Akzentwort und schwebenden Karten.
Beide zeigen denselben Beitrag mit denselben Texten.
Die Themes stehen in rules.md §1a mit ihren Unterschieden.
Wer eine Visualisierung ändert, muss an beide Dateien denken.
Post 3 ist ein Einzelbild, keine Slidefolge: eine Haltung, die man
durchwischen muss, ist keine. Sein Bild ist das Wabenfeld der Startseite,
nachgebaut aus HoneycombSection.tsx — dieselbe Achsrechnung, dieselben
Zellnummern, dieselbe Belegung, damit es wiedererkennbar bleibt und keine
Anmutung davon ist. Die vier Waben „In Arbeit" fehlen: auf der Startseite sind
sie ein Versprechen, im Beitrag wären sie ein Eingeständnis.
Die vierzehn Partner-Marken liegen unter assets/partner/ und sind, wie alles
andere hier, aus der Website gespiegelt statt verlinkt. Sechs davon sind
PNG und damit dieselbe Wette wie ein Screenshot (§7 in rules.md), deshalb
prüft der Export sie einzeln nach — wabenZonen() in post3.html.
Der Redaktionsplan für alle weiteren Beiträge liegt in
redaktionsplan/, gebaut mit python3 redaktionsplan/bauen.py.
Slides anlegen und wegnehmen
Wie viele Slides ein Post hat, steht nicht fest. Unter der Slide-Auswahl:
| Knopf | Wirkung |
|---|---|
+ Neu |
leere Slide dahinter einfügen |
Kopie |
die gewählte Slide samt Text, Bild und Verschiebungen verdoppeln |
Löschen |
die gewählte Slide wegnehmen (die letzte bleibt stehen) |
← → |
eine Position nach vorn oder hinten |
Bei einer einzigen Slide ist der Post ein Einzelbild — die Kopfzeile sagt es, und der ZIP-Knopf verschwindet.
Unter Inhalt (nur diese Slide) stehen Tag, Überschrift, Fließtext und die
Auswahl des Screenshots. Getippt wird Text, keine Auszeichnung: *Wort* setzt
den Akzent, ein Zeilenumbruch bricht die Zeile um. Das Rahmenformat folgt beim
Wechsel automatisch dem Seitenverhältnis der gewählten Aufnahme.
Die Tags sind gestalterisch ausgeblendet (
visibility: hiddenauf.badge). Der eingetippte Tag beschriftet deshalb vorerst nur den Slide-Knopf im Bedienfeld.
Eigene Bilder importieren
Unter Eigene Bilder wählst du Dateien aus dem Finder, oder du ziehst sie direkt auf eine Slide. Beim Ablegen wird das Bild dort zum zweiten Bild und lässt sich im Bearbeiten-Modus frei schieben und in der Größe ändern; über den Knopf importierst du nur und ordnest danach unter Inhalt zu.
Die Datei geht byteweise unverändert an den Server und liegt danach unter
assets/eigene/. Nichts wird neu kodiert, skaliert oder umbenannt — nur
Zeichen, die in einem Dateinamen nichts zu suchen haben, weichen einem
Bindestrich.
assets/eigene/ importierte Bilder, gehören mit in den Commit
Der Umweg über den Server ist Absicht. Ein Foto als Base64 im Projektstand wäre größer als der gesamte übrige Stand und machte jeden Diff unlesbar. So steht dort nur der Pfad.
Die Auswahllisten unter Inhalt holt der Generator beim Start vom Server
(/bilder), importierte Bilder stehen deshalb sofort darin — mit ★
gekennzeichnet.
Mitgelieferte Slides bleiben Vorlagen. Der Stand speichert für sie nur einen Verweis und die Felder, die du überschrieben hast — eine Änderung an der Vorlage im Code kommt dadurch weiterhin bei allen an, die sie nicht angefasst haben. Selbst angelegte Slides stehen vollständig im Stand.
Das Projekt speichert seinen Stand — Einstellungen, Layouts, Muster und alle Verschiebungen aus dem Canvas überleben einen Reload. „Projekt zurücksetzen" wirft ihn weg.
Der Stand liegt im Repo
Nicht nur im Browser: jede Änderung landet auch in state/<projekt>.json.
Diese Dateien gehören mit in den Commit. Nur so hat die andere Maschine
nach git pull denselben Stand.
state/post1.json Post 1 · Lösung
state/post1-merk.json Rückfallpunkt
Beim Laden gewinnt die Datei, der localStorage ist nur der Rückfall, wenn der Server nicht läuft. Wer den Stand ändert, muss also committen und pushen — sonst sieht ihn niemand sonst. Gibt es die Datei noch nicht, wird der Stand aus dem Browser einmalig hineingeschrieben.
Bedienung
| Taste | Wirkung |
|---|---|
← → |
Slide wechseln (im Bearbeiten-Modus: Element verschieben) |
E |
Bearbeiten an/aus |
W |
Streifen ⇄ Einzelansicht |
V |
Variante hell/dunkel |
L M I |
Layout · Muster · Intensität |
C G T |
Durchgehend · Tag-Ausrückung · Perspektive |
D A |
Slide laden · alle als ZIP |
Im Bearbeiten-Modus lassen sich Elemente ziehen und mit den Pfeiltasten
pixelweise schieben (⇧ = 10 px).
Ein angeklicktes Element öffnet sein eigenes Feld rechts. Damit ist die Oberfläche geteilt: links die Slide und alles Allgemeine, rechts das eine Element.
| Im Element-Feld | Wirkung |
|---|---|
Text |
Beschriftung des Elements, *Wort* setzt den Akzent |
Schrift / Breite, A− A+ |
Größe |
X Y |
Stelle auf der Slide, gezählt ab der Mitte, bezogen auf die obere linke Ecke |
Ebene |
wie z-index — höher liegt weiter vorn. Leer heißt Standard |
Links Mitte Rechts, Oben Mitte Unten |
an der Slide ausrichten, 92 px Rand |
Position / Größe angleichen |
denselben Wert auf allen Slides |
Löschen |
nimmt es aus der Slide. Es taucht darunter als „… zurück" wieder auf |
Der Streifen ist eine durchgehende Fläche. Jede Slide trägt das gesamte Blatt, ein Element lässt sich also über den ganzen Post schieben und nicht nur in die Nachbar-Slide.
Auf der Fläche bewegen
| Maus | Wirkung |
|---|---|
| Ziehen | Ausschnitt schieben |
| Rad | Zoomen, auf den Zeiger zu |
⇧ + Rad |
Waagerecht schieben |
| Leertaste-Ziehen, mittlere Taste | Schieben, auch im Bearbeiten-Modus |
Ein gewöhnliches Mausrad genügt, ohne Zusatztaste. Im Bearbeiten-Modus zieht
die linke Taste das Element unter dem Zeiger — die Fläche schiebt man dort mit
gedrückter Leertaste oder der mittleren Taste. Fit unten rechts setzt den
Maßstab zurück.
Aufbau
assets/
├── brand/ Wortmarke hell/dunkel, G-Marke (SVG + PNG), Wabe, Geerkens
├── partner/ die 14 Marken des Wabenfelds (DATEV, KWP, pds, Bauhow, Aircall,
│ Onepage, PandaDoc, Hallo Petra, Claude, OpenAI, Google Drive,
│ Google Calendar, MS Outlook, MS Teams)
├── mockups/ Geräte-Mockups (Displays ausgeknockt, Screenshot liegt dahinter)
├── screens/ Software-Screenshots
├── eigene/ selbst importierte Bilder
└── fonts/ Manrope 400–800, lokal
vendor/ html-to-image, JSZip
state/ Projektstände, gehören ins Repo
serve.py Statischer Server + /save, /state, /upload, /bilder
rules.md Gestaltungsregeln, Farbwerte, Export-Wissen
Regeln
rules.md ist die Arbeitsgrundlage. Farbwerte, Geometrie, Typografie,
Layout-Template, Instagram-Export und die Liste der Fallen, in die wir schon
getappt sind. Vor jeder Änderung an der Gestaltung dort nachsehen.
Marken-Werte stammen aus der Website (HiveGrid-Website) und sind hier
gespiegelt, nicht verlinkt. Ändert sich dort etwas, muss es hier
nachgezogen werden.