Goldprozess-Sektion zeigt einen Ablauf statt zweier Standbilder #135

New issue

Closed

opened 2026-09-10 08:22:12 +00:00 by Phil · 0 comments

Phil commented

2026-09-10 08:22:12 +00:00

Owner

Warum

Die Startseite verspricht in der H1 „Workflows, die sich in 90 Tagen selbst bezahlen" — eine Zeitaussage. Auf 21.947 px gibt es kein einziges Bild, das einen Ablauf zeigt. Der Satz wird erst auf 20.700 px Tiefe wieder aufgegriffen, in einer zugeklappten FAQ-Antwort.

Die Goldprozess-Sektion, die den Ablauf tragen müsste, zeigt heute zwei ineinander überblendende Standbilder. Im blind ausgeführten Stumm-Test (gesamte Beschriftung auf transparent) sieht ein Betrachter dort „linke Hälfte leer, rechts ein Bildrahmen" — keine Aussage, nur Form.

Das Material für den Ablauf liegt bereits fertig im Repo: 40 Einzelbilder unter web/assets/images/goldader-sequenz/, die vom aufgerollten blauen Schlauch bis zur gestreckten Leitung mit freiliegender Goldader durchlaufen. Verbaut ist davon nichts.

Was gebaut wird

Eine scroll-gesteuerte Sequenz: Der Scrollfortschritt durch die Sektion steuert den Bildindex, der Besucher zieht den Prozess selbst auseinander.

Rendering per <canvas>, nicht als Stapel aus 40 <img>. Die Frames haben transparente Flächen; überblendende Bilder würden zwei Motive gleichzeitig zeigen — genau das Problem, das der heutige Code mit gegenläufigen Deckkräften umgeht.

Kein Pin. Die ScrollTrigger-Strecke bindet an die natürliche Reise der Sektion durch den Viewport (start: 'top 75%', end: 'bottom 45%', scrub: 0.6). Pinnen würde die Seite verlängern — Kürze ist hier hartes Ziel.

Vorladen per IntersectionObserver (rootMargin: 150%), max. 6 parallel, mit decode(). Der Zeichner clampt auf den höchsten geladenen Index, damit nie ein Loch entsteht. Nichts vor dem LCP.

Zwei Randbedingungen

Bytes. Das Material ist 3,1 MB (40 × ~78 KB bei 900×900), nicht „ein paar hundert KB". Neu kodiert, gecroppt auf die Vereinigungs-Bounding-Box aller Frames (900×782):

Tier	Breite	40 Frames
Desktop	640	1,44 MB
Mobil	400	0,76 MB (davon nur jeder zweite Frame → ~0,39 MB)

Ablageort. web/assets/ ist auf Prod ein persistentes Volume, das Repo-Dateien überdeckt — dort abgelegte Frames wären nach einem Code-Sync nicht da. Die Sequenz gehört nach web/static/goldader-sequenz-v1/, neben web/static/fonts/: das liegt im static_files-Volume und geht mit dem Code mit. Versionsordner im Namen, weil nginx *.webp mit immutable ausliefert.

Ruhezustand

Unter prefers-reduced-motion: reduce steht das Endbild (Frame 40) als statisches <img>, ohne JS-Pfad und ohne Observer — die Aussage „die Ader liegt frei" ist damit vollständig da, ohne Scrollen.

Achtung: tools/design-gates/gates.mjs nimmt nur Flächen mit CSS animation-timeline aus dem Tintenvergleich, einen Canvas nicht. Das Standbild muss sofort stehen, sonst kippt das reduced_motion-Gate.

Akzeptanzkriterien

Sequenz läuft scroll-gesteuert auf 1440×900 und 390×844
Kein zusätzliches Pixel Seitenhöhe gegenüber vorher
Netzwerk-Wasserfall: nichts von der Sequenz vor dem LCP
Unter CPU-4×-Drossel und Fast-3G entsteht nie ein leerer oder halbfertiger Zustand
prefers-reduced-motion: Endbild steht ohne Scrollen, reduced_motion-Gate bleibt PASS
Stumm-Test der Sektion besteht: ein Fremder sieht einen Vorgang, keine Form
web/assets/images/goldader-sequenz/ ist entfernt

Refs #133

