Goldprozess-Sektion zeigt einen Ablauf statt zweier Standbilder #136

Merged

Phil merged 1 commit from feat/goldader-scroll-sequenz into main

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

Phil commented

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

Owner

Jetzt steuert der Scrollfortschritt den Bildindex einer 40-Bild-Sequenz: der aufgerollte Schlauch streckt sich zur geraden Leitung, die goldene Ader kommt frei. Der Besucher zieht den Prozess selbst auseinander.

Entscheidungen

Canvas statt 40 gestapelter <img>. Die Frames haben transparente Flächen — überblendende Bilder würden zwei Motive gleichzeitig zeigen, genau das Problem, das der alte Code mit gegenläufigen Deckkräften umging.

Kein Pin, kein Spacer. Die Strecke bindet an die natürliche Reise der Sektion durch den Viewport. Die Seite ist dadurch kürzer geworden statt länger.

Medienspalte klebt. Die Textspalte ist deutlich höher als das Bild; ohne Sticky wäre die Sequenz aus dem Sichtfeld gescrollt, bevor sie durchgelaufen ist — der Betrachter hätte den Anfang gesehen, nie das Ergebnis. Kostet keine zusätzliche Seitenhöhe.

Frames unter web/static/, nicht web/assets/. Letzteres ist auf Prod ein persistentes Volume, das Repo-Dateien überdeckt — dort abgelegte Frames wären nach einem Code-Sync nicht da. Neu kodiert und auf die Vereinigungs-Bounding-Box aller Frames gecroppt: 3,1 MB → 1,6 MB (Desktop, 640 px) bzw. 0,8 MB (mobil, 400 px, nur jeder zweite Frame).

Ladeverhalten. IntersectionObserver mit rootMargin: 150%, max. 6 parallel, mit decode(). Der Zeichner clampt auf den höchsten geladenen Index, damit nie ein Loch entsteht; die Scroll-Bindung entsteht bereits nach dem ersten Frame, nicht erst nach allen 40. Bei prefers-reduced-motion und im Spardatenmodus wird gar nichts geladen — das CSS zeigt dann allein das Endbild.

Verifikation (ausgeführt)

Prüfung	Ergebnis
Seitenhöhe Desktop	21.947 → 21.764 px (kürzer)
Seitenhöhe mobil	22.475 → 22.351 px (kürzer)
Sequenz 1440×900	läuft sichtbar durch bis zur freiliegenden Ader (Screenshots über 5 Scrollpositionen)
Sequenz 390×844	5 von 5 Scrollpositionen zeigen verschiedene Frames
`prefers-reduced-motion`	Endbild `display: block`, geladen (`naturalWidth 640`), Canvas `display: none`
Gate `reduced_motion`	PASS — fehlende Tinte 0,38 % / 1,11 % (Schwelle 2 %)
Gate `overflow`	PASS — 0 px auf beiden Breiten

Die vier weiterhin roten Gates (typo_ladder, tap_targets, balance, section_forms) sind Altbestand der Seite. balance hat sich leicht verbessert (27,7 % → 27,2 %), section_forms wird sich mit dem Kürzen der Seite auflösen.

Die Craft-Felder blendStartImage/blendEndImage bleiben im Entry-Type stehen und werden nur nicht mehr gelesen — sie zu entfernen wäre Project-Config- und Deploy-Arbeit ohne Frontend-Nutzen.

Closes #135

🤖 Generated with Claude Code

https://claude.ai/code/session_01Y29GMuZcsumFPpLUh84c8G

