Über diese Vorlage
Brightly ist eine brauchbare Referenz für dieses Publikum: die Komposition (Hero-Bereich), ausgelegt für eine Agentur oder ein Studio, vermessen und bereit zum Nachbauen. Die Zeile lautet „Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive“, und der Rest des Eintrags Hero-Bereich ordnet sich darum. Die ganze Seite baut auf schwarz #050505 darunter und helles orange #F97316 für die Akzente auf. Geliefert wird React und Tailwind CSS, erfasst bei 2046x1400, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 3.5s und eine Videospur in Schleife. Es ist die richtige Referenz für eine Hero-Bereich, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an eine Agentur oder ein Studio.
Gemacht für
- Produktmarketer, die brauchen, dass die Komposition (Hero-Bereich) auch mit 13,7s Video in Schleife hinter dem Text lesbar bleibt.
- Gemacht für einen Solo-Gründer, der ein Hero-Bereich-Design für eine Agentur oder ein Studio ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 2.298 Zeichen.
Was enthalten ist
- Links vor der Aktion. Die Navigation ist ein schmaler Streifen und kein Band: Wortmarke links, Links rechts der Mitte, eine Aktion in #F97316, alles über der Komposition (Hero-Bereich) und ohne eigene Hintergrundfläche. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #F97316 ist das einzige Element in der Leiste mit Gewicht.
- Feste Stufen statt einer Skala. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: Abstände in 24px-Schritten und 3.5s Übergänge. Die Werte stammen aus dem aufgezeichneten Prompt und sind nicht abgeleitet, deshalb überstehen sie ein erneutes Rendern.
- Das Posterbild ist entscheidend. Der Clip läuft 13,7s in 2046x1400 und schleift ohne sichtbaren Schnitt, dadurch wirkt er als Fläche und nicht als Filmmaterial. Exportiere in 2046x1400 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Obere Zeile, eine Aktion. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 2046x1400, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Ein einziger Clip von 13,7s 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.
Kurze, aufeinander abgestimmte Zeiten
Die Bewegung ist hier in Millisekunden angegeben: 3.5s. Das ist das gesamte Animationsbudget, und es fließt in Zustandswechsel statt in eine Scroll-Timeline. Das Easing steht zusammen mit der Dauer im Briefing (3.5s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Wie der Eintrag Hero-Bereich umbricht
Wenn deine Breakpoints gewählt wurden, damit etwas passt, statt das Layout zu ändern, lies diesen Eintrag. die Navigation klappt zu einem mobilen Menü zusammen statt einer Liste ausgeblendeter Elemente. Autoplay und Bewegung sind ehrlich behandelt, die Seite kommuniziert also auch ohne sie.
Was sich in Brightly bewegt
Portier die Bewegung zuletzt. Das Briefing legt sie als kurze Liste fest: Übergänge von 3.5s, eine Medienschleife von 13,7s und eine Überschrift Wort für Wort, und das ist leichter abzugleichen, wenn das Layout steht. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Das Argument des Eintrags Hero-Bereich
Wenn du ein Briefing zum Thema Hero-Bereich im Bereich Agentur schreibst, ist das Schwierigste die Entscheidung, was der erste Screen nicht sagen soll. Brightly beantwortet das vorab: eine Display-Zeile, die Navigation, die Kennzahlen-Zeile und der Hintergrund-Clip dahinter. Es gibt einem Leser im Bereich Agentur den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Wie lang ist der Prompt hinter Brightly?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 2046x1400, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Brightly nachzubauen?
Brightly 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.
Woher stammt das Design von Brightly?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 2046x1400 erfasst.