## Warum Die Startseite verspricht in der H1 „Workflows, die sich in 90 Tagen selbst bezahlen" — eine Zeitaussage. Auf 21.947 px gibt es kein einziges Bild, das einen Ablauf zeigt. Der Satz wird erst auf 20.700 px Tiefe wieder aufgegriffen, in einer zugeklappten FAQ-Antwort. Die Goldprozess-Sektion, die den Ablauf tragen müsste, zeigt heute zwei ineinander überblendende Standbilder. Im blind ausgeführten Stumm-Test (gesamte Beschriftung auf `transparent`) sieht ein Betrachter dort „linke Hälfte leer, rechts ein Bildrahmen" — keine Aussage, nur Form. Das Material für den Ablauf liegt bereits fertig im Repo: 40 Einzelbilder unter `web/assets/images/goldader-sequenz/`, die vom aufgerollten blauen Schlauch bis zur gestreckten Leitung mit freiliegender Goldader durchlaufen. Verbaut ist davon nichts. ## Was gebaut wird Eine **scroll-gesteuerte Sequenz**: Der Scrollfortschritt durch die Sektion steuert den Bildindex, der Besucher zieht den Prozess selbst auseinander. **Rendering per `<canvas>`**, nicht als Stapel aus 40 `<img>`. Die Frames haben transparente Flächen; überblendende Bilder würden zwei Motive gleichzeitig zeigen — genau das Problem, das der heutige Code mit gegenläufigen Deckkräften umgeht. **Kein Pin.** Die ScrollTrigger-Strecke bindet an die natürliche Reise der Sektion durch den Viewport (`start: 'top 75%'`, `end: 'bottom 45%'`, `scrub: 0.6`). Pinnen würde die Seite verlängern — Kürze ist hier hartes Ziel. **Vorladen** per `IntersectionObserver` (`rootMargin: 150%`), max. 6 parallel, mit `decode()`. Der Zeichner clampt auf den höchsten geladenen Index, damit nie ein Loch entsteht. Nichts vor dem LCP. ## Zwei Randbedingungen **Bytes.** Das Material ist 3,1 MB (40 × ~78 KB bei 900×900), nicht „ein paar hundert KB". Neu kodiert, gecroppt auf die Vereinigungs-Bounding-Box aller Frames (900×782): | Tier | Breite | 40 Frames | |---|---|---| | Desktop | 640 | 1,44 MB | | Mobil | 400 | 0,76 MB (davon nur jeder zweite Frame → ~0,39 MB) | **Ablageort.** `web/assets/` ist auf Prod ein persistentes Volume, das Repo-Dateien überdeckt — dort abgelegte Frames wären nach einem Code-Sync nicht da. Die Sequenz gehört nach `web/static/goldader-sequenz-v1/`, neben `web/static/fonts/`: das liegt im `static_files`-Volume und geht mit dem Code mit. Versionsordner im Namen, weil nginx `*.webp` mit `immutable` ausliefert. ## Ruhezustand Unter `prefers-reduced-motion: reduce` steht das **Endbild** (Frame 40) als statisches `<img>`, ohne JS-Pfad und ohne Observer — die Aussage „die Ader liegt frei" ist damit vollständig da, ohne Scrollen. Achtung: `tools/design-gates/gates.mjs` nimmt nur Flächen mit CSS `animation-timeline` aus dem Tintenvergleich, einen Canvas nicht. Das Standbild muss sofort stehen, sonst kippt das `reduced_motion`-Gate. ## Akzeptanzkriterien - [ ] Sequenz läuft scroll-gesteuert auf 1440×900 und 390×844 - [ ] Kein zusätzliches Pixel Seitenhöhe gegenüber vorher - [ ] Netzwerk-Wasserfall: nichts von der Sequenz vor dem LCP - [ ] Unter CPU-4×-Drossel und Fast-3G entsteht nie ein leerer oder halbfertiger Zustand - [ ] `prefers-reduced-motion`: Endbild steht ohne Scrollen, `reduced_motion`-Gate bleibt PASS - [ ] Stumm-Test der Sektion besteht: ein Fremder sieht einen Vorgang, keine Form - [ ] `web/assets/images/goldader-sequenz/` ist entfernt Refs #133

Phil referenced this issue from a commit

2026-09-10 08:34:52 +00:00

feat(goldprozess): Ablauf als scroll-gesteuerte Sequenz zeigen

Phil referenced this issue from a pull request that will close it,

2026-09-10 08:35:13 +00:00

Goldprozess-Sektion zeigt einen Ablauf statt zweier Standbilder #136

Phil closed this issue

2026-09-10 08:35:17 +00:00

Phil referenced this issue

2026-09-10 08:35:47 +00:00

Kundenergebnisse auf eigene Referenzenseite auslagern #137

Phil referenced this issue from a commit