Über diese Vorlage
Scalable ist eine brauchbare Referenz für dieses Publikum: die Komposition (Hero-Bereich), ausgelegt für ein KI- oder SaaS-Produkt, vermessen und bereit zum Nachbauen. Sie beginnt mit „New Feature: Zapier Integration“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die ganze Seite baut auf tiefes indigo #2B1F36 darunter auf. Geliefert wird React und Tailwind CSS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung ist eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Nimm es zur Hand, wenn im Fall Hero-Bereich die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Dieses Hero-Bereich-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für SaaS 10,5s Video in Schleife tragen kann.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Scalable.
- Dieses Hero-Bereich-Design ist für Agenturen gebaut, die den 1920x1592-Rahmen durch drei Runden Kundenkorrekturen bringen müssen.
Was enthalten ist
- Navigation in einer Zeile. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1920x1592, damit die Medien darunter bis an den Rand durchlaufen.
- Eine Pille für das eine Neue. Eine einzelne Pille trägt die Ankündigung über der Headline, und um diese Position konkurriert nichts anderes. Die Pille steht auf der kleinsten Stufe im Briefing, damit sie als Label und nicht als zweiter Titel gelesen wird. Ein Badge, eine Botschaft.
- Eine Leiste ohne Beiwerk. Die Aktion trägt den Akzent, die Links bleiben auf der Textfarbe, damit die Hierarchie der Leiste zur Seite darunter passt. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Ein Medien-Element trägt die Stimmung. Der Clip läuft 10,5s in 1920x1592 und schleift ohne sichtbaren Schnitt, dadurch wirkt er als Fläche und nicht als Filmmaterial. Die Schleife ist kurz genug (10,5s), dass das Auge sie als Textur liest und nicht als Zeitachse.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Ein einziger Clip von 10,5s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße.
Bewegung, die nicht stört
Eine Scroll-Bibliothek gibt es hier nicht: Die 1920x1592-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Im Briefing steht keine Animationsbibliothek, der Nachbau bleibt also klein.
Was du in Scalable zuerst änderst
Eine reine Substitution hat eine Grenze: Wenn dein Produkt eine andere Hierarchie braucht, arbeiten ein 1920x1592 Rahmen dagegen. Ändere in dem Fall zuerst die Reihenfolge und danach die Werte. Schreib die Display-Zeile um, bevor du die Farbe anfasst.
Wie Scalable den ersten Blick ordnet
Wo eine Marketingseite Belege unter dem Fold stapelt und hofft, stehen in diesem Eintrag Hero-Bereich die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster vorn, und der Rest wird zurückgehalten. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Was sich in Scalable bewegt
Ein fertiges Animationspaket wäre schneller ausgeliefert gewesen. Das Briefing hält es stattdessen kurz: ein Sticky-Element und eine Medienschleife von 10,5s, und deshalb wirkt die Seite verfasst statt inszeniert. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Ist der Prompt zu Scalable eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 8.462 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Woher stammt das Design von Scalable?
Die Referenz stammt von sceneai.art, und die Medien gehören dem ursprünglichen Anbieter. Baue die Komposition mit eigenen Texten, eigenen Bildern und eigener Palette nach und prüfe die Nutzungsbedingungen der Quellseite, bevor du etwas davon veröffentlichst.
Wie ist dieser Eintrag zu Scalable aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 8.462 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
