Industrie und Infrastruktur stehen vor einer komplexen Aufgabe: Sie müssen weniger Energie verbrauchen und CO₂ ausstoßen, ohne dabei an Leistung oder Zuverlässigkeit zu verlieren. Innomotics entwickelt Motoren, Antriebssysteme und digitale Services, die Unternehmen auf diesem Weg unterstützen.
Doch wie erzählt man von Elektrifizierung, Digitalisierung und industrieller Transformation, ohne bei technischen Daten und klassischen Produktseiten stehenzubleiben?
Für Innomotics entwickelten wir mit der Electrosphere eine browserbasierte Echtzeit-3D-Welt, die komplexe Zusammenhänge räumlich erlebbar macht. Vier individuell inszenierte Globes bilden den Ausgangspunkt für interaktive Reisen durch industrielle Zukunftsthemen.
Besucherinnen und Besucher schauen dabei nicht nur zu. Sie bewegen sich durch Geschichten, entdecken Anwendungen und erleben, welche Rolle moderne Antriebstechnologien in einer effizienteren und stärker vernetzten Welt spielen.
Unsere Aufgabe bestand darin, die zentralen Themen von Innomotics nicht wie auf einer klassischen Corporate Website zu erklären, sondern sie als Geschichten erlebbar zu machen.
Digitalisierung, Urbanisierung und Elektrifizierung sind zunächst große, abstrakte Begriffe. In der Electrosphere werden daraus konkrete Orte und Anwendungen.
Markierte Bereiche auf den Globes führen von globalen Entwicklungen zu Themen wie Rechenzentren, industriellen Wärmepumpen, Wasseraufbereitung oder stabilen Stromnetzen. Dort zeigen Videos, interaktive Inhalte und Produktansichten, wie Motoren, Umrichter und digitale Systeme zusammenspielen.
Die virtuelle Assistentin Ina unterstützt zusätzlich dabei, relevante Themen und Produkte innerhalb der Electrosphere zu entdecken.
So entsteht eine Verbindung zwischen übergeordneten Herausforderungen und der Technologie, mit der Innomotics ihnen begegnet.
Die Ausgangsansicht bildet die Electrosphere. Auf ihr sind sämtliche Hotspots der Experience sichtbar und geben einen Überblick über die verschiedenen Themen, Anwendungen und Geschichten von Innomotics. Von dort aus können Besucherinnen und Besucher die Welt aus drei thematischen Perspektiven betrachten: Digitalization, Urbanization und Electrification. Dabei wechseln sie nicht in unterschiedliche Welten. Stattdessen verändert sich die visuelle Inszenierung derselben Erde. Jeder Themenbereich erhält einen eigenen Look und wirkt gleichzeitig als Filter: Es werden gezielt die Hotspots hervorgehoben, die zum jeweiligen Schwerpunkt gehören.
So lassen sich komplexe Inhalte strukturiert erschließen, ohne den räumlichen Zusammenhang zu verlieren. Die Erde bleibt stets der gemeinsame Bezugspunkt – ihre Darstellung verändert sich abhängig davon, durch welche thematische Perspektive sie betrachtet wird. Jeder Globe besitzt eine eigene visuelle Sprache und erzählt Themen über individuell inszenierte Story-Schritte. Kamera, Animation, Inhalte und Übergänge greifen dabei ineinander und führen Besucherinnen und Besucher gezielt durch die jeweilige Geschichte. Gleichzeitig bleibt Raum für Interaktion und Exploration.
Die Electrosphere verbindet damit zwei Prinzipien: geführtes Storytelling und freie Entdeckung. Nutzerinnen und Nutzer können einer inszenierten Geschichte folgen oder selbst zwischen Themen, Hotspots und Anwendungen navigieren.
Das Ergebnis ist keine dreidimensionale Website-Kulisse, sondern eine eigenständige digitale Umgebung, in der Inhalte, Bewegung und Interaktion gemeinsam erzählen.
Im Mittelpunkt der Experience
Eine der größten technischen Herausforderungen lag hinter dem sichtbaren Erlebnis. Die Geschichten sollten nicht fest in der Anwendung programmiert sein. Innomotics sollte Story-Schritte, Inhalte und Inszenierung eigenständig verändern und weiterentwickeln können.
Dafür setzten wir auf Payload als Headless CMS und richteten den Content Editor gezielt auf die Anforderungen der Electrosphere aus. Statt lediglich Texte und Medien zu verwalten, bildet die Redaktion darin auch die Struktur der Geschichten, Hotspots und visuellen Abläufe ab. Somit werden nicht nur klassische Inhalte verwaltet, sondern ein wesentlicher Teil der visuellen Dramaturgie der Electrosphere gesteuert.
Innomotics kann darin unter anderem Kapitel, Story-Schritte, Texte, Bilder, Videos, Kamerapositionen, Timings und Animationen konfigurieren.
Das CMS übernimmt damit einen Teil der Regie.
Besonders anspruchsvoll war die Verbindung zwischen redaktioneller Pflege und räumlicher Inszenierung. Ein im CMS definierter Story-Schritt muss im Frontend exakt zur richtigen Kamerafahrt, Globe-Animation und visuellen Veränderung führen. Die Pflege musste deshalb gleichzeitig flexibel, nachvollziehbar und möglichst intuitiv bleiben. Konfigurierbar statt fest programmiert, damit kann Innomotics nicht nur Inhalte austauschen, sondern die Dramaturgie der Experience selbst weiterentwickeln.
Inhalte lassen sich sprachübergreifend pflegen und konsistent ausspielen – ohne die Struktur der Experience mehrfach aufbauen zu müssen.
Kapitel und einzelne Story-Schritte können flexibel aufgebaut, neu angeordnet und inhaltlich weiterentwickelt werden.
Hotspots lassen sich gezielt Themenbereichen zuweisen und abhängig von der gewählten Globe-Ansicht ein- oder ausblenden.
Thematische Inhalte und Produktinformationen können mit einander verknüpft und direkt aus den jeweiligen Story-Kontexten erreichbar gemacht werden.
Redaktionelle Inhalte lassen sich flexibel kombinieren und innerhalb der Story passend zur jeweiligen Szene ausspielen.
Kamerapositionen können pro Story-Schritt definiert werden, sodass Blickwinkel und Fokus gezielt zur jeweiligen Erzählung passen.
Übergänge, Geschwindigkeit und Abläufe lassen sich zeitlich aufeinander abstimmen, damit Story, Kamera und Animationen sauber zusammenspielen.
Animationen können gezielt einzelnen Story-Schritten zugeordnet und passend zum jeweiligen visuellen Ablauf ausgelöst werden.
Darstellung, Fokus und Inszenierung des Globes lassen sich je nach Story-Schritt verändern und gezielt an den erzählerischen Kontext anpassen
Payload bildet auch bei der Electrosphere die redaktionelle Basis. Welche Möglichkeiten das Headless CMS darüber hinaus für flexible Content-Strukturen und individuelle Workflows bietet, zeigen wir in unserem Artikel.
Besonders viel Detailarbeit steckte in den Übergängen zwischen den einzelnen Story-Schritten.
Während Nutzerinnen und Nutzer einen fließenden Übergang erleben, müssen im Hintergrund mehrere Systeme synchron reagieren: Die Kamera fährt in eine neue Position, der Globe verändert seinen visuellen Zustand, Animationen starten oder enden und neue Inhalte werden eingeblendet.
Die Herausforderung bestand deshalb weniger in einer einzelnen Animation als im Zusammenspiel des gesamten Systems. Redaktionelle Konfiguration und Echtzeitdarstellung mussten exakt aufeinander abgestimmt sein. Auch die Übergänge zwischen den unterschiedlichen 3D-Globes erforderten eine eigene Inszenierung. Statt harter Szenenwechsel sollte sich die Experience wie eine zusammenhängende Welt anfühlen.
Diese enge Verzahnung von Content-Modell, Kamera-System, Animation und Echtzeit-Rendering bildet einen der zentralen technischen Bausteine der Electrosphere.
Die Electrosphere soll nicht nur Aufmerksamkeit wecken, sondern den Zugang zu komplexen Themen erleichtern. Deshalb haben wir sie so gestaltet, dass sich die Welt von Innomotics auf großen Messebildschirmen ebenso entdecken lässt wie am Computer oder auf dem Smartphone – direkt im Browser, ohne zusätzliche App.
Dabei geht es nicht darum, dieselbe Darstellung einfach kleiner zu zeigen. Wir haben Ansichten, Navigation und Bedienung auf die unterschiedlichen Nutzungssituationen abgestimmt. Auf der Messe wird die Electrosphere zum gemeinsamen Einstieg in die Themen von Innomotics. Auf dem eigenen Gerät können Interessierte selbst entscheiden, welche Anwendungen sie näher kennenlernen und welche Geschichten sie vertiefen möchten.
Für Innomotics entsteht damit ein vielseitig einsetzbares Kommunikationsangebot: Dieselbe Erlebniswelt dient der Präsentation vor Ort und der eigenständigen Erkundung. So bleiben die Inhalte nicht an einen Messestand oder einen einzelnen Moment gebunden, sondern lassen sich auch nach dem ersten Kontakt im eigenen Tempo entdecken.
Während die Videos in der Webversion über ein CDN gestreamt werden, haben wir für den Messeeinsatz einen speziellen Offline-Wrapper entwickelt. Dieser spielt die Videos in hoher Auflösung direkt vom Gerät ab – ohne auf eine stabile Internetverbindung vor Ort angewiesen zu sein. So bleibt die Inszenierung auch ohne Online-Streaming vollständig erlebbar.
Dabei bleibt Payload die zentrale Inhaltsquelle für Web- und Messeversion. Änderungen aus dem CMS werden per Synchronisierung in den lokalen Inhaltsstand übernommen. Statt eine eigenständige Messeversion separat zu pflegen, greifen beide Varianten auf dieselbe redaktionelle Grundlage zurück. So verbinden wir die Unabhängigkeit im Offline-Betrieb mit einer zentral gesteuerten Weiterentwicklung der Electrosphere.
Seit dem 1. Oktober 2025 ist die Innomotics Electrosphere live und stand damit pünktlich zur SPS 2025 in Nürnberg zur Verfügung.
Eine Erde, vier visuelle Perspektiven und Geschichten, deren Inszenierung sich über das CMS verändern lässt: Hinter der Electrosphere steckt weit mehr als ein animierter Globus. Wir mussten redaktionelle Inhalte, Benutzeroberfläche und Echtzeit-3D so zusammenführen, dass Kamerafahrten, Animationen und Story-Schritte ineinandergreifen. Gleichzeitig blieb eine hohe Bildrate ein durchgängiges Entwicklungsziel.
Das technische Fundament bilden Next.js, React und TypeScript. Darauf baut die Verbindung zwischen interaktiver Oberfläche und redaktionell gesteuerter Experience auf. Für die räumliche Inszenierung setzten wir auf Babylon.js und WebGL: Die Erde, ihre unterschiedlichen Darstellungen, Kamerabewegungen und visuellen Effekte entstehen direkt im Browser in Echtzeit. Die Herausforderung lag dabei nicht allein im Rendering, sondern darin, diese Darstellung mit wechselnden Inhalten und Interaktionen zu einem zusammenhängenden Erlebnis zu verbinden.
Das Payload CMS bildet die redaktionelle Grundlage und ist direkt in das Next.js-Projekt eingebunden. Den Content Editor richteten wir gezielt auf Geschichten, Hotspots und die Konfiguration der Inszenierung aus. Dadurch reicht eine redaktionelle Entscheidung bis in die 3D-Szene: Ein Story-Schritt beschreibt nicht nur, welcher Inhalt erscheint, sondern auch, aus welcher Perspektive die Erde gezeigt wird und wie sich die Szene verändert. Genau diese Verbindung zwischen Content-Struktur und visueller Wiedergabe erforderte besonders viel konzeptionelle und technische Detailarbeit.
Für Animation und Interaktion gehören außerdem GSAP, Motion und Rive zum Stack. Entscheidend war jedoch nicht die Anzahl der Werkzeuge, sondern die passende Umsetzung jeder einzelnen Bewegung. Wir wählten Animationen sorgfältig aus und verteilten die anfallenden Berechnungen gezielt auf CPU und GPU. Dabei kombinierten wir unter anderem Fragment-Shader für grafische Effekte mit nativen CSS-Animationen für die Benutzeroberfläche. Gestaltung und Rechenaufwand wurden gemeinsam betrachtet – mit dem Ziel, ausdrucksstarke Übergänge zu schaffen, ohne die verfügbaren Ressourcen unnötig zu belasten. Angepasste Rendering-Profile berücksichtigen zusätzlich die Voraussetzungen mobiler Geräte.
Auch die Weiterentwicklung ist im technischen Aufbau mitgedacht: Zum Entwicklungssetup gehören die Generierung von TypeScript-Typen aus Payload, ein eigener Test-Befehl für die Globe-Logik und automatisierte Codeprüfungen. Denn eine Experience, deren Geschichten und Inszenierungen veränderbar bleiben sollen, braucht nicht nur eine überzeugende Oberfläche, sondern auch eine nachvollziehbare technische Grundlage.
So liegt die eigentliche Entwicklungsleistung im Zusammenspiel: Redaktionelle Flexibilität, präzise Animation und performante Echtzeitgrafik müssen gleichzeitig funktionieren. Erst daraus wird eine digitale Welt, die sich ebenso gezielt erzählen wie eigenständig erkunden lässt.
Die Video- und Produktrenderings der Storytelling-Ebene sowie Teile des User Interfaces (UI) wurden von verschiedenen externen Agenturen erstellt und bereitgestellt. Unser Leistungsumfang umfasste die Entwicklung des interaktiven Realtime-Globus, die technische Umsetzung der Anwendung sowie die Integration und Implementierung des Content-Management-Systems (CMS) Payload.
Produkte, Technologien und Zukunftsthemen lassen sich nicht immer in Seitenstrukturen und Textblöcke übersetzen. Manchmal müssen sie erkundet werden.
Wir entwickeln digitale Experiences, die Storytelling, Interaktion und Technologie zu einem eigenständigen Erlebnis verbinden.