Die H1 der Startseite verspricht „in 90 Tagen" — eine Zeitaussage. Auf der ganzen Seite gab es kein Bild, das einen Ablauf zeigt. Die Goldprozess-Sektion, die ihn tragen müsste, blendete zwei Standbilder ineinander; im blind ausgeführten Stumm-Test sah ein Betrachter dort nur „linke Hälfte leer, rechts ein Bildrahmen". Jetzt steuert der Scrollfortschritt den Bildindex einer 40-Bild-Sequenz: der aufgerollte Schlauch streckt sich zur geraden Leitung, die goldene Ader kommt frei. Der Besucher zieht den Prozess selbst auseinander. ## Entscheidungen **Canvas statt 40 gestapelter `<img>`.** Die Frames haben transparente Flächen — überblendende Bilder würden zwei Motive gleichzeitig zeigen, genau das Problem, das der alte Code mit gegenläufigen Deckkräften umging. **Kein Pin, kein Spacer.** Die Strecke bindet an die natürliche Reise der Sektion durch den Viewport. Die Seite ist dadurch **kürzer** geworden statt länger. **Medienspalte klebt.** Die Textspalte ist deutlich höher als das Bild; ohne Sticky wäre die Sequenz aus dem Sichtfeld gescrollt, bevor sie durchgelaufen ist — der Betrachter hätte den Anfang gesehen, nie das Ergebnis. Kostet keine zusätzliche Seitenhöhe. **Frames unter `web/static/`, nicht `web/assets/`.** Letzteres ist auf Prod ein persistentes Volume, das Repo-Dateien überdeckt — dort abgelegte Frames wären nach einem Code-Sync nicht da. Neu kodiert und auf die Vereinigungs-Bounding-Box aller Frames gecroppt: 3,1 MB → 1,6 MB (Desktop, 640 px) bzw. 0,8 MB (mobil, 400 px, nur jeder zweite Frame). **Ladeverhalten.** `IntersectionObserver` mit `rootMargin: 150%`, max. 6 parallel, mit `decode()`. Der Zeichner clampt auf den höchsten geladenen Index, damit nie ein Loch entsteht; die Scroll-Bindung entsteht bereits nach dem ersten Frame, nicht erst nach allen 40. Bei `prefers-reduced-motion` und im Spardatenmodus wird gar nichts geladen — das CSS zeigt dann allein das Endbild. ## Verifikation (ausgeführt) | Prüfung | Ergebnis | |---|---| | Seitenhöhe Desktop | 21.947 → **21.764 px** (kürzer) | | Seitenhöhe mobil | 22.475 → **22.351 px** (kürzer) | | Sequenz 1440×900 | läuft sichtbar durch bis zur freiliegenden Ader (Screenshots über 5 Scrollpositionen) | | Sequenz 390×844 | 5 von 5 Scrollpositionen zeigen verschiedene Frames | | `prefers-reduced-motion` | Endbild `display: block`, geladen (`naturalWidth 640`), Canvas `display: none` | | Gate `reduced_motion` | **PASS** — fehlende Tinte 0,38 % / 1,11 % (Schwelle 2 %) | | Gate `overflow` | **PASS** — 0 px auf beiden Breiten | Die vier weiterhin roten Gates (`typo_ladder`, `tap_targets`, `balance`, `section_forms`) sind Altbestand der Seite. `balance` hat sich leicht verbessert (27,7 % → 27,2 %), `section_forms` wird sich mit dem Kürzen der Seite auflösen. Die Craft-Felder `blendStartImage`/`blendEndImage` bleiben im Entry-Type stehen und werden nur nicht mehr gelesen — sie zu entfernen wäre Project-Config- und Deploy-Arbeit ohne Frontend-Nutzen. Closes #135 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01Y29GMuZcsumFPpLUh84c8G

Phil added 1 commit

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

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

Die H1 der Startseite verspricht 90 Tage, also einen Ablauf, und keine
Sektion zeigte bisher einen. Die Goldprozess-Sektion blendete zwei
Standbilder ineinander; im Stumm-Test sah ein Betrachter dort nur einen
Bildrahmen, keine Aussage.

Jetzt steuert der Scrollfortschritt den Bildindex einer 40-Bild-Sequenz:
der aufgerollte Schlauch streckt sich, die Goldader kommt frei. Gezeichnet
wird auf einem Canvas, weil die Frames transparente Flaechen haben und
uebereinanderliegende Bilder zwei Motive gleichzeitig zeigen wuerden.

Kein Pin und kein Spacer -- die Sektion bleibt so hoch wie ihr Text, die
Seite wird sogar kuerzer (21.947 -> 21.764 px). Die Medienspalte klebt
waehrenddessen, sonst waere die Sequenz aus dem Sichtfeld gescrollt, bevor
sie durchgelaufen ist.

Frames liegen unter web/static/, nicht web/assets/: letzteres ist auf Prod
ein persistentes Volume, das Repo-Dateien ueberdeckt. Neu kodiert und auf
die Vereinigungs-Bounding-Box gecroppt, 3,1 MB -> 1,6 MB (Desktop) bzw.
0,8 MB (mobil, jeder zweite Frame).

Bei prefers-reduced-motion und im Spardatenmodus wird nichts geladen; das
CSS zeigt dann allein das Endbild, damit die Aussage ohne Scrollen steht.

Closes #135

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Y29GMuZcsumFPpLUh84c8G

Phil merged commit 005c3b0d20 into main

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

Phil deleted branch feat/goldader-scroll-sequenz

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

Phil referenced this pull request from a commit

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

Merge pull request 'Goldprozess-Sektion zeigt einen Ablauf statt zweier Standbilder' (#136) from feat/goldader-scroll-sequenz into main