# Referenzanalyse: Andreas Bruns und Eugen Merher Recherche am 7. September 2026. Beide Websites wurden live in einem isolierten Chrome-Browser betrachtet und per Playwright bedient. Desktop: 1440 × 1000 Pixel. Mobile: 390 × 844 Pixel, Touch-Emulation mit iPhone-User-Agent. Das ist eine Browser-Emulation, kein Test auf einem physischen iPhone. Die Screenshots sind echte Aufnahmen der Referenzseiten; es wurden keine fremden Filmdateien für die Demo übernommen. ## Andreas Bruns – der Film ist die gesamte Oberfläche Quelle: [andreasbruns.com](https://andreasbruns.com/). Technische Gegenprüfung: [öffentlich ausgeliefertes Interaktionsskript](https://andreasbruns.com/wp-content/themes/andreasbruns/js/andreasjs.min.js) und Styles im Seitendokument. ### Visuelle Regeln - **Randloser Film im gesamten Viewport.** Keine Hero-Box, kein sichtbarer Seitencontainer, kein Abstand zum Browserrand. Der Videohintergrund verwendet `object-fit: cover`. Das Bild bestimmt Farbe, Stimmung und den gesamten ersten Eindruck. - **Die Marke bleibt klein.** Weißes A/B-Monogramm links oben; ein kleiner weiß umrandeter Kreis rechts oben öffnet den Kontakt. Im Desktop-Screenshot liegen beide ungefähr 48 Pixel vom Seitenrand entfernt. Die Oberfläche arbeitet fast vollständig mit Weiß über bewegtem Film. - **Projektband statt Galerie.** Unten läuft eine horizontale Reihe aus Kundennamen und kleinen Filmtiteln. Keine Thumbnail-Kacheln. Die großen Titel haben einen leicht literarischen, teils serifartigen Charakter; die Untertitel sind wesentlich kleiner und leichter. Aus dem CSS: Desktop-Kundentitel 40 Pixel, Untertitel 16 Pixel. Seitlicher Anschnitt macht deutlich, dass weitere Projekte existieren. - **Hierarchie durch Deckkraft und Größe.** Nicht aktive Titel sind stark zurückgenommen. Aktiver oder gehoverter Titel wird heller und etwas größer. Der Film bleibt trotzdem das lauteste Element. - **Miniaturhafte Bedienhinweise.** Rechts steht ein winziger Bruchzähler, beispielsweise 2/17. Der Cursor wird zu einem feinen Kreis mit Play-, Pause- oder Richtungszeichen. Das wirkt hochwertig und zurückhaltend, setzt aber das Entdecken der Bedienung voraus. - **Kontakt als klarer Materialwechsel.** Eine Vollbildansicht teilt sich auf Desktop in zwei gleich breite Flächen: links ein großes Setfoto, rechts Weiß mit kleinem Textblock, Mail und Icons. Das macht die Person greifbar, ohne die Arbeitsübersicht mit Biografie zu belasten. ### Interaktion: warum es sich sprunghaft anfühlt Der Eindruck aus Davids Mail lässt sich konkret erklären. Es gibt drei unterschiedliche Auslöser für einen anderen Film: 1. Nach vollständig geladenem Einstieg wechselte **ein Wheel-Impuls von 600 Einheiten** die Auswahl von COOP zu Harley-Davidson. `scrollY` blieb dabei 0; die Dokumenthöhe blieb 1000 Pixel bei 1000 Pixel Viewporthöhe. Es wird also nicht durch eine Seite gescrollt, sondern ein Slider bedient. 2. **Hover über JK TYRES** änderte sofort den gesamten Filmhintergrund zu diesem Projekt, während die Slider-Auswahl im DOM noch Harley-Davidson war. Der Besucher kann damit über ein anderes Projekt schauen als das zentrierte Projektband vermuten lässt. 3. Die öffentliche JavaScript-Quelle schaltet **am Ende eines Preview-Videos automatisch zum nächsten Projekt**, solange kein Projekt-Hover aktiv ist. Sie entfernt dazu im Desktopmodus die Loop-Eigenschaft. Die Quelle enthält außerdem eine 1800-ms-Sperre zwischen Wheel-Wechseln. Die Sperre verhindert schnelle Serienwechsel, ersetzt aber kein normales Scrollverhalten. Das Problem ist daher nicht einfach „zu schnelle Animation“. Scrollgeste, Mausposition und Videolaufzeit verändern gemeinsam die Auswahl. Ein stabiler räumlicher Überblick fehlt. **Player:** Klick ins Bild öffnet den vollständigen Film innerhalb der Website. Nach dem Laden wurde ein laufendes Video mit `readyState=4` beobachtet. Der Player bietet ein diskretes Schließen oben rechts, kleine Projektmetadaten links unten und Sound rechts unten. Die Website wird nicht verlassen. Escape ließ in unserem Desktop-Versuch die Wiedergabe laufen; das sichtbare Schließen funktionierte. Nicht als vollständiges Tastatur-Audit zu verstehen. ### Mobile Das Desktopband wird **nicht** zu einer Kachelgalerie. Die Seite bleibt ein vollflächiges, stark seitlich beschnittenes Hochformat-Video. In der vertikalen Mitte rechts steht nur der aktuelle Kundenname mit relativ großem Untertitel. Der Zähler wandert nach rechts unten; Logo und Kontaktkreis bleiben oben. Eine echte emulierte Touch-Geste von unten nach oben wechselte COOP zu Harley-Davidson. Die Seite blieb bei `scrollY=0` und `scrollHeight=844`. Es gibt also auch mobil keinen natürlichen Weg „weiter unten“ in eine Übersicht. Die Swipe-Geste bedeutet Projektwechsel. In beiden geprüften Hauptansichten wurde kein horizontaler Dokumentüberlauf gemessen (`scrollWidth=390`, `innerWidth=390`). Ein Tap öffnete auf Mobile ein natives HTML-Video über der Seite. Der Film wird quer mit großen schwarzen Flächen oben und unten gezeigt; ein laufender Zustand wurde bestätigt. In der initialen Ladeaufnahme waren native Bedienelemente zu sehen, in der späteren laufenden Aufnahme waren sie ausgeblendet. Escape schloss den nativen Layer im ersten Versuch nicht. Das ist ein wichtiges Demo-Kriterium: ein dauerhaft erreichbares, verständliches Schließen vorsehen. Kontakt stapelt Foto und Text in einer schmalen Spalte auf Weiß. Hier funktioniert die Reduktion gut; der Kontakt ist als überschaubarer Screen klarer als die versteckte Projekt-Navigation. ### Für David übernehmen - Ein einziger bewusst gewählter Film als große, unmittelbare Startansicht. - Kleine weiße Namensmarke und sparsame Navigation über Bild. - Eine Projektzeile am unteren Hero-Rand als sichtbare Einladung zur Auswahl. - Filmstart direkt auf der eigenen Seite. - Optional später ein schlichtes Setfoto plus direkter Kontakt. **Für die Demo anders lösen:** Preview in sich loopen lassen; Nutzer bestimmt den Projektwechsel. Normales Scrollen öffnet darunter einen räumlich stabilen Überblick. Begriffe wie „Work“ und „Contact“ sind klarer als ein unbeschrifteter Kreis. Das Abspielen darf das Bildformat nicht verfälschen und muss jederzeit geschlossen werden können. ## Eugen Merher – bewegte Kontaktabzüge Quelle: [eugen-merher.com](https://www.eugen-merher.com/), [Bio](https://www.eugen-merher.com/bio), [Contact](https://www.eugen-merher.com/contact). ### Visuelle Regeln - **Weißer, textorientierter Kopf; direkt darunter Bilder.** Der Desktop-Header ist in der geprüften Ansicht 132 Pixel hoch. Der Name steht groß in zwei Zeilen, die Berufsbezeichnung rechts daneben kleiner und grau. Alles wirkt wie eine sachliche Filmografie, nicht wie ein Werbeauftritt. - **Monospace als durchgehende Stimme.** Name, Navigation, Hover-Titel und Fließtext haben einen Schreibmaschinen-/Drehbuchcharakter. Keine dekorative Typomischung, kein großer Marketingclaim. - **Dichtes, randloses Mosaik.** Mehrere Filmformate werden pro Zeile nebeneinander kombiniert. Die sichtbaren Zeilen bestehen aus unterschiedlich breiten Kacheln; es sind keine gleich großen UI-Karten. Dünne weiße Fugen trennen die Filme. Die Galerie reicht über die gesamte Fensterbreite, während der Headerinhalt in einem schmaleren mittigen Bereich liegt. - **Bewegung entsteht in vielen Bildern zugleich.** Zwischen Start- und Hoveraufnahme ändern sich mehrere Filmframes. Im DOM existierten keine `