Wenn der Markenname zur Oberfläche wird
„Jeder Stein hat eine Herkunft.“ Mit diesem Satz beginnt die Länder-Seite, und sie macht ihn sofort begreifbar. Statt einer Dropdown-Liste mit Ländernamen dreht sich ein interaktiver Globus, gebaut mit Globe.gl. Jedes Herkunftsland ist ein Punkt auf der Kugel, seine Höhe steht für die Zahl der Stücke von dort.
Ein Tipp auf Brasilien, den mit Abstand größten Posten, zeigt alle Mineralien von dort. Von den Schwergewichten wie Uruguay, Madagaskar und Bolivien bis hinunter zu Einzelstücken aus Deutschland. Der Kunde reist über das Sortiment, statt sich durch Kategorien zu klicken.
Herkunft ist im Luxussegment kein Detail
Bei einem Sortiment aus Unikaten ist die Herkunft nicht nur eine Eigenschaft, sondern ein großer Teil des Werts. Provenienz schafft Vertrauen, und genau das verkauft im Premium-Bereich. Eine flache Länder-Auswahl vergräbt diese Information in einem Formularfeld.
Der Globus dreht das um. Er macht aus der Frage „Woher kommt mein Stein?“ den Einstieg in die Marke. Wer geografisch stöbert, bleibt länger, entdeckt mehr und versteht ganz nebenbei, warum dieses Sortiment im europäischen Markt besonders ist. Das passt zur Positionierung, statt ihr im Weg zu stehen.
Der Globus ist nur die Spitze der Datenpipeline
Eine schöne Visualisierung ist schnell behauptet. Tragfähig wird sie erst durch die Daten darunter. Jedes der über 1.300 Unikate trägt knapp 40 strukturierte Metafelder, darunter einen sauber normalisierten Fundort. Erst diese Disziplin macht den Globus möglich: Er ist keine Deko, sondern eine zweite Ansicht auf exakt dieselben Produktdaten, die auch die Filter im Shop speisen.
Aufgebaut wird das nicht von Hand. Die automatisierte Produkt-Pipeline befüllt die Metafelder beim Anlegen jedes Artikels mit. Ohne diese Vorarbeit gäbe es keine verlässlichen Herkunftsdaten und damit auch keinen Globus. Wie diese Pipeline aus Foto-Kammer, eigener Hardware und KI funktioniert, steht im ausführlichen Fallbericht.
Wie es technisch gebaut ist
Globe.gl auf WebGL
Three.js im Headless-FrontendDer Globus läuft als WebGL-Szene direkt im bestehenden Next.js-Storefront. Er wird erst geladen, wenn die Seite ihn braucht, und kostet den Rest des Shops dadurch keine Ladezeit.
Eine Quelle, zwei Ansichten
Dieselben Metafelder wie der ShopDie Punkte auf dem Globus kommen aus denselben Fundort-Metafeldern, die auch die normalen Shop-Filter verwenden. Keine Parallel-Daten, keine Pflege an zwei Stellen, kein Auseinanderlaufen.
Direkt verlinkt
Vom Land in die AuswahlJeder Globus-Punkt führt direkt in das gefilterte Listing für genau dieses Herkunftsland. Aus der Geste auf der Kugel wird ein konkreter Schritt in den Kauf.
Im Designsystem
Teil der Marke, kein FremdkörperTypografie, Farben und Bewegung folgen demselben System wie der restliche Auftritt. Der Globus wirkt wie ein Teil der Marke, nicht wie ein zugekauftes Widget.
Live ansehen
Eine Idee, die nur mit sauberen Daten funktioniert?
Genau das ist unser Bereich: Oberfläche und Datenpipeline aus einer Hand. Ein Erstgespräch klärt, ob es passt.