# Detroit: die tatsächlichen Scrollbewegungen

Live untersucht am 7. September 2026. Dieser Bericht beschreibt die Originalseite und ersetzt keine Demo-Spezifikation. Die vorübergehend entworfene Editorial-Animation mit einer langen Sticky-Bühne und einer Vergrößerung zum Vollbild war eine eigene Interpretation. Sie ist keine Rekonstruktion dieser Referenz und gehört nicht zu den unten belegten Befunden.

**Zwei unterschiedliche Systeme:** Auf [Home](https://www.detroit.paris/) verschiebt das Mausrad eine endlose horizontale Bildfolge. Ihre Bilder skalieren abhängig von ihrer horizontalen Position. Auf [Projects](https://www.detroit.paris/projects) bewegt sich eine vertikale Namensliste, rastet bei einem Namen ein und blendet dessen Bilder zeitversetzt von rechts ein. Beide Desktop-Ansichten wurden mit `scrollY = 0` gemessen. Es gibt dort keine gemessene lange Dokument-Scrollstrecke mit einer gepinnten Bühne.

## Methode und Belege

Chrome, Desktop 1440 × 1000 CSS-Pixel; Touch-Emulation 390 × 844. Desktop-Home: Intro vollständig abgewartet, zwölf Wheel-Ereignisse mit jeweils `deltaY = +120`, danach zwölf mit `−120`. Projects: achtmal `+80`, dann achtmal `−80`. Die Werte nach jedem Ereignis stehen mit Zeitstempel, kumuliertem Input, Rect, Transform, eigenständigem CSS-Scale, Clip-Path und Opacity in [detroit-scroll-raw.json](detroit-scroll-raw.json). Zwischenereignisse wurden nach ungefähr 120 bzw. 80 ms aufgenommen; Screenshot-Aufnahmen verlängern einzelne Abstände. Nachlauf wurde separat abgewartet.

Zusätzlich erfasst [detroit-frame-detail.json](detroit-frame-detail.json) die Bewegung in aufeinanderfolgenden `requestAnimationFrame`-Callbacks. Die öffentlich ausgelieferte [Original-JavaScript-Datei](https://detroit-talents.netlify.app/main.js) bestätigt die Mechanik und Timing-Konstanten. Ihre minifizierten Funktionsnamen `md`, `yd`, `fd`, `om` dienen hier nur als Fundstellen dieser Version, nicht als stabile API. Quellcode-Konstanten und gemessene Ergebnisse sind unten ausdrücklich getrennt.

Aufzeichnungen: [Home und Projects mit Vorwärts-/Rückwärtslauf](recordings/detroit-original-home-projects-scroll.webm), [Touch auf Home und Projects](recordings/detroit-original-touch-scroll.webm), [Einzelschritt und gestaffelter Bild-Reveal](recordings/detroit-original-detail-motion.webm). Eine unabhängige zweite Home-Aufzeichnung liegt unter [detroit-reference-motion.webm](motion/detroit-reference-motion.webm).

## Home, Desktop: horizontale Verschiebung plus positionabhängige Größe

Die Fläche nimmt den Bildschirm ein. Die Bilder stehen absolut positioniert mit ihrem Fußpunkt am unteren Rand. Ein Wheel-Ereignis wird von der Fläche abgefangen. Das betragsmäßig größere Delta von horizontalem und vertikalem Wheel-Input wird verwendet. Positives `deltaY` bewegt die sichtbaren Bilder nach rechts; dabei werden sie größer. Das umgekehrte Vorzeichen führt denselben geometrischen Verlauf zurück.

Die relevante Reihenfolge ist:

1. Der virtuelle Zieloffset ändert sich um das gewählte Wheel-Delta × −0,5.
2. Der aktuelle Offset nähert sich diesem Ziel pro Animationsframe um 6 % des verbleibenden Abstands. Dies ist ein zeitlicher Nachlauf, kein Snap zwischen festen Bildern.
3. Jedes Bild erhält seine logische x-Position aus Listenindex, halber Basisbildbreite und aktuellem Offset. Ein zyklischer Versatz hält passende Bilder im sichtbaren Bereich.
4. Aus der horizontalen Position wird eine individuelle Größe berechnet. Der Anker bleibt unten links. Das Resultat ist die sichtbare Treppe: links klein, rechts groß, alle Unterkanten bündig.
5. Das Bildmotiv innerhalb der Fläche verschiebt sich zusätzlich horizontal. Die Beschriftung wird gegenläufig skaliert, damit ihre Schriftgröße nicht mit dem Bild wächst.

**Quellcode-Konstanten:** Bei 992–1440 px Breite reicht der Skalenbereich von 0,055 bis 1,6. Aus `u = clamp((logisches x + Basisbreite/2) / Viewportbreite, 0, 1)` folgt die lineare Interpolation zwischen diesen Grenzen. Bei mehr als 1440 px ist die Obergrenze 2,1; bei 768–991 px sind es 0,35 bis 1,4. Die Quellreihenfolge wird beim Laden zufällig gemischt. Derselbe Projektname muss deshalb beim nächsten Laden nicht wieder links stehen.

Die Basisbildbreite dieser Messung war 432 px. Die Liste enthielt 32 Einträge, ihr zyklischer Rechenumfang betrug 6912 px. `transform: translateX(...)` und die separate CSS-Eigenschaft `scale` wirken gemeinsam. Deshalb ist der tatsächlich sichtbare `rect.x` nicht identisch mit dem Translate-X-Wert. Nur die Rect-Werte beschreiben die fertige Bildschirmposition.

| Messpunkt derselben Kachel „ALYS THOMAS“ | Kumuliertes Wheel | Zyklischer Offset | Rect x / y | Breite / Höhe | CSS-Scale |
|---|---:|---:|---:|---:|---:|
| Nach Intro | 0 | 0 | 0 / 886,447 | 123,876 / 113,553 | 0,286750 |
| Nach sechs Schritten, noch im Nachlauf | +720 | 6634,624 | 162,087 / 768,596 | 252,441 / 231,404 | 0,584354 |
| Nach zwölf Schritten und Nachlauf | +1440 | 6192,023 | 762,567 / 580,558 | 457,573 / 419,442 | 1,059200 |
| Zwölf Schritte zurück, nach Nachlauf | 0 | 6911,942 ≈ 0 zyklisch | 0,015 / 886,425 | 123,900 / 113,575 | 0,286805 |

Die Unterkante dieser Kachel blieb an allen Messpunkten exakt `y = 1000`. Der Rückweg endet nach der begrenzten Wartezeit innerhalb von 0,024 px Breitenabweichung zum Ausgangsbild. Ein Offset nahe 6912 ist im zyklischen System derselbe Bereich wie 0, nicht ein Sprung ans Ende einer Dokumentseite. Der Eingang +1440 entspricht einem virtuellen Ziel von −720 bzw. zyklisch 6192; das ist keine Scrollstrecke von 1440 Dokument-Pixeln.

**Innere Bewegung:** Das Motiv nutzt eine Breite von 110 %, `object-fit: cover` und eine von `u` abhängige Verschiebung zwischen −15 % und 0 %. Diese transformiert mit 0,6 s Dauer und einer Kurve `cubic-bezier(0.33, 1, 0.68, 1)`. Ein Hover vergrößert das innere Motiv zusätzlich auf 1,03 und zeigt das Label in 0,4 s von unten. Die Hauptkachel wird während des Scrollens nicht per Clip-Path aufgedeckt: an den gemessenen Elementen war `clip-path: none`. Ausschnitte entstehen durch Containergrenzen und Überdeckung.

## Intro und Typografie sind getrennt vom Scrollen

Der Start der Bildfolge ist eine zeitbasierte Animation: Der virtuelle Offset läuft laut Quelle in 1500 ms von 600 auf 0, mit kubischer Auslaufkurve; Bildgröße und Deckkraft wachsen währenddessen. Das ist ein Intro nach dem Laden, keine durch Wheel-Input zurückspulbare erste Scrollphase. Für die Messserie wurde deshalb vor dem ersten Wheel 5200 ms gewartet.

„CRAFTING“ und „CULTURE“ tragen das Attribut `lt`. Die dazugehörige Originalfunktion zerlegt sie in Zeichen und lässt diese mit Maskierung nach oben erscheinen: Start 150 %, Ende 10 %, Dauer 1,2 s, `expo.out`, Zeichenversatz 0,05 s; Auslöser ist das erstmalige Erreichen von „top 90 %“. Die Sichtbarkeit am Einstieg löst diese Animation ohne Nutzerscroll aus. Danach bleibt die Überschrift stehen. Die Containerpositionen waren in sämtlichen Home-Schritten gleich: erste Zeile x = 21,594 / y = 57,594; zweite Zeile x = 21,594 / y = 213,719. Der zusätzliche Frame-Test prüft auch die 15 einzelnen Zeichen, nicht nur ihre Container.

## Projects, Desktop: vertikale Liste, Einrasten, dann Bildwechsel

Dies ist eine eigene Route. Ein Home-Scroll verwandelt die Treppe nicht in diese Ansicht. Die Bildseiten werden über Links geöffnet.

Die Projektnamen sitzen in zyklisch wiederholten Listenblöcken. Wheel-Input verändert den virtuellen vertikalen Zieloffset um `deltaY × 0,5`. Die Liste folgt pro Frame mit Faktor 0,09 und einem Translate-Y; die Dokumentposition bleibt 0. Der Name nahe der Mitte wird schwarz, die anderen sind hellgrau. Bei beginnendem Scrollen verschwindet die aktuelle rechte Bildtreppe. Der Name kann währenddessen bereits wechseln, während die Bildfläche noch leer bleibt.

Nach dem letzten Wheel-Ereignis wartet das Original zunächst 50 ms. Ein Snap beginnt erst, wenn der Ziel-/Ist-Abstand höchstens 5 px beträgt. Dann wird auf den nächstliegenden Namen ausgerichtet. Die nominelle Snap-Dauer beträgt 400 ms mit elastischer Auslaufkurve; die fortlaufende Positionsglättung liegt zusätzlich darüber. Deshalb darf daraus keine pauschale „alles nach 450 ms fertig“-Behauptung abgeleitet werden.

Nach 60 % des Snap-Verlaufs wird die neue Bildgruppe zugeschaltet. Ihre Bilder starten vollständig rechts außerhalb ihrer Position und kommen gestaffelt herein: Beginn nach 30 ms plus 30 ms je Bild, Transform-Dauer 0,35 s, `cubic-bezier(0.33, 1, 0.68, 1)`. Beim erstmaligen Laden verwendet dieselbe Ansicht einen anderen, langsameren Reveal: 300 ms plus 80 ms je Bild und 0,6 s Dauer. Eine gemessene Bildphase mit `opacity: 1` kann somit trotzdem noch komplett rechts außerhalb des sichtbaren Bereichs liegen. Das ist eine Verschiebung, kein bloßes Fade.

| Messpunkt | Kumuliertes Wheel | Virtueller Listenoffset | Aktiver/sichtbarer Zustand |
|---|---:|---:|---|
| Einstieg | 0 | 488,364 | HERMES schwarz; Hermes-Bilder sichtbar |
| Vierter Schritt | +320 | 603,549 | LA MER nahe der Mitte; vorherige Bildgruppe Opacity 0 |
| Nach achtem Schritt und Nachlauf | +640 | 828,303 | LOUIS VUITTON GRASSE schwarz; dessen Bilder sichtbar |
| Nach acht Rückwärtsschritten und Nachlauf | 0 | 474,232 | HERMES und Hermes-Bilder wieder aktiv |

Das Rückwärts-Experiment bestätigt den Rückwechsel zu HERMES. Es endet nicht am identischen Pixeloffset: Einrasten und die zeitlichen Zwischenzustände beeinflussen das Ergebnis. Die Home-Aussage „derselbe geometrische Weg“ darf daher nicht als identische kumulative Wheel-Abbildung für Projects übernommen werden. Auch zyklisches Umordnen von Listenblöcken kann den Roh-Translate-Y verändern, ohne dass die sichtbare Liste springt.

Rechts ist die Bildtreppe an derselben rechten Kante ausgerichtet. In dieser Desktop-Messung hatten die ersten beiden Bildflächen 86,391 × 180 px und 201,594 × 260 px; ihre x-Positionen nach dem Reveal waren 1353,609 und 1238,406. Größe und Staffelung gehören zum Layout. Das Scrollen vergrößert diese Projects-Bilder nicht wie auf Home.

## Touch: zwei ausdrücklich verschiedene Verhaltensweisen

**Mobile Home:** Bei ≤767 px verlässt das Original den Desktop-Animationspfad. Statt der skalierten absoluten Positionen entsteht eine native horizontale Scrollliste mit drei Kopien der gemischten Inhalte. Die Einträge haben `scale: 1`, `transform: none`; die innere Parallax ist deaktiviert, Labels sind sichtbar. An den Rändern wird die Scrollposition in die mittlere Kopie versetzt. Bildformate bzw. Ladezustände können unterschiedliche Höhen ergeben; die Desktop-Treppe wird nicht proportional auf das Telefon verkleinert.

Ein tatsächlicher emulierter Touch-Swipe von (315, 680) nach (95, 680) änderte `scrollLeft` von 9472 auf 9765. Der Gegen-Swipe führte zu 9485. Der Fingerweg von 220 px ist wegen nativer Trägheit nicht identisch mit dem resultierenden Scrollweg von 293 px. `scrollY` blieb 0; CSS-Scale blieb 1. Die 13 px Differenz nach dem Rückweg ist kein Beleg für einen fehlerhaften Endlos-Loop.

**Mobile Projects:** Die virtuelle vertikale Namensliste bleibt erhalten. Im Original multipliziert der Touch-Handler die jeweilige vertikale Fingerbewegung mit 1,2. Ein emulierter Swipe von (190, 690) nach (190, 330) wechselte von HERMES zu SUMUP. Die Bildgruppe wurde passend ersetzt. Der gemessene Listenoffset ging wegen des zyklischen Systems von 998,407 auf 422,407; das ist kein negativer Fingerweg. Die Bilder verwenden hier eine andere, für die schmale Ansicht angepasste Größenstaffel.

## Grenzen und reproduzierbare Artefakte

Die Aufnahmen sind echte Originalseiten-Aufnahmen. Touch bedeutet Chrome-Geräteemulation mit echten Touch-Input-Ereignissen, keinen Test auf einem physischen iPhone. Pixelwerte gelten für die angegebenen Viewports. Timing unter Headless-Aufzeichnung und variierende Netz-/Bildladezeiten können Zwischenphasen beeinflussen. Quelle und Laufzeitmessung erlauben die Mechanik zu identifizieren, jedoch keine belastbare Aussage zu ausgelieferten Frames auf allen Geräten.

Die kompakte Auswahl für die visuelle Vergleichsseite steht in [detroit-scroll-summary.json](detroit-scroll-summary.json). Weitere Bilder: [Home Zwischenphase](screenshots/detroit-scroll-home-02-mid.png), [Home zurück](screenshots/detroit-scroll-home-04-return.png), [Projects Einstieg](screenshots/detroit-scroll-projects-01-hermes.png), [Projects im Bild-Reveal](screenshots/detroit-scroll-projects-04-reveal.png), [Mobile vor Swipe](screenshots/detroit-scroll-mobile-home-01-start.png), [Mobile nach Swipe](screenshots/detroit-scroll-mobile-home-02-swiped.png), [Mobile Projects nach Snap](screenshots/detroit-scroll-mobile-projects-03-snapped.png).

Reproduktionsskripte: [Schrittprotokoll](scripts/detroit-scroll-exact.cjs) und [Frame-Details](scripts/detroit-frame-detail.cjs). Keine Demo-Dateien wurden für diese Analyse verändert.

Zusätzlicher Frame-Nachweis: Der einzelne Home-Impuls von +120 wurde über 98 Frames erfasst; 98 unterschiedliche Kachel-Transforms belegen kontinuierliche Bewegung. Alle 15 Zeichen der großen Überschrift behielten in dieser Sequenz identische Transform-, Opacity- und Y-Werte. Der Projects-Trace enthält 164 Frames und 110 unterschiedliche Bild-Transforms. Die ergänzende Reveal-Aufnahme zeigt den Eintritt der Bildtreppe; ihr zugehöriger Messframe wurde unmittelbar vor dem Screenshot erfasst.