Über diese Vorlage
Subscription Agency hält den Entscheidungsweg fest: Hinter dem Eintrag Hero-Bereich stehen 6.172 Zeichen Briefing. Die Palette ist #FFFFFF darunter, #0A0A0A für die Schrift und grün #17C964 für die Akzente, gesetzt in Inter. Geliefert wird React und Tailwind CSS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung kommt über Übergänge von 0.4s und eine Videospur in Schleife nicht hinaus. Lass es beim Schreiben offen: Die 6.172 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Übernimm den 1476x1080-Rahmen und eine feste Display-Größe von 82px und Abstände in 14px-Schritten aus diesem Hero-Bereich-Design, bevor du irgendetwas anderes mitnimmst.
- Dieses Hero-Bereich-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Agentur 6,3s 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 Subscription Agency.
Was enthalten ist
- Ein Breakpoint für die Links. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #17C964, knapp genug, um neben dem Rest der Seite leise zu bleiben. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #17C964 ist das einzige Element in der Leiste mit Gewicht.
- Größen im Briefing fixiert. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: eine feste Display-Größe von 82px, Abstände in 14px-Schritten und 0.4s Übergänge. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann. Die Zahlen sind das Design, der Rest ist Anordnung.
- Medien hinter der Schrift. Die Komposition ist auf den Clip in 1476x1080 gebaut und nicht daneben, deshalb bekommen die Medien nie eine Kachel oder einen Rahmen. Das Poster bei 1476x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Leiste im Raster der Seite. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen. Die Referenz wurde mit 1476x1080 erfasst.
Bewegung & Interaktion
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung kommt aus der 6,3s-Schleife in 1476x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße.
Kurze, aufeinander abgestimmte Zeiten
Zustandswechsel sind mit 0.4s angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Das Easing steht zusammen mit der Dauer im Briefing (0.4s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Die Zahlen hinter dem Eintrag Hero-Bereich
Ein Nachbau beginnt meist mit einem Screenshot und einer Vermutung. Hier beginnt er mit 6.172 Zeichen Spezifikation: Rahmen, Abstände und Bewegung stehen fest, bevor die erste Codezeile entsteht. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Die Reihenfolge im Eintrag Hero-Bereich
Das Briefing umfasst 6.172 Zeichen und benennt die Leserichtung ausdrücklich: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Footer, dazwischen eine feste Display-Größe von 82px und Abstände in 14px-Schritten. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Die Zeitwerte sind ausgesprochen: Übergänge von 0.4s, eine Medienschleife von 6,3s und Hover- und Druckzustände, alles im Briefing festgehalten und nicht nach Gefühl abgestimmt. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Ist der Prompt zu Subscription Agency eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 6.172 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.
Wie viel von Subscription Agency hängt von React und Tailwind CSS ab?
Subscription Agency wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
Kann ich die Übergänge von Subscription Agency behalten und nur die Zeitwerte ändern?
Auftritte und Zustandswechsel liegen im Bereich von 0.4s. Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
