SHIO Hamburg
Webdesign · Motion · Frontend — Markenauftritt für eine Hamburger Handroll-Bar & Omakase
Die Startseite ist kein Menü, sondern das Gebäude.
SHIO vereint drei sehr unterschiedliche Konzepte unter einer Marke: eine unterirdische Handroll-Bar (Downstairs) und eine Premium-Omakase (Upstairs) als zwei Läden in einem Haus, dazu das stadtweite Catering (Beyond). Statt einer klassischen Navigation habe ich das Grundriss-Prinzip zur Interaktion gemacht — die Startseite ist ein schwarz-weißes WebGL-Treppenhaus, in dem man sein Stockwerk wählt und farb-kontinuierlich in die jeweilige Welt hineinzoomt. Hinter dem Spektakel steckt Substanz: Der ganze Canvas liegt über einer voll crawlbaren HTML-Seite, und die Downstairs-Welt ist eine aus ersten Prinzipien gebaute, scroll-gesteuerte Video-Inszenierung.
Wähl dein Stockwerk
Eine Marke, drei eigene Auftritte
Live-Ansichten von shio-hamburg.de
Craft, der nicht auf Kosten von SEO geht
Navigation als begehbare Architektur
Die Startseite ist ein WebGL-Canvas (Pixi.js): eine schwarz-weiße Treppengeometrie, in der Downstairs unten, Upstairs oben und Beyond in der Mitte liegt. Ein Klick zoomt die Kamera und blendet die Seitenfarbe kontinuierlich in die Zielwelt über — der Übergang wirkt wie eine Bewegung durchs Haus, nicht wie ein Seitenwechsel.
Spektakel, das crawlbar bleibt
Der gesamte Canvas ist für Suchmaschinen und Screenreader ausgeblendet und liegt über einer echten, voll indexierbaren HTML-Seite mit Überschrift, Navigation und Kontaktdaten. Ohne JavaScript oder mit Screenreader bleibt der Auftritt vollständig nutzbar — Progressive Enhancement statt Effekt gegen Auffindbarkeit.
Cinematischer Video-Scroll, aus ersten Prinzipien
In der Downstairs-Welt steuert der Scroll ein Video Frame für Frame. Lenis liefert das Smooth-Scrolling, eine einzige Render-Schleife hält alles synchron, und der Clip wird als Blob in den Arbeitsspeicher geladen, damit jeder Sprung im Video sofort sitzt statt auf Nachladen zu warten — auf Desktop wie Mobile. Der Übergang zu den Handrolls scrubbt sogar drei Videospuren aus einem Clip in diagonale Segmente.
Drei Welten, drei Art-Directions, ein System
Downstairs (Neon-Underground), Upstairs (Gold-Premium) und Beyond (minimal) haben je eine eigene Bildsprache, Typografie und Farbwelt — zusammengehalten nur durch das 塩-Zeichen und einen schwebenden Etagen-Umschalter. Eine Codebase, drei Markenwelten, ein durchgängiger Auftritt.
Was drinsteckt
- WebGL-Treppenhaus als Eintritt (Pixi.js) mit farb-kontinuierlichem Zoom in die gewählte Welt
- Scroll-gesteuerter Video-Film in Downstairs, inklusive Drei-Spur-Diagonalübergang aus einem einzigen Clip
- Vollwertiges Reduced-Motion-Erlebnis — statisches Poster und Inhalte im normalen Fluss statt nur abgeschalteter Animation
- Datengetriebene Speisekarte mit Kategorien, Varianten und Preisen aus einer getypten Datenschicht
- Local-SEO mit JSON-LD für zwei getrennte Google-Business-Profile an einem Standort
- Eigene, abhängigkeitsarme Deploy-Pipeline mit Schutz gegen versehentliches Live-Stellen eines Test-Builds
Womit es gebaut ist
SHIO Hamburg live ansehen
Am besten selbst durchs Haus scrollen — oder direkt einen Auftritt in dieser Liga anfragen.