- Format-Schalter 4:5 / 1:1 in Post 9, Stand auf 1:1 (Meta nimmt ein
Carousel mit Video als Anzeige nur quadratisch), Video in 1:1
- animation.mjs baut das Format der Seite, Datei mit -1x1
- Variante 2/3: Kundengeschichte nach dem weclapp-Karussell, hell und dunkel
- Variante 4/5: Zahlen-Karussell nach HERO Insights mit KfW- und
Bitkom-Zahlen, Noah als Teaser, hell und dunkel
- post9-varianten.html zeigt alle Varianten untereinander
- Menüs und Übersicht um die Varianten ergänzt, Regel zu 1:1 in rules.md
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Kopf, Reiter, Fragekarten, offene Frage mit Streifen, "Nur anzeigen,
wenn", Werkzeugleiste und "Felder zuweisen" aus screens/forms mit den
Komponenten aus komponenten.md. Raus, weil es sie im Produkt nicht gibt:
die Pipeline am Lead, die Fusszeile mit "Zuletzt gespeichert" und
"Bereit zum Veroeffentlichen", die alten Feldtypen-Namen. Slide-Texte
angepasst, Video neu exportiert.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
rules.md §0 macht es zur Pflicht, komponenten.md ist das Nachschlagewerk
mit Tokens, Komponenten, Bausteinen und Vorgehen, CLAUDE.md weist jeden
Agenten darauf hin.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Jede Zeichnung bildet jetzt einen echten Screen nach: Kampagnenbericht,
Zielgruppe bearbeiten, Vorlagen, Bereit zum Versand, Gestaltung. Schrift
Instrument Sans, Icons Lucide, Masse und Farben aus ui/theme.css und den
Subframe-Komponenten. Raus, weil es sie im Produkt nicht gibt: Reiter,
Haekchen-Chips, Produktkacheln. Instrument Sans wird im PNG-Export
eingebettet. Video neu exportiert.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Teil 1 dunkel mit G-Waben wie die Kapitel-Slides, die drei danach hell mit
dem zweiten Wabenmuster. Die Zeichen sitzen als grosse gelbe Wabe im Muster,
je ein Wort im Titel in Gelb. Die Live-Marke entfaellt, der Titel sagt es
schon. Noah spricht bei Teil 1 und 2, David bei 3 und 4. Video neu exportiert.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2560 x 1440, Botschaft in der Mitte fuer alle Geraete, G-Waben drumherum.
Rendern mit kanaele/rendern.sh, die Bereiche je Geraet mit "zonen".
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Bewegtbild der vier Teile mit Noah und David, dazu die Slide zum Anmelden.
Termin, Uhrzeit und Dauer sind Platzhalter in WEBINAR. Die Uebersicht kennt
Post 8 und Post 9.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
ae/oe/ue gilt hinter einem Vokal nicht mehr als fehlender Umlaut, Mailadressen
und Domains sind ausgenommen, Geviertstriche werden gemeldet. Das Menue nennt
Post 8 und Post 9.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Ist der Port belegt, bricht der Server mit einem Hinweis ab, statt
auszuweichen. So stimmt der Link aus dem Marketing-Dashboard immer.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Bei Sekunde 2 fuhr "Frage hinzufuegen" runter, neun Pixel wieder hoch
und ab t = 0,40 erneut runter -- eine Richtungsumkehr in vier Zehnteln.
Gemessen ueber alle 180 Bilder:
Bild 43 - 60 681 -> 782 runter
Bild 60 - 72 782 -> 773 hoch
Bild 73 - 80 776 -> 800 runter
Schuld war rueck, also back.out(1,7): die Kurve ueberschwingt auf 1,099
und pendelt zurueck. Das passt zu etwas, das aufspringt. Der Knopf
springt aber nicht, er wird von der neuen Frage nach unten geschoben,
und Geschobenes federt nicht zurueck. Jetzt raus, power2.out: faengt
genauso schnell an -- der Klick soll sofort etwas ausloesen -- nur ohne
Rueckweg.
Nur die Kurve zu tauschen haette eine zweite Unsauberkeit hinterlassen:
das Aufklappen laeuft aus, der Knopf steht ein Zehntel still, dann setzt
er ruckartig wieder an. Der Platz fuer die Optionen waechst deshalb ab
0,36 statt ab 0,40 und geht in die auslaufende Bewegung ueber. Die
langsamste Stelle sind jetzt 0,9 px je Bild statt null; die Optionen
selbst erscheinen unveraendert ab 0,40.
Ueber alle 180 Bilder kein Schritt mehr rueckwaerts. Bewegtbild neu
gebaut.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Sie ist das erste Element im Carousel, also muss sie die ganze Sache
tragen und nicht eine Einzelheit daraus. "Das Formular baust du selbst"
beschrieb die Bedienung -- das sieht man in der Animation ohnehin.
Fliesstext faellt weg, wie auf jeder Startslide. Damit sitzt die
Ueberschrift hoeher, und die Karte muss mit: visBottom 268 statt 168
macht aus 218 px Luft dazwischen 118, den Wert aller anderen Slides.
Die drei Pixel Hoehenversatz sind kein Wert aus der Vorlage, sondern
stecken bei Post 2 bis 6 im Projektstand als headline.dy -- gesetzt von
applyEdits, und da geht das Bewegtbild nicht durch. Gemessen sassen die
Startslides bei y 95, diese bei 92. Jetzt beide bei 95: im Stand fuer
die Slides, im animSlideBauen fuer die Animation. Dort direkt als
transform, weil die Regel hinter --ey an [data-edit] haengt und das
Attribut tagEditable() setzt -- noch eine Stelle, die das Bewegtbild
auslaesst.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Aus dem Canvas: die Zeichnungen aller drei Slides nach oben gezogen
(dy -28, -126, -162). Sie schliessen damit dichter an den Fliesstext an,
und der Raum steht unten.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
DIE FUSSZEILE STAND AUS DER KARTE HERAUS. "Bereit zum Veroeffentlichen"
endete bei x 797, die Karte bei 788 -- neun Einheiten daneben. Ursache
war ein fester Versatz von 138, gegriffen statt gerechnet. Jetzt wird
die Textbreite gemessen und das Ende an die innere Kante gehaengt, egal
wie lang der Satz ist.
Dazu der Abstand: 24 oben und 22 unten, die Zeile klebte am Rand und die
Karte sah unten beschnitten aus. Jetzt 28 zu 28.
DER KOPF WAR ZU ENG. Die Trennlinie unter den Reitern liegt bei 92, der
Inhalt begann bei 96 -- vier Einheiten, und die erste Frage klebte an der
Linie. Der Kopf steht jetzt als FB_KOPF auf 120, also 28 Einheiten Luft,
derselbe Wert wie unten. Die feste Kastenhoehe des Bewegtbilds rechnet
mit derselben Konstante statt mit einer wiederholten Zahl.
Bewegtbild neu gebaut.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Beim Anlegen aus post6.html sind title und PROJECT geaendert worden, die
sichtbare <h1> im Bedienfeld nicht. Sie ist die dritte Stelle, an der der
Projektname steht -- und die einzige, die man beim Arbeiten dauernd
ansieht.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Er lag auf Mi 02.09., also zwei Tage nach dem Team-Chat. Die beiden
Termine 02.09. und 04.09. fallen aus, alles ab dort rueckt zwei Slots:
Mo 07.09. Form Builder (war Mi 02.09.)
Mi 09.09. Zettelwirtschaft
...
Mi 23.09. Tempo und Uebersicht, das erste Reel (war Fr 18.09.)
FERTIG steht auf 6: mit dem Form Builder liegen sechs Beitraege gebaut
im Generator. Die Zahlwort-Tabelle ging nur bis fuenf und waere beim
naechsten Beitrag mit einem KeyError abgebrochen -- sie reicht jetzt bis
acht.
PDF neu gebaut.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Anders als die Beitraege davor: das Bewegtbild ist das ERSTE Element im
Carousel und kein Anhang am Ende. Ein Form Builder ist ein Werkzeug, das
man bedient -- was er kann, sieht man am Bauen und nicht an einem
Standbild davon. Die drei Slides erklaeren danach, was das Gebaute
leistet, und tragen deshalb alle Ueberschrift und Fliesstext.
animForm Das Formular baust du selbst. 6 s, der Editor beim Bauen
1 Frag genau das, was du wissen musst. die fuenf Fragen mit ihren Typen
2 Fragen, die nur kommen, wenn sie
noetig sind. das bedingte Feld
3 Aus der Antwort wird ein Lead. das Hinweisfeld mit Pipeline
Zwei Folgen davon, die man wissen muss: die Kachel im Profilraster ist
jetzt das erste Bild der Animation und nicht mehr eine eigens dafuer
gebaute Slide -- Bild 0 zeigt deshalb schon ein Formular mit zwei Fragen
und keine leere Flaeche. Und die Ueberschrift des Bewegtbilds ist die
Ueberschrift des Beitrags.
QUELLE
S02EinfacherFragenEditor.tsx aus dem Pitch-Paket, derselbe Bildschirm wie
assets/screens/form-builder.png. Die fuenf Fragen, ihre Feldtypen, die
Marke "Bedingt sichtbar" und der Satz im Hinweisfeld stehen woertlich
dort. Die Farben des Hinweisfelds sind ueber die Token-Kette aufgeloest
(surface-feedback-subtle-information -> feedback-information-100 ->
ocean-100 = #E1F4FD), nicht aus dem Bild geschaetzt. Elf zusaetzliche
Zeichen aus demselben Phosphor-bold-Satz.
ABWEICHUNGEN, ALLE DOKUMENTIERT
Die Quelle schreibt {general ? "Website-Anfragen" : "Vertrieb SHK"} --
hier steht Vertrieb SHK, weil der Beitrag durchgehend das Gewerk zeigt.
"Sanitaer" und "Klima / Lueftung" stehen mit Umlaut. "Deaktivieren" ist
weg, weil ein Ausschalter nichts zur Aussage beitraegt und dem
Pipeline-Satz den Platz nahm.
DREI SACHEN, DIE ERST AM GERENDERTEN BLATT AUFFIELEN
Die Karte wuchs und schrumpfte zugleich: der Kasten wurde mit dem Inhalt
hoeher, und bei fester Breite skaliert die Zeichnung dabei kleiner. Die
Animation hat jetzt eine feste Kastenhoehe.
Der Pipeline-Satz lief unter den Knopf und endete bei "Vertrieb S".
Jetzt zweizeilig statt gekuerzt -- der Pipelinename ist die halbe
Aussage des Felds.
Eine Ueberschrift mass 936 px und lief 45 px ueber die Schutzzone. Am
gerenderten Bild nachgemessen, nicht geschaetzt; die kuerzere Fassung
liegt bei 846.
Erreichbar ueber die Toolbar in allen Projekten und in uebersicht.html.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Auf einer Slide stand "Sanitaer" und "Klima / Lueftung". Beides kam
woertlich aus dem Klickdummy, wo es schludrig eingetippt ist, und beides
las sich im fertigen Beitrag wie ein Fehler -- weil es einer ist.
Gefunden hat es niemand beim Bauen, sondern jemand, der auf den fertigen
Post geschaut hat.
Ein reines Muster genuegt als Pruefung nicht: Deutsch schreibt "neue",
"Dauer" und "Michael" voellig zu Recht mit ae/oe/ue. Nachgezaehlt ueber
den gezeichneten Text aller sieben Projekte sind es aber nur acht solche
Woerter, alle davon richtig oder gewollt (die Kanal-Handles). Also
Muster plus kurze Ausnahmeliste -- null Fehlalarme, "Sanitaer" faellt
trotzdem auf.
Bei ss ist es umgekehrt: 15 Treffer im gezeichneten Text, alle richtig
(dass, Schluss, Netzanschluss). Deshalb dort eine Liste der wenigen
Woerter, die ein scharfes s brauchen, statt eines Musters.
Geprueft wird an zwei Stellen, weil es zwei Wege zum fertigen Bild gibt:
renderSlide() bricht ab, bevor ein PNG entsteht
animation.mjs an 24 Stellen ueber den Ablauf
Der zweite Punkt war ein eigener Fehler: der erste Anlauf prueft nur den
Anfangszustand und fand nichts, weil die falschen Woerter dort erst ab
t = 0,4 erscheinen. Der Text einer Animation aendert sich mit der Zeit,
die Pruefung muss es auch.
Beide Tore sind mit absichtlich wieder eingebautem "Sanitaer" scheitern
gesehen worden. Eine Pruefung, die man nie hat scheitern sehen, ist
keine -- der erste Test lief durch, weil mein Testskript htmlToImage
direkt aufruft und renderSlide dabei umgeht.
Regel und Begruendung stehen in rules.md 4, die Falle in 8.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Geplant war Mi 26.08. Der Beitrag lag noch beim Feinschliff, damit sind
zwei Termine ausgefallen -- 26.08. und 28.08. Beide stehen jetzt in
AUSGELASSEN, und alles ab dort rueckt zwei Slots nach hinten:
Mo 31.08. Team-Chat (war Mi 26.08.)
Mi 02.09. Form Builder (war Fr 28.08.)
...
Fr 18.09. Tempo und Uebersicht, das erste Reel (war Mo 14.09.)
Die vier Beitraege davor behalten ihr Datum, sie sind erschienen. Das
ist dieselbe Regel wie beim Ausfall am 24.08.: den Start zu verschieben
haette rueckwirkend andere Termine behauptet.
FERTIG steht auf 5. Mit dem Team-Chat sind fuenf Beitraege gesetzt und
gebaut; die Tabelle hebt sie hervor, und der Satz darueber nennt die
Zahl aus derselben Konstante.
Der Kommentar am Reel-Termin nennt keine Zahl mehr. Er stand einmal auf
"09.09." und war schon damals falsch, dann auf "11.09." und war es nach
der naechsten Verschiebung wieder. Ein Datum, das sich aus AUSGELASSEN
ergibt, gehoert nirgendwo als Zahl hingeschrieben -- auch nicht in einen
Kommentar. Im Fliesstext steht es ohnehin als {REEL} und ist auf 18.09.
mitgewandert.
PDF neu gebaut.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Vier Sachen an derselben Slide.
BREITE AUS DEM INHALT. Sie stand als feste 470 in der Zeichenfunktion,
gemessen fuer Beschriftungen mit "senden", und liess ein Drittel
Leerraum rechts. Sie kommt jetzt aus dem laengsten Eintrag. Dabei
kippte die Zeichnung von quer auf hochkant, und ein hochkantes Bild
richtet sich nach der Hoehe: bei den alten 940 px wurde der Kasten
1093 hoch und lief in die Ueberschrift. Jetzt 680.
Gerechnet ist die Breite am sichtbaren Blatt und nicht am Kasten -- der
ist um den Stapelrand groesser als das, was man sieht, und mit seiner
Oberkante gerechnet stand die Zeichnung noch einmal 60 px zu hoch.
OBEN OHNE VERB. Wer das Menue ueber das Pluszeichen geoeffnet hat,
weiss, dass er etwas schickt; "Dokument senden", "Fotos und Videos
senden", "Audio senden", "Kontakt teilen" schreiben es viermal daneben.
Jetzt stehen dort die Dinge: Dokumente, Medien, Audio, Kontakt. Unten
bleibt das Verb, weil es etwas hinzufuegt -- "Termin" allein waere ein
Anhang, "Termin erstellen" ist eine Handlung. Das ist eine Abweichung
vom Composer und steht als solche in POST-6.md 4.
DIE EINGABEZEILE IST ZURUECK. Sie war weggenommen worden mit der
Begruendung, die Slide zeige ja, was man anhaengen kann. Das stimmte
nur, solange man wusste, worauf man schaut: ohne das Feld ist die Karte
eine Liste im Nichts. Das Pluszeichen traegt jetzt die gruene Marke wie
ein gedruecktes Element, der Zeiger steht darauf, und das Menue klappt
nach oben auf -- so wie im Werkzeug.
TEILEN STATT TELEFONHOERER. Ein Hoerer sagt "anrufen"; bei "Kontakt"
wird eine Karte weitergegeben. ShareNetwork aus demselben
Phosphor-bold-Satz, entnommen aus @phosphor-icons/react im
Website-Repo statt abgemalt. "phone" stand danach nirgends mehr und ist
aus der Tabelle heraus: 19 Zeichen, jedes in Gebrauch.
Das Bewegtbild ist nicht betroffen, es nutzt das Nachrichtenmenue.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Vier Unsplash-Aufnahmen unter assets/eigene, die avatarKreis() nimmt,
sobald sie da sind -- vorher stand dort das Kuerzel. Nur Menschen
bekommen eins, Projektkanal und Gruppe behalten ihr Sinnbild.
portrait-sk Sandra Koch unsplash.com/photos/SJvDxw0azqw
portrait-mb Maike Berger unsplash.com/photos/ZAo0cKz_IKM
portrait-tw Tobias Wagner unsplash.com/photos/TTdJV-K1IUg
portrait-ms Michael Schuster unsplash.com/photos/7YVZYZeITc8
Ausgewaehlt nicht nach Gesicht, sondern nach Unterscheidbarkeit im Kreis
von 42 px: dort zaehlt der Gesamtwert und die Silhouette. Die vier
decken hell, mittelhell, dunkel und mittel ab, dazu kurze Locken,
schulterlang, Schiebermuetze mit Bart, kurz und glatt.
WAS DARAN OFFEN BLEIBT, UND ZWAR WISSENTLICH
Die Unsplash-Lizenz deckt das Urheberrecht des Fotografen, kein Model
Release. Ein fremdes Gesicht als "Sandra Koch, Projektleitung" auf dem
Firmenkanal beruehrt 22 KUG und die DSGVO. Ein Zwischenstand wich
deshalb auf erzeugte Gesichter aus (StyleGAN2) und ist zugunsten echter
Aufnahmen zurueckgenommen worden. Rechtssicher waere nur
model-released Stock. Steht in POST-6.md 4.
Geprueft ist jede der vier Seiten einzeln: Unsplash-Lizenz vermerkt,
keine KI-Kennzeichnung, benannter Fotograf, Datum zwischen 2017 und
2023.
DREI FALLEN
Von 56 Suchtreffern waren 32 Profilbilder der Fotografen, nicht deren
Aufnahmen -- ein figure img greift das Avatarbild des Urhebers mit ab,
und die sehen aus wie Portraits, weil sie welche sind. Zwei davon
waren schon eingesetzt, bevor es beim Aufschreiben der Herkunft
auffiel. Erkennbar an photo- gegen profile- in der URL.
Zwei gegenlaeufige Teilstuecke in einem Pfad loeschen ihren Ueberlapp
weg, und ein Rechteck in Zeichnungsgroesse trifft nicht, was darueber
hinaussteht. Beides gehoert zum Band davor, beides fiel erst hier auf.
Zuschnitt braucht keinen Fuellton: ein Business-Portrait hat Luft ueber
dem Kopf. Skaliert mit lanczos plus leichtem unsharp, 320 x 320 JPEG --
was beim Verkleinern an Schaerfe verlorengeht, holt keine
Renderqualitaet zurueck.
Bewegtbild neu gebaut, die Avatare stehen auch darin.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Der Knick sass 70 Einheiten vor der Plattenkante und lag damit mitten
auf dem Bildschirm -- das sah aus wie ein Spruchband, das jemand
daraufgeklebt und in der Mitte geknickt hat. Ein Band knickt nicht um
nichts: der Knick gehoert an die Kante, weil dort etwas ist, worum es
sich legen kann.
Jetzt knickt es genau dort um, wo die Platte aufhoert, laeuft dahinter
weiter und kommt an ihrer Kante wieder hervor: tiefer, weil es
umgeschlagen ist, niedriger, weil es wegfuehrt, flacher getont, weil man
von dort seine Unterseite sieht.
Die Stelle wird nicht gerechnet. Beide Stuecke reichen absichtlich weit
in die Platte hinein, und zwei Masken schneiden sie an deren Kante ab --
bandSilhouette die vordere Flaeche innen, bandAussen die Stuecke
draussen. Der Knick sitzt damit immer auf der Kante, auch wenn sich die
Platten einmal verschieben.
Zwei Fehler steckten in der Naht dazwischen, beide erst im erzeugten
SVG und beim Auszaehlen der Pixel sichtbar:
Beide Masken kamen aus derselben Kontur, aber die innere trug einen
schwarzen Strich darauf und war damit um eine halbe Haarlinie kleiner
als die aeussere gross war. In der Luecke war das Band von beiden
Seiten halb durchsichtig -- ein blasser Streifen genau im Falz. Die
Falzkante kommt jetzt als eigener Strich darueber.
Die Abdunklung lag auf einem Rechteck 0 0 W H. Die Stuecke stehen
ausserhalb von 0..W und wurden nie getroffen, waren also heller als
das Band daneben -- verkehrt herum fuer etwas, das weiter hinten
liegt. Nachgemessen quer ueber die Naht: Stueck 125, Band 132.
Der Lichtabfall ist auf die Haelfte zurueckgenommen (0,80 -> 0,42):
zusammen mit dem dunkleren Stueck wurde daraus sonst ein brauner
Schatten statt eines Bandes.
Ohne die zwei Festlichkeiten des klassischen Spruchbands: keine Zacken,
kein Bogen. Ein gewoelbtes Band ueber einer flachen Oberflaeche sieht
nach Urkunde aus.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Auf allem stand no-store -- im Server und noch einmal in preloadAssets().
Der Browser durfte also nichts behalten, und jeder Reload lud die vollen
Assets neu: 3 MB Screenshots, 3,3 MB Mockups, Schriften, Bibliotheken.
Am schlimmsten in uebersicht.html. Die laedt die sechs Projekte als
iframes, und weil keiner etwas behalten durfte, holte sich jeder iframe
dieselben Dateien noch einmal: 38,1 MB in 435 Anfragen.
uebersicht.html erster Aufruf 38,1 MB -> 2,2 MB
uebersicht.html Reload 32,8 MB -> 1,9 MB
post6.html Reload 5,4 MB -> 0,3 MB
Die Absicht hinter no-store war richtig: ein Bild, das unter demselben
Namen ausgetauscht wird, muss sofort ankommen. no-cache leistet das
billiger -- der Browser behaelt seine Kopie, fragt aber vor jeder
Benutzung nach. Nachgeprueft: unveraendert antwortet der Server mit 304
und 0 Bytes, nach einem touch mit 200 und der vollen Datei.
Seite, Stand und Auskuenfte (/bilder, /state) bleiben bei no-store. Die
sind klein und duerfen nie aus einer Kopie kommen.
Die eine Zeile stand in allen sieben Projektdateien.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Die Website macht ihre Bewegungen mit gsap 3.14.2. Uebernommen sind die
Kurven, nicht das Paket: was GSAP darueber hinaus kann -- Zeitleisten,
ScrollTrigger, MotionPath -- setzt voraus, dass etwas laeuft. Hier
laeuft nichts, animChat(i, t) bekommt seinen Fortschritt von aussen und
ist damit selbst schon die Zeitleiste. Ein paused timeline mit
.progress(t) waere dieselbe Konstruktion mit 70 KB darunter, und ein
Easing ist eine Zeile.
Zwei der Kurven waren ohnehin GSAPs: daempfen ist Wort fuer Wort
power2.inOut, rueck ist back.out(1,70158). Die Namen stehen jetzt
daneben, dazu kommen raus (power2.out) und knall (expo.out).
Der Zeiger fuhr auf power2.inOut, also langsam an, in der Mitte
schnell, wieder abbremsend -- die Bewegung eines Schlittens. Eine
Hand ist sofort schnell und wird zum Ziel hin langsam.
Und er fuhr auf der Geraden. Jetzt auf einer quadratischen Bezier,
Stuetzpunkt 13 % der Strecke quer nach aussen, vom Verlauf weg. Rund
27 px Ausbuchtung auf 410 px Weg: es faellt nicht auf, das ist der
Punkt.
Der Klickring geht auf zwei Kurven, Radius auf expo.out und die
Deckung linear hinterher. Beides auf derselben sah aus wie eine
Blase, die sich aufblaest.
Der Anlauf ist von 0,6 s auf 0,18 s geschrumpft. Am Ende steht das
Bild eine halbe Sekunde still, damit man das Ergebnis liest; lief
vorn nochmal eine halbe, waren das ueber den Schleifenstoss hinweg
1,2 von 6 Sekunden Stillstand am Stueck.
MP4 neu gebaut, Werte unveraendert: H.264, 1080x1350, 30 fps, 6,0 s,
stumme AAC-Spur. Geprueft ist das an Kontaktabzuegen ueber die 180
Bilder, nicht am Lauf.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Vorher lief es ueber die ganze Zeichnung hinaus und endete an der
Bildkante, quer zur eigenen Laufrichtung abgeschnitten -- das ist das
Zeichen fuer ein Ende, so liest sich ein Aufkleber. Jetzt bricht es an
einer senkrechten Plattenkante ab, waehrend es mit 13 Grad ankommt, und
das ist keines: dort laeuft es hinter die Platte, um den Stapel herum.
Beschnitten wird an der Silhouette beider Ausschnitte. Damit macht es
die Website nach, die ihr Band am Rand des Telefons abschneidet ("so
the ends cut off like real tape"), und der Gegensatz "absperren oder
beschneiden", den der Kommentar hier behauptete, faellt weg: die
Silhouette beider Platten ist die ganze Sache.
Drei Dinge tragen es, keines verbiegt die Form:
die Schnittkante ist die Plattenkante und steht schraeg zum Band
sie ist weicher als eine Linie und haerter als die Platten (1,1)
die letzten 56 Einheiten verlieren Licht, mit dem Hoehepunkt als
Plateau davor -- auf der Kante selbst blendet die Maske schon aus
Der Verlauf steht dafuer in den Koordinaten der Zeichnung statt in
denen des gedrehten Bandes: er soll parallel zu der Kante stehen, an
der er endet.
Mit weg sind zwei Kommentarbloecke, von denen einer einen Stand
beschrieb, der einen Commit vorher zurueckgenommen worden war, und mit
ihnen WEB.bandKnick und WEB.bandSpitze.
Geprueft ueber beide Wege, Browser-Screenshot und html-to-image: die
Maske ueberlebt den Export, das Bild ist identisch.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U7RZ6ZpLD8Dp84Rtt4KHfv
Zwei Anlaeufe haben die Form verbogen: erst die Enden zur Spitze verjuengt,
dann um eine Knickstelle gekippt. Das erste sah aus wie eine Schleife, das
zweite wie eine Welle. Ein Absperrband ist flach und straff -- was ihm gefehlt
hat, war Woelbung, nicht ein Knick.
Jetzt quer ueber die Hoehe ein Verlauf von #F8C64A ueber #F1B729 nach #D89F1B,
knapp unter der Oberkante ein Glanzlicht, und zu beiden Enden hin 20 % Abdunkeln.
Die untere Laengskante ist einen Pixel dicker als die obere, weil sie im
Schatten der Woelbung liegt. Die Form bleibt das Rechteck, das sie auf der
Website ist.
Helm und Schrift stehen weiterhin einmal und mittig.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Der Code war im vorigen Commit, die Beschreibung ist ins Leere gelaufen, weil
ich sie an einen Absatz haengen wollte, den es so nicht gab.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Es war ein Rechteck mit gleichmaessig durchlaufender Schrift und las sich damit
als Aufkleber auf der Flaeche, nicht als Band darueber.
Jetzt laufen die Aussenkanten zur Mitte zusammen (10 % der Bandhoehe je Kante),
die Knickflaechen sind dunkler (#D6A11E statt #F1B729), an der Knickstelle
steht eine Kante, und die dunklen Laengskanten folgen dem Knick mit statt
darueber zu schweben.
Ein erster Anlauf knickte bei 21 % der Laenge und mit 17 % Verjuengung -- das
sah aus wie eine Schleife. Bei 12 % und 10 % bleibt die Mitte flach und nur die
Enden fuehren weg.
Helm und Schrift stehen einmal, mittig auf der geraden Flaeche. Wiederholt und
am linken Rand beginnend passte der Satz zu einem endlosen Band; auf einem,
dessen Enden sichtbar wegknicken, gehoert er in die Mitte.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
avatarKreis() zeigt ein Foto, sobald eines unter
assets/eigene/portrait-<kuerzel>.<endung> liegt -- portrait-sk, portrait-mb,
portrait-tw, portrait-ms -- rund beschnitten, mit demselben Rand wie der
Kuerzelkreis. Ist keines da, steht wie bisher das Kuerzel im Kreis. Hochladen
geht ueber "Eigene Bilder" in der Seite; preloadAssets() holt alles aus
assets/eigene ohnehin mit, der Export bekommt sie damit als Daten-URL.
Mit einem Testbild durchgefahren und wieder entfernt.
Keine Fotos im Repo, und zwar mit Absicht: das Pitch-Paket laedt seine
Portraits von Unsplash -- vier Aufnahmen echter, erkennbarer Menschen. Die
Lizenz deckt das Foto, nicht das Recht am eigenen Bild. Ein fremdes Gesicht als
"Sandra Koch, Projektleitung" in einen oeffentlichen Beitrag zu setzen, ist
etwas anderes als ein Klickdummy fuer einen Kundentermin.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Projektkanal, Gruppe und Direktnachricht tragen jetzt dieselbe Marke -- Flaeche
#DCFCE4, Rand #B7EDC6, Zeichen #148134 -- in der Liste wie im Verlauf. Vorher
trug der Kanal Lila, die Gruppe Grau und jede Person ihre eigene Farbe: vier
Familien in einer Liste, und keine sagte etwas, das die Zeile nicht schon sagt.
Die Kuerzel unterscheiden die Personen, dafuer braucht es keine vier Farbtoene.
Dazu die Symbolgewichtung zurueck auf bold, diesmal gemessen statt geschaetzt.
Der Tausch von Feather auf Phosphor hat keinen Hexwert angefasst, sah aber
trotzdem anders aus -- zu Recht: duennere Formen haben weniger voll gedeckte
Pixel, das liest sich blasser. Im Kanalsymbol, Ausschnitt 44 x 44:
Feather, wie es vorher war 59 volle Pixel, Deckung 180
Phosphor regular 23 volle Pixel, Deckung 151 (16 % zu blass)
Phosphor bold 62 volle Pixel, Deckung 192 ( 6 % darueber)
Ich hatte auf regular zurueckgestellt, weil es "im Menue leichter aussah".
Geschaetzt statt gemessen, und daneben. Wer eine optische Staerke beurteilt,
zaehlt Pixel.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Getauscht sind nur die Formen, kein einziger Farbwert -- Plakettengruen
#148134, Lila der Projekte #691CD4, Grau der Nadel #9C9CA3 sind vor und nach
dem Wechsel identisch. Was sich geaendert hatte, war die Strichstaerke: bold
sind gefuellte fette Formen, und die lesen sich neben demselben Text dunkler
als duenne Striche. Das sieht aus wie eine andere Farbe, ist aber keine.
regular trifft die optische Staerke, die Feather dort hatte.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Der Feather-Satz steckt in so ziemlich jeder Oberflaeche der letzten Jahre; man
erkennt ihn sofort wieder, und damit sieht eine Zeichnung aus wie jede andere.
Am deutlichsten war das am Gruppensymbol.
Phosphor ist dieselbe Familie von Strichsymbolen, nur mit eigener Handschrift:
runder, gleichmaessiger, andere Metaphern (UsersThree statt Users,
PaperPlaneRight statt Send, CaretDown statt ChevronDown). Es ist dasselbe
Paket, das die Website benutzt -- @phosphor-icons/react steht neben
lucide-react in ihrer package.json -- also keine dritte Handschrift im Haus.
Die 19 Pfade sind direkt aus dem installierten Paket gezogen und nicht
abgeschrieben: Gewichtung bold, Zeichenflaeche 256 x 256. Regular war neben dem
Text zu leicht. Anders als bei Feather sind es gefuellte Formen, ikon() faerbt
deshalb ueber fill statt ueber stroke; der Parameter fuer die Strichstaerke
faellt weg. FEATHER und feather() sind raus.
Der vorige Versuch tauschte nur das eine Gruppensymbol gegen zwei ueberlappende
Scheiben. Das war keine Antwort auf die Frage: die Frage war der Satz, nicht
das einzelne Zeichen.
Nebenbei: anhangKarte() und uiKachel() hatten einen Parameter namens "ikon" und
verdeckten damit die neue Funktion. Heisst jetzt "zeichen".
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Im vorigen Commit stand animation/post6-animChat.mp4 als geloescht drin. Der
Inhalt hat sich nicht geaendert -- die Chatliste steckt in chatZeile(), die
Animation zeichnet mit blase() -- also zurueckgeholt statt neu gebaut, Byte
fuer Byte der Stand aus efcb864.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Der Punkt fuer Ungelesenes war violett und leer. Violett ist im Produkt die
Farbe der Projekte -- das Kanalsymbol in derselben Zeile traegt sie schon, und
ein zweites violettes Zeichen daneben konkurriert damit, statt etwas anderes zu
sagen. Ein farbloser Punkt sagt ausserdem nur "da war was". Jetzt gruen, mit
der Zahl der ungelesenen Nachrichten darin, wie in jedem Messenger, den ein
Betrieb kennt. Die Uhrzeit derselben Zeile faerbt mit.
Die Zahlen (3, 2, 1) stehen nicht in der Quelle, dort ist unread ein
Wahrheitswert. Sie sind die einzigen erfundenen Werte im Post und stehen so in
POST-6.md.
Die Gruppe trug FeatherUsers -- das Zwei-Personen-Piktogramm, das in jeder
zweiten Oberflaeche steckt und danach aussieht. Jetzt zwei ueberlappende
Avatarscheiben, wie Teams und Linear sie an derselben Stelle zeigen; sie
sprechen dieselbe Sprache wie die Kuerzelkreise der Direktnachrichten daneben.
Ohne Buchstaben, weil die Mitglieder nirgends benannt sind.
Dabei gefunden: nach dem Vergroessern des Ausschnitts auf Slide 2 hatte ich
kollision.mjs mit Argument 1 laufen lassen -- das ist Slide 1. Auf Slide 2 ragte
das hinterste, gedrehte Blatt des Stapels fuenf Einheiten unter den Kasten.
stapelRand() rechnet den Ueberstand fuer die unskalierte Groesse, die
Skalierung vergroessert ihn mit. Der Kasten kommt jetzt aus dem skalierten
Stapel.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Es nahm dieselbe gedaempfte Kurve wie alles andere, ueber 0,8 Sekunden. Die
Deckung war darin nach fuenf Bildern fertig, waehrend die Skalierung noch eine
halbe Sekunde von 0,96 auf 1,00 weiterlief. Zu sehen war davon fast nichts, zu
spueren war es als Haenger -- und zwar genau in dem Moment, in dem geklickt
wird.
Jetzt rueck statt daempfen und ueber 0,34 statt 0,40 der Laufzeit: drei Bilder
Aufblenden, ein ganz leichtes Ueberschwingen, dann Ruhe. Die Deckung laeuft
dafuer mit Faktor 2,5 statt 4,5, sonst waeren es zwei Bilder und es knallte.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Aus dem Browser: Muster auf Slide 4 auf kraeftig, Zeichnung auf Slide 2 und 4
verschoben (vis dy -155 und -67).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
"Versende mehr als nur Textnachrichten: Dokumente, Fotos, Sprachnachrichten."
Drei Beispiele sagen, worum es geht; die vollstaendige Liste steht im Bild
daneben.
Zu spezifisch war an der alten Fassung nicht das Aufzaehlen, sondern das
Durchdeklinieren ("... Soll daraus etwas werden: Termin oder Aufgabe."). Ich
habe daraufhin zweimal in die andere Richtung uebersteuert und gar nichts mehr
genannt. Ein Fliesstext auf einer Feature-Slide erklaert das Feature: er
umschreibt es nicht und handelt es auch nicht in vier Woertern ab.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Was das Feature kann, in einem Satz. Die Eintraege stehen im Bild und muessen
daneben weder aufgezaehlt noch erklaert werden.
Davor drei Fassungen, die alle daneben lagen: erst die Aufzaehlung samt
Erklaerung ("Dokument, Fotos, Sprachnachricht, Kontakt. Soll daraus etwas
werden: Termin oder Aufgabe."), dann zwei Versuche, es allgemeiner zu fassen,
die sprachlich verstiegen waren. Ein Fliesstext auf einer Feature-Slide
erklaert das Feature, er formuliert es nicht aus.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Der Satz fuehrt die Ueberschrift "Nicht nur Text." weiter und benennt dabei
nichts Einzelnes. Vorher stand dort die Aufzaehlung der Menueeintraege, danach
kurz eine Fassung ueber die zwei Haelften des Menues -- beides sagte, was
drinsteht, statt zu sagen, worum es geht.
Gemessen mit fliess.mjs im Schnitt des Fliesstextes und nicht in dem der
Ueberschrift, weil das eine andere Groesse und ein anderes Gewicht ist: 780 px
von 830 verfuegbaren, also eine Zeile. Eine Zwischenfassung ("... alles, was
sonst noch zum Projekt gehoert.") kam auf 903 px und liess "gehoert." allein
in der zweiten Zeile stehen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Dort stand "Dokument, Fotos, Sprachnachricht, Kontakt. Soll daraus etwas
werden: Termin oder Aufgabe." Damit stand die Liste doppelt -- im Bild und
daneben -- und wer sie mitschreibt, legt sich zugleich darauf fest, was
drinsteht. Aendert sich das Menue, luegt der Satz.
Jetzt "Was du teilst und was du erstellst, bleibt am Projekt." Das sind die
zwei Haelften, die das Menue selbst zieht: ueber dem Trenner steht, was man
sendet und teilt, darunter, was man erstellt. Beide Verben stehen so in den
Eintraegen.
Der Textblock wird dadurch eine Zeile kuerzer, die Luft zur Zeichnung waechst
von 155 auf 199. Die Zeichnung bleibt, wie sie ist: sie steht mit 96 und 97 px
schon knapp an der Schutzzone und kann nicht mehr breiter werden.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Zusammengeschrieben und nicht mit Bindestrich, weil die Breite entscheidet:
"Chat-Nachrichten werden" misst 916 px und laeuft ueber die 896 der
Schutzzone, "Chatnachrichten werden" sind 879. Beide Schreibweisen sind
korrekt.
Ebenfalls verworfen: "Aus Chat-Nachrichten werden" (1063 px) und "Aus
Chatnachrichten werden" (1027 px) -- mit "Aus" passt die Zeile nicht mehr,
ohne bleibt der Satz vollstaendig.
Nach dem Einsetzen am gerenderten Blatt nachgezaehlt statt nur gerechnet:
zwei Zeilen zu 879 und 733 px, Gesamthoehe 158 = zweimal die Zeilenhoehe.
Kein Umbruch.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
"Aus Nachrichten werden / Aufgaben im Projekt." statt "Getippt, / und schon im
Projekt." -- die Aussage steht damit in der Ueberschrift statt nur im Bild.
Mit breite.mjs gemessen, bevor sie in die Datei kam: 860 px in der ersten und
733 in der zweiten Zeile bei 896 erlaubten. "Aufgaben im richtigen Projekt."
waere mit 1067 px uebergelaufen.
Die Beschreibung faellt weg. Die Ueberschrift sagt es, die Bewegung zeigt es,
und die Systemzeile im Bild bestaetigt es -- ein Satz darunter waere die dritte
Stelle fuer dieselbe Aussage.
Die gut hundert Pixel, die dadurch frei werden, gehen an die Zeichnung: visW
von 700 auf 776, mittig bei visLeft 152. Luft zum Text 118, derselbe Wert wie
auf Slide 1.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Beide waren ungefaehr gleich gross und lasen sich damit als gleichwertig. Sie
sind es nicht: der Ausschnitt traegt das Produkt, die Plaettchen tragen nur
die Ausgangslage.
Platz war da. Gemessen endet die linke Haelfte samt Leitung bei x = 344, der
Kasten begann erst bei 464 -- also 120 Einheiten ungenutzt. Der Kasten steht
jetzt bei 388 und ist um 1,28 skaliert; die Zeichnung wird dadurch nur
geringfuegig kleiner, das Verhaeltnis aendert sich um rund ein Drittel.
Die Projektnummer misst dadurch wieder 15,8 px statt 12,4. Sie ist der Beleg
fuer den Fliesstext ("Jeder Kanal haengt an seiner Projektnummer") und muss
lesbar bleiben.
visBottom von 120 auf 70: die Zeichnung sass sonst hoch, mit 204 px Leere
unten und nur 99 zum Text. Jetzt 154 und 149, also in einer Reihe mit Slide 3
und 4.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
animAbspielen rechnete performance.now() - ANIM_T[i] * dauer, damit die
Vorschau dort weiterlaeuft, wo der Regler steht. ANIM_T[i] ist aber undefined,
solange der Regler nie bewegt wurde: daraus wird NaN, der Fortschritt wird
NaN, und animT() liefert wegen seines eigenen "|| 0" brav wieder 0. Die
Vorschau stand still, ohne dass in der Konsole etwas auftauchte.
Bemerkt wurde es nicht, weil jede Pruefung vorher animSetzen() aufgerufen
hatte, um irgendetwas zu messen -- und damit genau den Zustand herstellte, in
dem es funktioniert. Ein Pruefskript, das den Anfangszustand anfasst, prueft
ihn nicht mehr.
animSetzen weist NaN jetzt zusaetzlich mit Number.isFinite ab, damit so ein
Wert gar nicht erst in den Stand kommt. In allen sechs Projekten nachgezogen.
Der Export war davon nicht betroffen; der Weg ueber POST /anim ist noch einmal
vom Knopf bis zur fertigen Datei durchgefahren worden.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Duenner half nicht, im Beitrag sah es aus wie vorher. Die Slide braucht ihn
auch nicht: sie besteht aus drei Nachrichten, die aufeinander folgen, und die
Aufgabenkarte ist das einzige Element mit einer gelben Marke ("Offen") -- der
Blick geht ohnehin dorthin. Ein Rahmen sagt nochmal, was die Anordnung schon
sagt, und kostet dafuer die Ruhe der Flaeche.
Mit ihm faellt letzterAnhang weg: blase() merkte sich die Lage der zuletzt
gezeichneten Anhangkarte, damit der Rahmen nicht aus einer zweiten Rechnung
kommt. Das liest jetzt niemand mehr.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Sechs Pixel waren plump -- er trug mehr Farbe als die Karte, auf die er zeigen
soll, und im Profilraster wurde daraus ein gelber Balken. Jetzt drei.
Vier Alternativen geprueft und gerendert: ganz weg, ein weicher Schein, eine
gelbe Kante links, ein duenner Ring. Jede zusaetzlich auf Feed-Breite (480 px)
heruntergerechnet, weil dort entschieden wird, ob eine Linie noch etwas sagt.
Duenner als drei haelt das nicht aus: bei 480 px sind drei Pixel noch gut
einer, darunter verschwindet die Linie.
Der duenne Ring gewinnt, weil er als einziger die Aufgabe des alten behaelt,
naemlich auf genau diese Karte zu zeigen. "Weg" nimmt der Slide ihren Zeiger,
Schein und Kante markieren einen Zustand statt hinzuweisen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
dejanandClaude Opus 5.5