# B/D® JAMS — genaue Scroll- und Drag-Analyse

Untersucht am **7. September 2026**, live in Chrome mit Playwright: Desktop 1440 × 1000 px, Smartphone-Emulation 390 × 844 px mit mobiler Browserkennung und Touch-Eingaben. Die Bewegung wurde nach Ende des Intros geprüft. 16 unveränderte Screenshots, zwei lokale Browseraufzeichnungen und DOM-Messwerte dokumentieren den Lauf.

**JAMS führt quadratische Plattencover von unten in eine perspektivische Tiefenstaffel.** Die aktuelle Karte liegt groß vorn, ältere Karten rücken nach oben und hinten. Beim Scrollen verändern sich ihre Y- und Z-Positionen kontinuierlich. Die Karten werden durch die Perspektive kleiner; sie drehen oder biegen sich auf dieser Bahn nicht. Nach dem Loslassen beziehungsweise Scrollende folgt normalerweise eine Einrastbewegung auf eine ganze Karte. Ein Initialisierungs-Sonderfall ist unten dokumentiert.

## Direkt ansehen

- [Desktop-Aufzeichnung, 22,32 Sekunden](motion/jams-desktop-motion.webm): Intro, kleine Wheel-Impulse, kontinuierliches Scrollen, Gegenlauf, Drag und Beginn des Grid-Wechsels.
- [Mobile Aufzeichnung, 14,72 Sekunden](motion/jams-mobile-motion.webm): Intro, echter emulierter Touch-Drag mit Loslassen, Beginn des Grid-Wechsels.
- [Vergrößerbare Galerie mit allen 16 Phasen](index.html#ref-jams).
- [Gemeinsamer visueller Scrollvergleich](scroll/).
- [Rohmesswerte](jams-observations.json) und [kompakte Zusammenfassung](jams-summary.json).

Die Clips sind Bildschirmaufzeichnungen der Originalseite, keine nachgebauten Animationen. Der Desktop-Clip ist auf 960 × 666 px verkleinert; die Screenshots behalten 1440 × 1000 px. Smartphone-Messungen stammen aus Browseremulation, nicht von physischer Hardware.

## 1. Was sich räumlich bewegt

Die Bühne bleibt im Viewport. Der Header mit Crate/Grid und Notes sowie die Metadaten sind von den Coverflächen getrennt. Bei 1440 × 1000 px beträgt die CSS-Perspektive **800 px**, ihr Ursprung liegt bei **720 / 600 px**. Die Kartenbasis ist 1280 px breit, beginnt links bei 80 px und vorn bei y = 500 px. Die Originalseite zeigt im geprüften Zustand 20 Cover.

| Ebene im eingerasteten Desktopzustand | Y-/Z-Verschiebung der Karte | Sichtbare Oberkante | Sichtbare Breite |
| --- | --- | ---: | ---: |
| Aktuelle Karte | 0 / 0 px | 500,00 px | 1280,00 px |
| Eine Karte dahinter | −150 / −162,5 px | 392,21 px | 1063,90 px |
| Zwei Karten dahinter | −300 / −325 px | 315,56 px | 910,22 px |
| Drei Karten dahinter | −450 / −487,5 px | 258,25 px | 795,34 px |

Diese Werte wurden im DOM gemessen. Alle vier Karten sind horizontal zentriert. Ihre Oberkanten rücken in der Tiefe immer enger zusammen. Aus der Perspektive folgt die Breite beispielsweise für die erste hintere Karte: 1280 × 800 / (800 + 162,5) ≈ 1063,90 px.

Der ausgelieferte Seitencode definiert pro Karte einen zweigeteilten linearen Weg: zuerst von **y = 2,25 × Viewporthöhe, z = 0** nach **y = 0, z = 0**; anschließend nach **y = −0,6 × Viewporthöhe, z = −650 px** auf Desktop. Über die letzten 10 % ihrer Timeline blendet die hinterste Karte aus. Die gestaffelten Kartentimelines liegen um 0,125 Einheiten auseinander. Eine dreifach wiederholte Sequenz und das Zurücksetzen an den Bereichsgrenzen erzeugen die zyklische Bahn. Die Endlosschleife ist im Quellcode belegt; im kurzen Prüfclip wird kein vollständiger 20-Karten-Umlauf durchfahren. [Original-JavaScript](https://jams.basicagency.com/js/site.js), [Original-CSS](https://jams.basicagency.com/css/site.css).

## 2. Scrollen: stufenlos folgen, danach einrasten

Das Desktop-Scrollfenster für eine ganze Runde beträgt **Anzahl der Karten × 0,25 × Viewporthöhe**. Im Prüflauf sind das 20 × 250 = 5000 px, also **250 px pro Karte**. Ein GSAP-Tween führt den Abspielkopf mit 0,4 s Dauer und `power1`-Easing nach. Während weiterer Eingaben wird dieses Ziel laufend aktualisiert. Die 0,4 s sind ein Glättungsparameter, keine Wartezeit, bevor eine Karte reagiert. [Original-JavaScript](https://jams.basicagency.com/js/site.js).

| Eingabe im Prüflauf | Während der Bewegung | Nach Beruhigung |
| --- | --- | --- |
| Erster Wheel-Impuls +120 px | Nach ca. 90 ms: bisherige Karte y = 488,93 statt 500 px | Scrollposition bleibt 120 px; Karte y = 443,28 px, Breite 1166,29 px. Kein Snap bei dieser ersten Initialisierung. |
| Anschließend +180 px | Scrollposition 300 px; nächste Karte steigt aus dem unteren Rand auf | Einrasten auf 250 px; nächste Karte exakt y = 500 px, 1280 px breit. |
| Acht Impulse zu +90 px im Abstand von ca. 100 ms | Scrollposition 970 px, fünf angeschnittene Karten in unterschiedlichen Tiefen | Einrasten auf 1000 px, vier Karten weiter als am Anfang. |
| Gegenlauf −500 px | Bewegung läuft entlang derselben Bahn zurück | Scrollposition 500 px; zwei Karten zurück, identische eingerastete Geometrie. |

**Erster Impuls:** Die Funktion zum Einrasten setzt beim ersten Aufruf zunächst nur einen internen Initialisierungsstatus. Das erklärt den gemessenen Zwischenzustand nach +120 px. Erst spätere Aufrufe setzen den Scrollwert auf das nächste Raster. Es wäre daher ungenau, dem Original ausnahmslos einen Snap nach jedem einzelnen Impuls zuzuschreiben. [Original-JavaScript](https://jams.basicagency.com/js/site.js).

## 3. Drag und Touch sind eigenständige Eingaben

Vertikales Ziehen wirkt direkt auf denselben Abspielkopf: **0,0005 × vertikaler Dragweg** ergibt den Anteil einer vollständigen Runde. Bei 20 Karten entspricht ein Weg von 100 px einer Karte. Im Desktopversuch wurden 300 px nach oben gezogen: Die dokumentierte Scrollposition blieb während des Haltens bei 500 px, die Cover bewegten sich trotzdem. Nach dem Loslassen rastete die dritte folgende Karte vorn ein, und die Desktop-Scrollposition wurde auf 1250 px synchronisiert. [Messwerte](jams-observations.json), [Original-JavaScript](https://jams.basicagency.com/js/site.js).

Auf Smartphone bleibt dieselbe Grundidee erhalten, aber die Perspektivtiefe wird kleiner: **z bis −300 px** und **y bis −0,2 × Viewporthöhe**, Glättung **0,6 s**. Die Bühne ist 70,5 % der Viewporthöhe hoch, vertikal um die 47-%-Position zentriert. Die Kartenbasis liegt bei 25 % dieser Bühne. Bei 390 × 844 px wurde die vordere Karte bei **x = 20, y = 247,91, Breite = 350 px** gemessen. Die drei hinteren Oberkanten liegen bei 227,18 / 209,72 / 194,82 px. [Original-JavaScript](https://jams.basicagency.com/js/site.js), [Original-CSS](https://jams.basicagency.com/css/site.css).

Der mobile Touch-Lauf ging von y = 650 auf y = 350 px und damit ebenfalls drei Karten weiter. **Window.scrollY blieb dabei 0.** Im mobilen Crate-Modus bewegt der Draggable den Abspielkopf direkt; die beobachtete Bewegung benötigt keinen nativen vertikalen Dokumentlauf. Das ist ein anderer Eingabepfad als der Desktop-ScrollTrigger. Touch wurde über CDP als Touchstart, mehrere Touchmove-Schritte und Touchend eingespeist, nicht über ein Desktop-Mausrad.

## 4. Welche sichtbaren Effekte andere Auslöser haben

- **Intro:** Zeitgesteuertes Hochkommen und Auffächern der Cover nach dem Laden, anschließend Übergang zur regulären Crate-Geometrie. Diese Animation ist nicht an Scrollfortschritt gebunden.
- **Metadaten:** Beim Bewegen blendet die Playlistbeschriftung aus. Nach Beruhigung erscheinen neue Angaben mit einer kurzen Bewegung von unten und einem Fade. Im kontinuierlichen Wheel-Zustand waren die Titel leer; im eingerasteten Zustand waren sie wieder sichtbar.
- **Hintergrund:** Die neue Playlist bestimmt die Hintergrund- und Textfarben. Der Farbwechsel wird über eine ungefähr 0,5 s lange Überblendung geglättet.
- **Crate → Grid:** Ein Klick löst eine eigene mehrstufige Layoutanimation aus: Cover sammeln sich kleiner in der Mitte und verteilen sich anschließend auf Rasterpositionen. Die Screenshots 11, 12 und 16 zeigen **Übergangsphasen**, keinen endgültig eingerasteten Gridzustand. Der Wheel-Versuch während dieser Phase blieb bei Scrollposition 0; daraus folgt keine Aussage über das spätere Grid-Scrollverhalten.
- **Grid-Hover:** Der Code enthält eine langsam rotierende zusätzliche Coverfläche und Farbwechsel beim Hover. Das ist getrennt von der vertikalen Crate-Bahn; es ist in diesem Prüfablauf nicht als eigener Live-Hover-Test untersucht.

Quellen für die Trennung und Zeitparameter: [Original-JavaScript](https://jams.basicagency.com/js/site.js). Die konkreten visuellen Zustände zeigen die [Screenshots](index.html#ref-jams) und [Aufzeichnungen](motion/jams-desktop-motion.webm).

## 5. Übertragung auf Davids Filmrolle — eigene Designentscheidung

Der ergänzte Nutzerwunsch ist eine **durchlaufende Filmrolle**: Im ersten Frame stehen David Friedrich, Work und Contact; jeder weitere Frame zeigt die Vorschau eines Projekts. Das ist die Inhalts- und Formentscheidung für [Demo D Reel](../reel/). JAMS liefert als beobachtetes Prinzip die kontinuierliche, räumlich nachvollziehbare Folge großer Medienflächen und die Bedienung über Scrollen beziehungsweise Ziehen.

Eine seitwärts laufende Filmrolle mit Perforation ist eine eigene Adaption. Die JAMS-Referenz selbst zeigt eine vertikale Tiefenstaffel quadratischer Plattencover. Entsprechend werden hier weder ein gebogener Filmstreifen noch Rotation, Clip-Masking oder horizontale Scrollgeometrie als Originalbefund behauptet. Ein strenger Nachbau der JAMS-Bewegung müsste den Y-/Z-Pfad, die Perspektive, das Einrasten und die separate mobile Dragsteuerung reproduzieren. Eine freier gestaltete Rolle sollte klar als eigene Interpretation benannt werden.

## Screenshot-Index

| Datei | Zustand |
| --- | --- |
| [01 Desktop Start](screenshots/jams-01-desktop-start.png) | Reguläre Tiefenstaffel nach dem Intro |
| [02 Wheel +120 in Bewegung](screenshots/jams-02-desktop-wheel-120-moving.png) | Ca. 90 ms nach dem Impuls |
| [03 Wheel +120 beruhigt](screenshots/jams-03-desktop-wheel-120-settled.png) | Erster Zwischenzustand ohne Snap |
| [04 Weitere +180 in Bewegung](screenshots/jams-04-desktop-wheel-180-moving.png) | Nächste Karte steigt auf |
| [05 Weitere +180 beruhigt](screenshots/jams-05-desktop-wheel-180-settled.png) | Auf 250 px eingerastet |
| [06 Kontinuierliches Wheel](screenshots/jams-06-desktop-wheel-continuous.png) | Mehrere Karten während des Nachlaufs |
| [07 Kontinuierliches Wheel beruhigt](screenshots/jams-07-desktop-wheel-continuous-settled.png) | Auf 1000 px eingerastet |
| [08 Gegenlauf](screenshots/jams-08-desktop-wheel-reverse.png) | Zurück auf 500 px |
| [09 Drag gehalten](screenshots/jams-09-desktop-drag-moving.png) | Vor dem Loslassen |
| [10 Drag eingerastet](screenshots/jams-10-desktop-drag-settled.png) | Drei Karten weiter, 1250 px |
| [11 Grid-Klick: Sammelphase](screenshots/jams-11-desktop-grid-transition-stack.png) | Kleine Cover in der Mitte |
| [12 Grid-Klick: Verteilphase](screenshots/jams-12-desktop-grid-transition-spread.png) | Cover verteilen sich auf Spalten |
| [13 Mobile Start](screenshots/jams-13-mobile-start.png) | Flachere Staffel, vollständiges Cover |
| [14 Mobile Touch gehalten](screenshots/jams-14-mobile-touch-moving.png) | Kontinuierlicher Zwischenzustand |
| [15 Mobile Touch eingerastet](screenshots/jams-15-mobile-touch-settled.png) | Drei Karten weiter |
| [16 Mobile Grid-Klick](screenshots/jams-16-mobile-grid-transition.png) | Sammelphase des Layoutübergangs |

## Reproduzierbarkeit und Grenzen

Aufnahmeskript: [capture-jams-motion.cjs](scripts/capture-jams-motion.cjs). Die Screenshots sind echte Browseraufnahmen. Die Metadatenwerte der Playlist, etwa „0 Tracks“, werden hier nicht als inhaltlich geprüft behandelt. Die Auswahl der Karten kann sich nach dem Recherchedatum verändern. Source-Parameter sind am 7. September 2026 abgelesene Originalwerte, keine allgemeine Zusage über spätere Versionen.

Primärquellen: [B/D® JAMS](https://jams.basicagency.com/), [ausgeliefertes JavaScript](https://jams.basicagency.com/js/site.js), [ausgeliefertes Stylesheet](https://jams.basicagency.com/css/site.css). Keine fremden Quelldateien oder Cover wurden in die Demo eingebaut.