Aurora
Eine Landingpage, die sich beim Scrollen erzählt.
Scroll-Cinema-Designkonzept: eine dunkle Landingpage, die sich Szene für Szene aufbaut und eine Story vom Problem zur Lösung inszeniert, als wiederverwendbare Vorlage für eigene Projekte.
Aurora ist ein Designkonzept für Landingpages, die sich beim Scrollen Szene für Szene aufbauen, statt alles auf einmal zu zeigen. Eine ruhige Aurora im Hero, ein Kontrast „früher vs. heute", ein Zahlen-Bruch, Leistungs-Kacheln und ein durchgehender Morph, in dem aus einem einzigen Satz sichtbar eine echte Produkt-Oberfläche entsteht: und am Ende Zeit frei wird.
Technisch bewusst schlank: kein schweres Framework, keine Animations-Library. Ein einziger, ressourcenschonender Scroll-Listener treibt jede Bewegung; wer im System reduzierte Bewegung aktiviert hat, bekommt sofort die ruhigen Endzustände statt Effekte.
Ursprünglich als frühe luukri-Startseite gebaut, herausgelöst als wiederverwendbare Vorlage. Drei Dateien (HTML, CSS, JS), per Doppelklick lauffähig, Farben und Timing über CSS-Variablen umstellbar: ein Startpunkt für die nächste Seite, die auffallen soll.
Was es kann
Progressive Enthüllung
Gepinnte Szenen bauen die Seite beim Scrollen Stück für Stück auf: ruhig inszeniert wie ein Produkt-Reveal.
Ein Scroll-Listener
Alle Animationen laufen rAF-gedrosselt über eine einzige Funktion: flüssig, ganz ohne schwere Libraries.
Signatur-Morph
Aus einem Satz entsteht sichtbar eine Produkt-Oberfläche, dann Ordnung, dann freie Zeit.
Barrierearm
Bei „reduzierte Bewegung" erscheinen direkt die Endzustände; Fokus-Stile und semantisches Markup inklusive.
Drop-in wiederverwendbar
Drei Dateien, per Doppelklick lauffähig: Texte, Links und Bilder einfach austauschen.
Themebar per Variable
Farben und Timing hängen an CSS-Variablen: ein neues Farbschema in Minuten.
Einblicke
Sowas für dich?
Ob eigenes Tool, Website oder Automatisierung — erzähl uns von deiner Idee.
Lass uns sprechen