Eine Marke, eine eigene Welt: das TSAM Flagship-Showcase
Eine filmische Scroll-Website: Canyon-Landschaft, ein Metallportal, das beim Scrollen bildfüllend wird, dahinter eine türkise Küste, und am Ende zieht sich dieselbe Welt in ein echtes Browser- und Handy-Mockup zurück. Gebaut ohne Framework, ohne WebGL und ohne externe Skripte, damit es auch auf dem Handy sauber läuft.
Ausgangslage
Die meisten Unternehmenswebsites sehen aus wie das Template, aus dem sie kommen. Ich wollte ein Stück, das in wenigen Sekunden zeigt, dass sich eine Website wie ein Ort anfühlen kann statt wie eine Seite, und das trotzdem benutzbar bleibt: lesbarer Text, klarer Kontaktweg, kein Plugin-Wildwuchs.
Aufgabe
Eine Demo bauen, die gleichzeitig Portfolio-Stück, Social-Media-Material und Beleg für Handwerk ist. Fünf Szenen, ein durchgehender Scroll, am Ende ein echter Kontakt-Aufruf. Sie musste auf iPhone und Android laufen, nicht nur am großen Monitor.
Vorgehen
- Konzept zuerst: Szenenfolge, Kameralogik, Texte und Bildbriefs standen fest, bevor eine Zeile Code entstand. Jeder Effekt hat eine Aufgabe in der Geschichte.
- Vier Iterationen an einem Tag: Ein WebGL-Portalrahmen mit Three.js wirkte im echten Browser flach und brauchte drei externe Bibliotheken. Er wurde durch einen Neuaufbau ohne Abhängigkeiten ersetzt.
- Am echten Handy getestet: Das erste ovale Portal verzog sich auf hohen Handy-Displays zu einer Blattform. Der Fix hält das Seitenverhältnis des Portals beim Wachsen konstant.
- Safari-sicheres Loch: Das durchsichtige Portal nutzte eine Clip-Path-Füllregel, die WebKit nicht verlässlich beherrscht. Es wurde als gegenläufig gewickelter Ring mit Standard-Füllregel neu gebaut.
- Gewicht reduziert: Das Küstenvideo kommt je nach Bildschirm und Verbindung in 720p oder 1080p, die Schrift liegt selbst gehostet, Bilder sind WebP mit JPEG-Fallback.
Technische Entscheidungen
- Kein Framework, kein Build-Schritt: reines HTML, CSS und JavaScript. Die Seite öffnet sich auch per Doppelklick auf die Datei.
- Eigener Scroll-Treiber: Eine kleine requestAnimationFrame-Schleife übersetzt die Scrollposition in Szenenfortschritt. Kein GSAP, kein ScrollTrigger.
- Portalrahmen in CSS: gehrungsgeschnittene Metallbalken, extrudierte Seiten, Mint-Innenkante, Bodenschatten und Lichtspill, alles CSS. Keine 3D-Bibliothek.
- In Bildkoordinaten verankert: Das Portal steht bei jedem Seitenverhältnis auf der Felskante, weil seine Position relativ zum Bild definiert ist, nicht zum Viewport.
- Fallbacks: Ohne JavaScript oder bei reduzierter Bewegung zeigt die Seite eine statische Fassung mit beiden Bildern, dem Text und den Kontakt-Buttons.
- Gemessen statt geraten: Scrolltiefe je Szene und CTA-Klicks werden anonym mit GoatCounter gezählt (keine Cookies). So sehe ich, wie weit Besucher wirklich kommen.
Ergebnis
Das Showcase ist unter t-s-a-m.de/showcase live und die erste Referenz, die ich verschicke. Laborwerte (Lighthouse, Mobile-Emulation, gedrosseltes 4G) nach dem Optimierungsdurchgang:
- Gesamtgewicht auf dem Handy: vorher 6,9 MB, nachher 2,0 MB.
- First Contentful Paint: vorher 2,3 s, nachher 0,8 s. Speed Index: vorher 2,3 s, nachher 0,9 s.
- Largest Contentful Paint bleibt im Labor bewusst bei rund 5 s: Die Bühne wird erst eingeblendet, wenn beide Vollbilder dekodiert sind, damit der erste Frame nie halbfertig aussieht.
- Barrierefreiheit: 100 (lokale Lighthouse-Messung, September 2026).
Keine Kundenzahlen, keine Traffic-Behauptungen: Das ist ein Konzeptprojekt, kein Kundenauftrag. Texte und Motive sind Entwurfsmaterial.
Was das für dein Projekt bedeutet
Individuelle Bildwelt statt Stockfotos, eigene Gestaltung statt Template, interaktive Umsetzung, die auf dem Handy läuft. Das ist Leistung A auf der Startseite: Website entwickeln oder verbessern. Umfang und Kosten klären wir in einem kurzen Gespräch, bevor irgendetwas startet.
Meine Rolle und der Stack
Konzept, Bildwelt, Umsetzung, Test und Hosting: Ron Portner. Landschafts- und Küstenmotive sowie das kurze Küstenvideo sind KI-generiert (Higgsfield) nach meinen Briefs. Alles andere ist HTML, CSS und JavaScript.
Du willst einen Auftritt, der sich so anfühlt, mit deiner eigenen Bildwelt? Kostenloses Erstgespräch, ca. 15 Minuten, unverbindlich.
Projekt mit Ron besprechen