Nummer 2 im Redaktionsplan, im Generator das dritte Projekt. Kein Carousel:
eine Haltung, die man durchwischen muss, ist keine.
Das Bild ist das Wabenfeld der Startseite, uebernommen aus
HoneycombSection.tsx und nicht nachempfunden -- derselbe Umkreisradius,
dieselbe Achsrechnung, dieselben Zellnummern. Damit stimmen WABE_MARKEN und
HONEYCOMB_DEFAULT_LOGO_PLACEMENTS ueber dieselben Nummern ueberein. Die vier
Waben "In Arbeit" sind raus: auf der Startseite ein Versprechen, im Feed ein
Eingestaendnis.
Der Ausschnitt ist enger als die Slide (880 statt 1080), das Feld also um
1,227 vergroessert -- ein Ring leerer Waben rundherum kostete nur Platz.
Text mittig wie in post2-alt.html.
Sechs der 14 Marken sind PNG und damit dieselbe Wette wie ein Screenshot
(rules.md 7). wabenZonen() prueft sie deshalb einzeln nach: ein Punktraster
ueber den ganzen Markenkasten, dessen Ecken das Gelb der Wabe tragen. Fehlt
die Marke, ist der Kasten einfarbig und der Export wiederholt. Gegengetestet,
indem DATEV absichtlich weggelassen wurde.
Die sechs Zeichnungen von Post 2 sind aus der Kopie raus, 5237 auf 4270
Zeilen. Die Band-Maschinerie bleibt, laeuft bei einer Slide aber leer -- im
Kommentar steht jetzt, dass ihre Stuetzpunkte an Post 2 geeicht sind.
Nebenbei: uebersicht.html schrieb "1 Slides", faellt erst mit dem ersten
Einzelbild auf.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Das Akzentwort bekommt den Balken aus der Landingpage
(LandingPageClient.tsx: h-[3px], -bottom-1, bg-current, im Ruhezustand auf
22 % gestaucht, bei Hover voll). Wir nehmen die volle Breite, ein Standbild
kennt kein Hover. Die Masse stehen in em, weil der Balken dort unter 62 px
Schrift liegt und hier unter 76 -- auf der Titel-Slide unter 88.
Zum Ausprobieren zwei Schalter unter "Versuch": das Raster aus post1.html
laesst sich wieder einschalten, und Ueberschrift plus Fliesstext lassen
sich zentrieren. Beides steckt im Projektstand, die alte Komposition ist
also einen Klick entfernt.
Ausserdem:
- Der Rahmen um Noahs Foto traegt jetzt --accent-teal statt der
ausgewaschenen Fassung --accent-teal-light.
- Die vier schwebenden Kacheln auf Slide 2 sind raus.
- Das Band ist halb so dick und faengt auf Slide 3 erst hinter der Karte
an, kommt also dahinter hervor statt links schon dazuzuliegen.
BAND_ANSCHNITT und BAND_AUSLAUF steuern das, ohne die Stuetzpunkte zu
verschieben -- die Kurve bleibt an der Naht verankert.
- Auf Slide 6 stehen die Texte buendig zur Oberkante der Wabe. Die
Grundlinie lag 19 px zu tief, das ist die Versalhoehe von 32 px Manrope.
- .vis svg bekommt overflow: visible. Ohne das wurde der Schatten an der
Kartenkante gekappt: aussen ein grauer Streifen, in den Chamfer-Kerben
graue Keile.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Der metallisch schattierte Zylinder ist raus. Er sah fotorealistisch aus
und damit wie ein Fremdkoerper auf einem flachen, ruhigen Blatt. An seiner
Stelle steht eine deckende Flaeche mit einer blassen zweiten dahinter --
kein Verlauf, keine Woelbung, keine Glanzkante.
Zwei Toene, umschaltbar unter "Band" im Bedienfeld: Orange #F1B729 und
"HiveGrid Teal", was --dark-bg #30313D meint und nicht --accent-teal.
Der Unterschied steht jetzt in rules.md, damit die Verwechslung nicht
noch einmal passiert.
Das Band laeuft ueber Slide 3 bis 5 (BAND_VON / BAND_BIS). Slide 1 und 6
sollen ruhig sein, Slide 2 traegt ihre eigene orangene Leitung. Gezeichnet
als geschlossene Flaeche statt als dicke Linie: eine Linie bekommt am Ende
eine Kappe rechtwinklig zur Laufrichtung, und die stand bei schraeger Bahn
seitlich ueber die Naht.
Schatten sind fuer dieses Theme erlaubt, entgegen 5. Ohne sie stehen die
Karten gestochen auf dem Grund statt darueber. Als SVG-feDropShadow, weil
die Karten gezeichnet sind und ein CSS-Schatten vom clip-path beschnitten
wuerde. Noch nicht 3-fach exportgeprueft -- das steht als Auflage in der
Regel.
Ausserdem:
- Slide 1: die G-Marke in der Bauchbinde statt einer leeren Wabe, das
Badge der Landingpage (Monospace, 10 Grad gedreht) statt des Chips, und
das Foto fuellt die Inhaltsspalte statt 620 von 1080 px.
- Slide 6: das selbst gezeichnete Konfetti war ein Kleckshaufen und ist
jetzt "rocket" aus dem Feather-Satz.
- Kacheln haben wieder einen Boden statt harter Kontur.
- migrateState 7 raeumt die gespeicherten Vis-Positionen einmalig weg:
die Masse haben sich geaendert, und der offene Tab schreibt die Datei
sonst zurueck (POST-2.md 6).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Das Band laeuft als durchgehende Zeichnung ueber den ganzen Streifen,
jede Slide zeigt ihren Ausschnitt ueber --slide-i. An der Naht laeuft es
weiter statt neu anzusetzen -- der Uebergang, den ein Carousel sonst
nicht hat.
Es ist ein Rohr, kein Farbband: vierzig Streifen aus einer Rampe, die
Glanzstelle eingerueckt bei 20 % und fast weiss, der Kernschatten bei
78 % statt an der Unterkante, darunter Licht vom Grund zurueck. Der
erste Anlauf mit vier weichen Streifen sah nach Bonbon aus.
Damit das Band quer durch die Komposition laufen darf, liegt jede
Visualisierung jetzt auf einer deckenden Karte. Linienwerk auf
Transparenz verschwindet darin. Slide 5 musste dafuer von 988 auf 896
schrumpfen, Slide 6 bekam links Einzug.
Ausserdem:
- Feather-Icons aus @subframe/core statt selbst gezeichneter Zeichen,
auf Slide 2 bis 5. Slide 6 behaelt ihre Nachbauten aus WaitlistNext.
- Die echte G-Marke auf dem Ring, als Polygon statt als Bilddatei.
- Die 01/02/03 auf Slide 6 sind raus.
- Slide 1 uebernimmt den Rahmen der Ueber-uns-Seite: Radius 38 auf
teal-hellem Grund, Foto 4,2 % eingerueckt.
- Der Grund ist wieder #FFFFFF, wie Post 1 und Post 2. Den Kontrast
tragen die Karten jetzt ueber die Kante (#D5DBE1).
- Slide 4 und 5 hiessen abweichend vom Original; Beschriftungen und
Fliesstext gleichen jetzt post2.html.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Projekt und Theme waren bisher dasselbe. Jetzt nicht mehr: das Projekt sagt,
welcher Beitrag, das Theme, wie er aussieht. notebook ist die
Zeichenblock-Optik mit Raster, Marker und handgezogenen Formen, modern der
ruhige Grund mit farbigem Akzentwort und schwebenden Karten. Beide Themes
teilen Aufbau, Texte und Kompositionen. rules.md Paragraf 1a haelt fest, was
sie genau trennt.
Das Theme modern folgt Vorbildern aus dem Feed: Zapier, Slack, Autarc,
Photovate, Plancraft. Was ich daraus uebernehme, ist nicht die Optik der
einzelnen Marke, sondern das Gemeinsame -- ruhiger Grund ohne Textur, eine
sehr grosse Ueberschrift mit einem farbigen Wort statt einer Markierung,
schwebende Karten mit Haarlinie, Ablaufketten mit Knoten, gefuellte
Kreis-Haken.
Drei Farben, wie besprochen: Weiss als Grund, Orange als Akzent, Teal als
Zweitfarbe. Teal stand in rules.md bisher als "ungenutzt" und traegt jetzt
Zeichen und Kacheln. Die Schriftfarbe ist ein sehr dunkles Teal statt reinem
Schwarz, damit sie zur Palette gehoert.
Das Raster faellt weg. Die Ebene bleibt im Markup, damit beide Themes
denselben Aufbau haben, sie zeichnet nur nichts mehr.
Slide 4 ist der erste Umbau: der Notizzettel ist raus, die Aufzaehlung bleibt
und wird zur Kette aus Karten mit Zeichenkachel, Beschriftung und Haken,
dazwischen ein Verbinder mit Knoten. Die Form sagt zusaetzlich etwas aus --
die vier Dinge haengen zusammen, statt nur untereinander zu stehen.
Der Menueeintrag zur Alternative fehlte in post1.html und post2.html; er
stand nur in der Kopie selbst. Von dort kam man also nie hin.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Wie viele Slides ein Post hat, stand bisher im Code. SLIDES war ein festes
Array, der Stand speicherte nur Einstellungen dazu, und die durchgehende
Flaeche lag als 5400 px in der CSS.
Jetzt entsteht SLIDES aus einem Deck. Jeder Eintrag ist entweder eine
mitgelieferte Vorlage (ref) oder eine selbst angelegte Slide; eigene Texte
liegen als Ueberschreibung daneben. Fuer Vorlagen wandert damit nur ein
Verweis in den Stand, keine Kopie -- eine Aenderung an der Vorlage im Code
kommt weiterhin bei allen an, die sie nicht angefasst haben. Haette man die
Slides vollstaendig in den Stand geschrieben, waeren sie dort eingefroren.
Unter der Slide-Auswahl stehen vier Knoepfe: neu, kopieren, loeschen,
verschieben. Die Felder pro Slide (Verschiebungen, Muster, Layout) wandern
im Gleichschritt mit. Bleibt eine einzige Slide uebrig, ist der Post ein
Einzelbild: die Kopfzeile sagt es und der ZIP-Knopf verschwindet.
Neu ist die Gruppe "Inhalt (nur diese Slide)" mit Tag, Ueberschrift,
Fließtext und der Auswahl des Screenshots. Getippt wird Text, nicht
Auszeichnung: *Wort* setzt den Akzent, ein Zeilenumbruch bricht die Zeile um.
Gespeichert wird trotzdem fertiges Markup, weil die Vorlagen es so
mitbringen. Beim Bildwechsel folgt das Rahmenformat dem Seitenverhaeltnis
der Aufnahme, sonst stuende ein Hochformat in einem Querformat-Rahmen. Alle
Screens werden vorgeladen, nicht nur die gerade benutzten -- ein Bild, das
erst beim Auswaehlen geladen wuerde, fehlte im Export.
Der Stand steht auf v6. Ein Stand ohne Deck stammt aus der Zeit fester fuenf
Slides und behaelt die Vorlagen.
Dabei abgesichert: Der Tastaturschutz rief e.target.matches auf. Ist nichts
fokussiert, ist das Ziel das Dokument und hat kein matches. Seit der
Neuaufbau den zuletzt fokussierten Knopf entfernt, ist das erreichbar.
Geprueft mit 17 Faellen ueber das DevTools-Protokoll: anlegen, tippen,
Screenshot tauschen, kopieren, schieben, loeschen, Neustart. Dazu ein Export
einer selbst angelegten Slide und der volle Durchlauf der bestehenden elf.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Beide Projekte werden nicht mehr gebraucht. Weg sind post1-alt.html,
index.html und state/post2.json, dazu der lokale state/post1-alt.json.
Mitgezogen, damit nichts ins Leere zeigt: die Projektumschaltung im
Bedienfeld samt ihrer CSS-Regeln, die Projekttabelle und die Liste der
Stand-Dateien in der README, die Startzeile und der Aufbau in rules.md.
Achtung: Ohne index.html liefert http://127.0.0.1:4321/ nur noch die
Verzeichnisliste. Der Einstieg ist /post1.html.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Der Export staucht nicht mehr auf 1080 x 1350. Die Slide entstand bei
Renderqualitaet k longst in 1080k x 1350k und wurde unmittelbar vor dem
Speichern wieder heruntergerechnet -- eine Vorlage mit 2390 px kam so mit
916 px an, obwohl sie bereits in 2748 px gerendert vorlag. Gespeichert wird
jetzt, was gerendert wurde; bei 3x sind das 3240 x 4050. Die Statuszeile
nennt die Groesse, und wer exakt 1080 will, stellt die Stufe auf 1x.
Die Kontrolle vor dem Speichern hat ihren Zweck verfehlt. Sie prueft, ob
jede Bildflaeche im Ergebnis Pixel traegt, sah dafuer aber das
achsenparallele Umrechteck an. Die Szenen-Displays stehen per matrix3d
schraeg im Raum, in ihrem Umrechteck liegen Rasterlinien, Hintergrund und
das Nachbargeraet -- deren Kontrast reichte immer, um durchzukommen. Eine
Slide mit voellig leerem Display wurde deshalb stumm gespeichert.
Jetzt werden die echten vier Ecken ausgemessen (ueber 1-px-Marken, Chrome
kennt getBoxQuads nicht) und nur die Ueberlappung von Bild und Rahmen
abgetastet. Beides einzeln fuehrt in die Irre: das Szenen-Display ist
groesser als der sichtbare Ausschnitt, das Feature-Mockup umgekehrt. Die
Geraeterahmen stehen neu mit auf der Liste, geprueft ueber den aus der
Vorlage geeichten Dunkelanteil. Nachgestellt mit opacity 0: vorher still
gespeichert, jetzt Abbruch mit Nennung der Flaeche. 11 von 11 echten
Ausfuhren laufen ohne Fehlalarm und ohne Wiederholung durch.
Die Szenen-Screenshots fuellen ihr Display randlos. Sie lagen als kleinere
Rechtecke an handgemessenen Prozentwerten darin, die nicht aus der
Glasflaeche des Mockups stammten: 656 px blieben rechts frei, 470 px unten,
und die Werkzeugleiste des Boards verschwand oben trotzdem unter der
Blende. Weil Prozentwerte in translate() an der Bildkante haengen, loesten
Vorschau und Export sie unterschiedlich auf -- die Luecke war im Export
groesser als im Canvas. object-fit uebernimmt das jetzt, es bleibt kein
Versatz, der auseinanderlaufen koennte.
Dazu behoben: post1-alt.html konnte vier Laptop-Layouts und Slide 2
ueberhaupt nicht exportieren. workflow.png haengt an keiner Slide mehr und
fehlte in der Ladeliste, im Bild stand src="undefined".
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Die Aufnahmen lagen auf dem Design-Rechteck des Smart-Objekts. Davon ist aber
nicht alles zu sehen: oben verdeckt die Blende des Deckels samt
Kameraaussparung, unten die Tastaturschale, rechts das davorstehende iPad.
Aus den Ecken geschaetzt kam oben 3,8 % heraus, tatsaechlich sind es 6,9 %,
und die Kopfzeile der Anwendung verschwand.
Jetzt wird gemessen: die Deckung der Screen-Ebene per Umkehr-Homographie in
den Design-Raum zurueckgerechnet, darin das groesste achsenparallele Rechteck
gesucht. Es misst 2726 x 1682 bei (74, 154), also 78,9 Prozent der Breite. Die
Aufnahme liegt darin zentriert eingepasst, nicht formatfuellend: nichts wird
abgeschnitten und nichts gezoomt.
Die freie Flaeche traegt den aus den Bildecken gemessenen Hintergrundton der
jeweiligen Aufnahme. Fuenf Stufen Unterschied reichen, damit sie sich als Rand
abzeichnet.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Drei Aenderungen am Generator, im selben Bereich der Datei verzahnt.
Notizzettel: die StickyNote aus dem Pitch-Projekt als HTML nachgebaut,
Variante purple, Farbwerte uebernommen und die Masse auf das 1080er Blatt
hochskaliert. Liegt auf der Workflow-Slide und ist wie jedes andere Element
verschiebbar.
Schatten: raus, ueberall. Kein box-shadow, kein drop-shadow. Tiefe entsteht
ueber Ueberlappung, Rahmenfarbe und Versatz. Der Umschalter faellt mit weg,
er haette nichts mehr zu schalten gehabt. Die Blaetter im Stapel-Rahmen
bekommen eine Haarlinie, sonst laege auf der hellen Variante Weiss auf Weiss.
Szenen-Mockup: Macbook Air und iPad Pro in Perspektive, aus einem Pixeden-PSD
freigestellt. Beide Displays sind ausgeknockt, die Screenshots liegen dahinter
und werden per matrix3d in die Flaechen projiziert. Die Eckpunkte sind
gemessen, nicht geschaetzt: beim Macbook aus dem transform_box des
Smart-Objekts, beim iPad ueber Ausgleichsgeraden auf den vier Glaskanten, weil
das Smart-Object dort zu hoch sitzt. Der Spalt zur weggefallenen Glasplatte
wird spaltenweise aus den Nachbarfarben interpoliert, damit am Displayrand
Schwarz und am Gehaeuse Metallic steht.
Das PSD selbst bleibt draussen: Pixeden erlaubt die Nutzung, nicht die
Weitergabe.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Autarke Werkbank für Social-Grafiken: Slides als HTML, Bearbeitung im Canvas,
Export als Instagram-taugliche PNGs.
- Assets nach brand/partner/mockups/screens sortiert, Karteileichen entfernt
- G-Marke als eigene Datei statt nur als Polygon im Code
- Partner-Logos und Geerkens-Logo ergänzt
- Keine externen Referenzen: Schrift, Bibliotheken und Bilder liegen lokal
dejanandClaude Opus 5
raffael