hypeakz.io ist neu: eine 3D-Motionsite als Arbeitsprobe

Kompletter Relaunch als scroll-getriebene WebGL-Experience. Die Seite selbst ist jetzt die AI-Demo.

Eine Agentur, die AI-Entwicklung verkauft, muss das an der eigenen Website beweisen. Deshalb ist der Relaunch von hypeakz.io keine klassische Marketing-Seite geworden, sondern eine durchgehende 3D-Experience: Beim Scrollen fliegt die Kamera durch einen Tunnel aus Lichtstrahlen, der in Echtzeit auf dein Verhalten reagiert. Scrollst du schnell, dehnt sich das Licht zu einem Warp-Burst. Hältst du an, beruhigt sich die Szene, damit der Inhalt lesbar bleibt. Jede Sektion der Seite ist eine Station in diesem Flug.

Technisch steckt dahinter eine einzige persistente WebGL-Szene auf Basis von React Three Fiber und three.js. Die Lichtstrahlen sind instanzierte Ribbons mit weichen Glow-Texturen, die Kamera folgt einer gekrümmten Bahn, und die Scroll-Position wird über Lenis interpoliert, damit sich jede Bewegung flüssig anfühlt statt in Mausrad-Stufen zu springen. Die gesamte Choreografie der Texte läuft über framer-motion: Buchstaben-Reveals im Hero, Wort-für-Wort-Masken bei den Headlines, gestaffelte Karten-Einblendungen in den Sektionen.

Performance war dabei kein Nachgedanke. Die 3D-Szene lädt als eigener Chunk nach, während der Inhalt schon steht. Auf Mobilgeräten reduziert die Szene automatisch ihre Instanzen und Pixeldichte, und wer reduzierte Bewegung im System eingestellt hat, bekommt eine ruhige Version ohne Warp-Effekte. Dazu kommen ein helles und ein dunkles Theme, die per Klick wechseln, inklusive eigener Licht-Palette für den Tunnel in beiden Welten.

Auch unter der Haube ist die Seite ein Statement: vollständig crawlbares statisches HTML für Suchmaschinen und AI-Engines, strukturierte Daten nach Schema.org mit allen Services und Open-Source-Projekten, eine llms.txt für AI-Crawler und ein integrierter AI-Berater, der Besucher rund um die Uhr qualifiziert. Genau diese Kombination aus Design, Technik und Auffindbarkeit bauen wir auch für Kunden. Der Unterschied: Auf der eigenen Seite kannst du sie live erleben, bevor du mit uns sprichst.

Der Aufbau folgt einer klaren Dramaturgie. Der Hero empfängt dich mit einer Headline, deren Buchstaben einzeln aus dem Tunnel fliegen, und einem einzigen Call-to-Action: dem kostenlosen Potenzial-Check. Danach führt der Flug durch die Services in großer Typografie, die Referenzprojekte mit unseren Open-Source-Repositories, den Arbeitsprozess in vier Schritten und diese News-Sektion, bis du am Ende beim Kontakt landest. Jede Station hat eine Aufgabe, nichts konkurriert um Aufmerksamkeit, und der weiße Button bleibt die einzige helle Fläche der Seite.

Warum dieser Aufwand für eine Agentur-Website? Weil du bei uns genau das kaufst: die Verbindung aus Design, Motion, AI und sauberem Engineering. Eine Präsentation kann das behaupten, eine Website kann es beweisen. Scroll durch die Seite, schalt das Theme um, sprich mit dem AI-Berater, und du hast in zwei Minuten mehr über unsere Arbeitsweise gelernt als aus jeder Broschüre. Wenn du danach wissen willst, wie so etwas für dein Unternehmen aussieht, ist der Potenzial-Check der direkte Weg.