Webklar/docs/superpowers/specs/2026-10-04-vorschau-chat.md

Kundenportal-Bühne: Live-Vorschau, Chat-Demo und weiches Zuklappen

Stand 2026-10-04. Wunsch des Inhabers (diktiert): Das Durchscrollen der Bühne von „Live-Vorschau“ bis „Als App“ soll schöner werden.

1. Die Testseite in der Live-Vorschau wirkt primitiv. Sie soll wie eine richtige Website aussehen, auch übergreifend im Chat.
2. Beim Herausscrollen aus „Funktionen“ soll das Zuklappen der Unterpunkte schöner sein.
3. Der Chat bekommt eine erklärende Animation: Nachrichten ploppen auf, es wird hineingezoomt, damit man sie lesen kann. Die Texte sollen spielerisch sein, nicht kalt.

1. Live-Vorschau

• Im MacBook steht jetzt die Beispiel-Website selbst (demos/baeckerei/BaeckereiSeite.tsx), nicht mehr die Portal-Aufnahme. Die Adresse in der Safari-Leiste ist baeckerei-sonnenschein.project.webklar.com, also dieselbe wie im Portal.
• Die Seite ist eine ganze Website: Leiste, Kopf, Startbereich („Frisch gebacken. Jeden Morgen.“), Band, Sortiment mit vier Karten, Backstube, Torten, Öffnungszeiten mit Stadtplan und Fuß. Die Schrift ist Instrument Serif (selbst gehostet, OFL) zusammen mit Instrument Sans.
• Die Fotos stammen von Wikimedia Commons und stehen unter CC0. Sie zeigen nur Backwaren, keine Menschen. Quellen stehen in docs/relaunch/assets/baeckerei/QUELLEN.md, das Skript ist scripts/relaunch-baeckerei-fotos.py.
• Scroll-Erlebnis: Die Station ist länger (--kp-l-vorschau: 110svh). Beim Scrollen durch die Station läuft die Website im MacBook einmal von oben nach unten durch. Die Bühne schreibt dafür --kp-v (0 bis 1); bewegt wird nur transform. Bei reduzierter Bewegung steht die Website oben, und die Station ist kurz.
• Das iPhone zeigt die Projektübersicht des Portals. Die Aufnahme ist neu und zeigt dieselbe Website im Vorschaukasten. Das gilt auch für die lange Aufnahme in „Als App“. Aufgenommen wurde mit der Fixture des Portals; demo-site.html wird mit gen-baeckerei.mjs aus der Komponente erzeugt.
• Hinweiskarte: „Geschützt: Ihre Vorschau öffnet sich nur nach der Anmeldung im Kundenportal – Fremde sehen nichts.“ Das stimmt: /api/auth/preview-access lässt nur Kundensitzungen des Projekts und das Team durch.

2. Chat-Demo

• Im MacBook ist der Portal-Chat zu sehen. Darunter liegt die Aufnahme des leeren Chats (desktop-3c-chat-leer, auch in 2400 px, damit sie beim Zoomen scharf bleibt). Darüber liegt eine Live-Ebene (demos/chat/) mit den Blasen, dem Eingabefeld, dem Anhang, der Sprachaufnahme, dem Senden-Knopf und einem Zeiger. Formen und Farben sind wie im Portal.
• Ablauf (etwa 28 s, Schleife): Zuerst die Übersicht, dann zoomt die Kamera auf das Gespräch (1,8-fach, nur transform). Marlene hängt ein Foto an und tippt Zeichen für Zeichen. Danach wird gesendet, Kenso antwortet, und Marlene schickt eine Sprachnachricht. Es folgen noch eine Antwort, eine Nachricht von Marlene und die letzte Antwort. Dann zoomt die Kamera heraus, und die Nachrichten blenden aus. Neue Blasen ploppen aus ihrer Ecke auf und federn leicht nach. Die älteren Blasen rutschen weich nach oben (FLIP).
• Texte (Sie-Form vom Team, warm und spielerisch):
  • Marlene: „Guten Morgen! ☀️ Unser neues Roggenbrot ist gerade aus dem Ofen. Darf das auf die Startseite?“ (mit Foto)
  • Kenso: „Und wie das darf! 😍 Das Foto ist so knusprig, ich rieche es bis hierher.“
  • Marlene: Sprachnachricht 0:12
  • Kenso: „Alles notiert: Brot ganz nach oben, Preis dazu, Öffnungszeiten etwas größer. Schauen Sie mal in die Vorschau! 🥖“
  • Marlene: „Sieht super aus! Morgen gibt’s Croissants fürs ganze Team. 🥐“
  • Kenso: „Dann stellen wir schon mal den Kaffee an. ☕“
• Das Foto im Chat ist dasselbe Roggenbrot wie auf der Website, denn die Geschichte geht über beide Stationen.
• Die Uhrzeiten (07:52 bis 10:31) versprechen keine Sofort-Antwort. Ein Tippen-Hinweis des Teams wird nicht gezeigt, weil das Portal keinen hat.
• In der Station Chat gleitet das iPhone nach rechts unten weg. Sonst würde es die eigenen Nachrichten und den Senden-Knopf verdecken.
• Hinweiskarte: „Antwortet das Team, kommt zusätzlich eine E-Mail – so verpassen Sie keine Nachricht.“ Das stimmt: Bei jeder Team-Nachricht geht die Mail K17 hinaus, gedrosselt.
• In der Wisch-Reihe auf dem Handy läuft dasselbe Gespräch über der Handy-Aufnahme des leeren Chats, dort ohne Zoom.
• Bei reduzierter Bewegung steht sofort der Endzustand da: alle Nachrichten, hineingezoomt.

3. Weiches Auf- und Zuklappen von „Funktionen“

• Zustand zu, offen oder schliesst. Beim Verlassen der drei Funktionen falten sich die Unterpunkte von unten nach oben ein, und die Linie links zieht sich nach oben zurück. Das dauert etwa 260 ms. Danach verschwindet die Unterliste.
• „Als App“ springt dabei nicht, sondern gleitet per FLIP von der alten an die neue Stelle (Web Animations API, nur transform). Beim Aufklappen gleitet es genauso nach unten, und die Unterpunkte gleiten nacheinander herein.
• Ein kleiner Pfeil hinter „Funktionen“ zeigt den Zustand: nach rechts heißt zu, nach unten heißt offen.
• Für Screenreader ist die Gruppe sofort zu (aria-expanded="false", die Unterliste ist während des Einfaltens aria-hidden). Bei reduzierter Bewegung klappt die Gruppe sofort zu.