Über diese Vorlage
Neurolink Hero Section: Hero-Bereich für Agentur, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Die Zeile lautet „Where Memories Live Forever“, und der Rest des Eintrags Hero-Bereich ordnet sich darum. Farbe bleibt auf tiefes blau #0D1017 darunter, weiß #FFFFFF für die Schrift und helles orange #FFB733 für die Akzente begrenzt, gesetzt in Inter. Die Referenz ist mit vanilla JS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Bewegung ist eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Lass es beim Schreiben offen: Die 10.336 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Studio-Teams, die ein Projekt briefen und nach ein 1526x1080 Rahmen suchen, um darauf zu reagieren.
- Marketingverantwortliche, die ein Hero-Bereich-Design übernehmen, ziehen 100vh hohe Sektionen und Abstände in 16px-Schritten heran, um zu prüfen, ob eine Neufassung die Größenverhältnisse gehalten hat.
- Dieses Hero-Bereich-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Agentur 3,9s Video in Schleife tragen kann.
Was enthalten ist
- Navigation ohne Hintergrund. Die Navigation ist ein schmaler Streifen und kein Band: Wortmarke links, Links rechts der Mitte, eine Aktion in #FFB733, alles über der Komposition (Hero-Bereich) und ohne eigene Hintergrundfläche. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #FFB733 ist das einzige Element in der Leiste mit Gewicht.
- Feste Stufen statt einer Skala. Das Briefing hält seine Größen bei der Aufnahme fest (100vh hohe Sektionen und Abstände in 16px-Schritten), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Schrift und Layout teilen dieselben Stufen, damit nichts verrutscht, wenn eines von beiden ersetzt wird. Miss nach, bevor du anpasst.
- Ein randloses Video hinter der Schrift. Das Video liegt in der untersten Ebene der Komposition 1526x1080, die Schrift ist darüber angeordnet, dazwischen liegt nichts. Das Poster bei 1526x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Eine Zeile, keine Schubladen. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1526x1080, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Hover nur, wo er etwas bedeutet
Nur die Bedienelemente reagieren auf den Zeiger (Hover-Zustände auf Buttons und Links statt auf jeder Karte), die Seite wirkt also reaktionsschnell, ohne jedes Element zur Zielscheibe zu machen. Nichts auf der Seite öffnet ein Modal oder kapert das Scrollen; die Interaktionen bleiben am Element. Prüfe die Zustände auf einem Touch-Gerät.
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung kommt aus der 3,9s-Schleife in 1526x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Der Clip ist kurz genug, um ohne sichtbare Naht zu schleifen, und das zählt mehr als seine Auflösung.
Was eine Agentur oder ein Studio hier gewinnt
Neurolink Hero Section ist als Hero-Bereich die Referenz für eine Agentur oder ein Studio und beantwortet genau das Problem dieser Nutzer. „Where Memories Live Forever“ leistet diese Arbeit ab dem ersten Frame. Die Palette bleibt diszipliniert (tiefes blau #0D1017 und helles orange #FFB733), und die Schrift steht in Inter; nichts in der Komposition hängt also an einem aufgegriffenen Trend. Für ein Briefing lohnt sich dieser Teil zum Nachbauen: ein Versprechen in Display-Größe, alles Stützende darunter. Es gibt einem Leser im Bereich Agentur den kürzesten ehrlichen Weg zum Angebot.
Wie der Eintrag Hero-Bereich umbricht
Verglichen mit einem Mobil-Layout, das Sektionen ausblendet, behält dieses sie und ändert ihre Form: die Skala ist fließend statt gestuft und der Bereich wird auf 100vh gehalten. Die Hierarchie ist das, was den Umbruch übersteht.
Die Reihenfolge im Eintrag Hero-Bereich
Die Seite hat eine bewusste Reihenfolge. die Navigation etabliert das Produkt und gibt Rückkehrenden einen vertrauten Weg. Die Headline bekommt die Display-Größe, die Stützzeile erklärt das Angebot, und der helles orange #FFB733 markiert die Hauptaktion, damit der nächste Schritt nie fraglich ist. Nichts konkurriert damit: Vor der ersten Entscheidung steht kein Kartenraster, und genau das hält die Komposition (Hero-Bereich) in Agentur-Arbeiten leicht. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Häufige Fragen
Ist der Prompt zu Neurolink Hero Section eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1526x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Neurolink Hero Section hängt von vanilla JS ab?
Nein. Das Briefing ist eine Spezifikation, keine Liste von Abhängigkeiten. Es wurde für vanilla JS geschrieben, dieselbe Komposition lässt sich aber in allem nachbauen, was du ohnehin nutzt. Der Stack ist genannt, damit du weißt, wie die Referenz entstanden ist.
Woher stammt das Design von Neurolink Hero Section?
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 1526x1080 erfasst.
