Moto Card – Eine Website für eine Mitgliedskarte, gebaut wie ein 3D-Produktfilm
Moto Card ist eine Zahlungskarte aus Metall, die nur Mitgliedern offensteht. Die Website ist näher an einem Produktfilm als an einer Landingpage – eine dunkle Bühne, ein langsam enthülltes Objekt und am Ende ein einziger Weg: der Antrag.
Aufgabe
Auf dem Papier ist eine Premiumkarte Massenware – der Wert steckt ganz darin, wie exklusiv und gut gemacht sie wirkt. Fotografie allein macht eine Metallkarte flach, und eine übliche Funktionsliste hätte sie in dieselbe Schublade gelegt wie jedes Bonusprogramm.
Vorgehen
Wir haben die Karte in 3D auf einer dunklen Bühne inszeniert und die Enthüllung an das Scrollen gekoppelt: Das Objekt dreht sich und fängt Licht, während man durch die Seite geht. Der Zugang ist bewusst schmal – eine Handlung, „Zugang beantragen“, und als einziger konkurrierender Link die Mitgliedsbedingungen.
Eine Bühne bauen, keine Seite
Die gesamte Website liegt auf fast Schwarz. Ein einzelner Sockel trägt die Karte unter gerichtetem Licht, und alles andere – Navigation, Text, die eine Handlungsaufforderung – steht kontrastarm darum herum, damit nichts den Blick vom Objekt zieht.
Zurückhaltung ist hier der Mechanismus. Wenige Elemente auf der Seite lassen das Produkt selten wirken.
Bewegung, an das Scrollen gekoppelt
Die Karte ist kein Videoloop, sondern ein Echtzeit-3D-Objekt, gerendert mit Three.js und mit GSAP abgestimmt. Die Scrollposition steuert Drehung und Licht, der Besucher führt also die Enthüllung selbst und betrachtet das Produkt, statt es nur gezeigt zu bekommen.
Weil es Geometrie ist und kein Filmmaterial, bedient dieselbe Datei jede Bildschirmgröße und jede Farbe, ohne dass neu gerendert werden muss.
Eine Tür, die nur Anträge kennt
Es gibt kein Anmeldeformular und keine Preistabelle. Eine Handlung – Zugang beantragen – und daneben ein Link zu den Mitgliedsbedingungen. Das ist die gesamte Umwandlungsfläche, und sie leistet fürs Positionieren mehr als jeder Text über Exklusivität.
Umsetzung
Die Website ist in Webflow gebaut, GSAP führt die Bewegungsabfolge, Three.js rendert die Karte, und eine Ebene für weiches Scrollen hält die an das Scrollen gekoppelte Animation über Browser hinweg stabil. Webflow hält Texte und Bilder beim Kunden änderbar, ohne den Animationscode anzufassen.
Was entstanden ist
- Karte in Echtzeit-3D mit Three.js auf dunkler Produktbühne
- Enthüllung entlang des Scrollens, abgestimmt mit GSAP
- Ein einziger Weg zur Umwandlung: der Antrag
- In Webflow gebaut, damit Inhalte beim Kunden pflegbar bleiben
Häufige Fragen
Eine Metallkarte wird nach Verarbeitung und Gewicht beurteilt, und genau das verliert flache Fotografie. In Echtzeit gerendert kann der Besucher sie unter wanderndem Licht drehen, und eine Datei deckt alle Bildschirmgrößen und Farben ab.
Ja. Die Enthüllung hängt an der Scrollposition und nicht an einer festen Zeitachse, und die Ebene für weiches Scrollen hält sie über Browser hinweg stabil; die Geometrie ist auf jedem Bildschirm dieselbe.
Weil die Karte nur auf Antrag zu haben ist. Eine Preistabelle oder ein Anmeldeformular würde der Positionierung widersprechen, deshalb besteht die ganze Umwandlungsfläche aus einer Antragsaktion.
Ein Blick in die Website
„Die Website fühlt sich eher wie ein Produkterlebnis an als wie eine normale Landingpage. Die 3D-Animation der Karte war ein großer Teil dessen, was wir wollten, und Sakura hat sie großartig umgesetzt.“