Zur Auswahl, 17.09.2026
Hero animiert.
Auftrag (17.09.2026, 21:42):
„der hero auf startseite soll animiert sein nach dieser vorlage. aber in unserem design: https://library.relume.io/components/header-76“
Nachtrag (21:45):
„final werden es vielleicht zehn Bilder, vorerst arbeitest du mit Dopplungen der vorhandenen fünf.“
Eine Referenz „heute“ und drei Fassungen, jede in voller Hero-Höhe untereinander. Die Fassungen leben nur auf dieser Seite und fassen das System nicht an.
In jeder Fassung gilt: sobald der Zeiger über dem Kachelfeld steht oder eine Kachel den Tastaturfokus hat, halten alle Ströme an. Bei eingestellter Bewegungsreduktion steht alles still. Unsere Kacheln sind Links, anders als in der Vorlage, und ein wanderndes Klickziel wäre unbedienbar.
Es gibt heute fünf Fotos. Die Spalten arbeiten mit Dopplungen; die Bildlisten stehen an genau einer Stelle im Quelltext dieser Seite, und die Umlaufzeit rechnet sich aus der Kachelzahl statt fest zu stehen. Kommen fünf Motive dazu, ist das ein Eintragen, keine Rechnung.
Heute
Es läuft nichts. Fünf Bildkacheln und die Shop-Kachel stehen fest im Versatz, die linke Spalte 153 px höher als die rechte.
Vergleichsanker. Unverändert aus seiten-src/startseite.html.
Weil Sie mehr als einen Elektrogroßhandel brauchen.
Von der Steckdose bis zur Industrieanlage.
Von fachkundiger Beratung bis zum passenden Produkt.
Damit Sie sich aufs Wesentliche konzentrieren können.
Beide Spalten laufen, die Shop-Kachel läuft mit
Beide Kachelspalten wandern nach oben, in derselben Richtung, die linke 153 px voraus. Die Shop-Kachel ist eine Kachel des rechten Stroms und wandert mit: sie steht beim Aufruf an zweiter Stelle im Bild, läuft nach oben hinaus und kommt alle 33,5 Sekunden wieder. Der Text links steht still.
Der Preis dieser Fassung steht in demselben Satz: die Shop-Kachel ist der einzige Handlungsaufruf im Hero, und sie ist zeitweise gar nicht im Bild. Wer in der falschen Sekunde ankommt, sieht sechs Fotos und keinen Knopf. Fassung 2 ist genau die Antwort darauf.
Gleiche Richtung und nicht gegenläufig, und das ist die zweite Entscheidung dieser Fassung: zwei gegeneinander laufende Spalten erzeugen an der 20-px-Fuge eine Scherkante, und das Auge klebt an der Kante statt an den Bildern. Gleiche Richtung mit räumlichem Versatz liest sich als ein ruhiger Strom, der zufällig zwei Spalten breit ist. Die Vorlage macht es genauso.
Umlauf links 35,0 s (1710 px), rechts 33,5 s (1638 px, die Shop-Kachel ist 72 px flacher als eine Bildkachel). Beide laufen mit denselben 48,9 px/s, weil die Umlaufzeit aus der Höhe gerechnet wird und nicht aus der Kachelzahl. Überfahren oder Fokus hält beide Ströme an, bei Bewegungsreduktion steht alles.
Weil Sie mehr als einen Elektrogroßhandel brauchen.
Von der Steckdose bis zur Industrieanlage.
Von fachkundiger Beratung bis zum passenden Produkt.
Damit Sie sich aufs Wesentliche konzentrieren können.
Beide Spalten laufen, die Shop-Kachel steht fest
Die linke Spalte läuft wie in Fassung 1. Rechts ist die Spalte in drei Zonen geteilt: ein Strom oben, die blaue Shop-Kachel fest an ihrem Platz, ein Strom unten. Die Shop-Kachel ist der einzige Handlungsaufruf in diesem Bereich und bleibt deshalb stehen, während die Bilder um sie herumlaufen.
Gelöst über drei echte Zonen und nicht über eine schwebende Kachel: bei einem durchgehenden Strom mit aufgelegter Shop-Kachel würden die Bilder dahinter durchwandern und an den Kanten hervorblitzen. So stoßen die beiden Fenster mit dem normalen Spaltenabstand an die Kachel an, wie zwei Kacheln es sonst auch tun. Es liegt nichts unter ihr und es reißt keine Lücke.
Links 35,0 s (1710 px) · rechts oben und unten je 21,0 s (1026 px) · alle drei Ströme 48,9 px/s, also exakt gleich schnell · Überfahren oder Fokus hält alle drei an.
Weil Sie mehr als einen Elektrogroßhandel brauchen.
Von der Steckdose bis zur Industrieanlage.
Von fachkundiger Beratung bis zum passenden Produkt.
Damit Sie sich aufs Wesentliche konzentrieren können.
Nur eine Spalte läuft
Die linke Spalte wandert, die rechte steht genau wie heute, mit der Shop-Kachel an ihrem Platz. Die ruhige Fassung.
Sie hat einen Vorzug, den die beiden anderen nicht haben: der Blick bekommt einen festen Bezugspunkt. Wo alles wandert, gibt es nichts, woran das Auge sich festhält; hier steht die halbe Fläche, und die Bewegung wird zum Akzent statt zur Grundbedingung. Der Preis ist, dass die rechte Spalte nie mehr als ihre drei Motive zeigt.
Umlauf 35,0 s links (1710 px, 48,9 px/s) · rechts fest · Überfahren oder Fokus hält den Strom an.
Weil Sie mehr als einen Elektrogroßhandel brauchen.
Von der Steckdose bis zur Industrieanlage.
Von fachkundiger Beratung bis zum passenden Produkt.
Damit Sie sich aufs Wesentliche konzentrieren können.
Vermerk: Vorführseite, kein Systemstand. system.css, tokens.css, komponenten/ und seiten-src/ sind unberührt. Nach der Wahl wandert genau eine Fassung ins System. Die Messwerte zur Bewegung liegen in _verify/hero-2026-09-17/.