Atomic
Eine bewegungsorientierte Marketing-Website für ein SaaS-Analytics-Produkt, die so konzipiert ist, dass die Seite beim Scrollen eine Geschichte erzählt.
React 19
Vite
Tailwind CSS 4
GSAP
Locomotive Scroll
Framer Motion
Swiper
Übersicht
Atomic ist die Landingpage für ein SaaS-Analytics-Produkt mit einem zentralen Versprechen: Sie wissen immer genau, was in Ihrem Unternehmen geschieht. Die Seite hat eine einzige, anspruchsvolle Aufgabe: Sie muss Besucher innerhalb eines Scroll-Durchlaufs davon überzeugen, dass das Produkt modern wirkt und eine Registrierung lohnenswert ist. Ich habe sie als One-Page-Erlebnis konzipiert, bei dem jede Sektion beim Hinabscrollen animiert erscheint und das Ganze mit Social Proof abschließt.
Das Problem
Eine Landingpage wird in ihren ersten Sekunden beurteilt. Die meisten Marketing-Templates wirken statisch und austauschbar, und in dem Moment, in dem ein Team zu „Premium“-Animationen greift, wird das Scrollen ruckelig und die Ladezeiten explodieren. Die Aufgabe war es, genau den Punkt zu treffen, den die meisten Websites verfehlen: Bewegungsabläufe, die wirklich kinoreif wirken, ohne gegen den Besucher zu arbeiten oder die Botschaft zu begraben.
Meine Rolle & Vorgehensweise
Ich habe dieses Projekt von Anfang bis Ende verantwortet: Layout, visuelles Design, Textstruktur und die Animation. Anstatt Effekte über die Seite zu verstreuen, habe ich den gesamten Scroll-Vorgang als eine choreografierte Sequenz behandelt und jede Sektion so aufgebaut, dass sie zum richtigen Zeitpunkt erscheint. Die Regel, auf die ich immer wieder zurückkam, war, dass die Bewegung dem Pitch dienen musste. Sie sollte den Blick zuerst auf die Überschrift lenken, dann auf das Produkt und schließlich auf den Nachweis, anstatt als reine Dekoration zu dienen.
Tech-Stack
Wichtigste Features
Galerie
Herausforderungen & Lösungen
Das Timing der Textanimation war der kniffligste Teil. SplitText vermisst eine Überschrift und zerlegt sie in Zeilen. Wenn dies jedoch geschieht, bevor die Webfonts vollständig geladen sind, verschiebt sich das Layout und der Split bricht. Ich habe jede Textanimation hinter document.fonts.ready geschaltet, sodass das Aufteilen erst stattfindet, wenn die echten Schriften geladen sind. Das beseitigte das Flackern und das unerwünschte Layout-Reflow.
Die Koordination von drei Animationssystemen war die andere Herausforderung. Die Smooth-Scroll-Engine von GSAP, der Fortschrittsbalken von Framer Motion und Locomotive beanspruchen alle die Kontrolle über die Scroll-Position. Ich habe GSAP ScrollSmoother zur Single Source of Truth gemacht und die anderen Systeme auf die erzeugten Werte aufgesetzt, wodurch alles synchron blieb. Auf Touch-Geräten habe ich das sanfte Scrollen bewusst zurückgefahren, damit Telefone reaktionsschnell blieben, anstatt sich träge anzufühlen.
Ergebnis
Das Ergebnis ist eine schnelle Landingpage mit Scroll-Choreografie auf Produktionsniveau – genau die Art von flüssiger Bewegung, die viele Marketing-Websites anstreben, aber nur wenige sauber umsetzen. Sie funktioniert sowohl als vollwertige Produktseite als auch als Referenzbeispiel für anspruchsvolle Frontend-Animationen ohne Performance-Einbußen.
Haben Sie eine ähnliche Produktherausforderung?
Teilen Sie mir den aktuellen Stand des Produkts, das gewünschte Ergebnis und bereits bestehende Rahmenbedingungen mit. Daraus leite ich einen sinnvollen ersten Meilenstein ab.
Webanwendungs-Entwicklungsdienstleistungen