Über diese Vorlage

Das hier ist der Eintrag Hero-Bereich von Alertix, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Die Zeile lautet „Stay Ahead With *Cutting-Edge*“, und der Rest des Eintrags Hero-Bereich ordnet sich darum. Die Palette ist tiefes blau #0A0F14 darunter, gedämpftes petrol #C3DFE8 für die Schrift und blau #1D1D6D für die Akzente. Geliefert wird React und Tailwind CSS, erfasst bei 1932x1400, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf eine Videospur in Schleife. Am nützlichsten ist es, wenn beim Eintrag Hero-Bereich für KI & SaaS ein Textwechsel ohne Redesign möglich bleibt.

Gemacht für

  • Wenn drei Leute an einem Hero-Bereich-Design arbeiten, gib Content-Leads Abstände in 120px-Schritten statt eines Screenshots.
  • Produktmarketer, die brauchen, dass die Komposition (Hero-Bereich) auch mit 7,9s Video in Schleife hinter dem Text lesbar bleibt.
  • Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 3.245 Zeichen.

Was enthalten ist

  • Schmale Navigationsleiste. Die Leiste ist der leiseste Teil der Komposition: Wortmarke, eine kurze Linkreihe und eine Aktion in #1D1D6D, alles auf der kleinsten Schriftstufe des Briefings. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #1D1D6D ist das einzige Element in der Leiste mit Gewicht.
  • Größen stehen im Briefing. Die Größen sind zitiert und nicht vererbt: Abstände in 120px-Schritten. Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
  • Das Video ist Hintergrund, keine Fläche. Das Video über 1932x1400 läuft 7,9s in Schleife hinter dem Text, stumm und inline, ohne Tönungsebene dazwischen. Die Schleife ist kurz genug (7,9s), dass das Auge sie als Textur liest und nicht als Zeitachse. Exportiere bei 1932x1400 oder breiter, damit der Zuschnitt ehrlich bleibt.
  • Zurückhaltende Navigation. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1932x1400, damit die Medien darunter bis an den Rand durchlaufen.

Bewegung & Interaktion

Hintergrundbewegung ohne Scroll-Bibliothek

Ein einziger Clip von 7,9s 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.

Statisch mit Absicht

Das Briefing lässt Animation weg und überlässt die Seite dem 1932x1400-Layout, nur Hover- und Druckzustände ändern sich. Im Briefing steht keine Animationsbibliothek, der Nachbau bleibt also klein. Beschränke Bewegung auf die Bedienelemente.

So wird der Eintrag Hero-Bereich deiner

Wo ein Theme dir Komponenten gibt, gibt dieses Briefing dir eine Komposition: Abstände in 120px-Schritten und einen Medienrahmen, das Thema bleibt bei dir. Behalt den Medienzuschnitt; er leistet so viel wie die Schrift.

Wie der Eintrag Hero-Bereich umbricht

Die Desktop-Komposition ist gegen 1932x1400 gelöst, und das schmale Layout ist entworfen statt geerbt: die Navigation klappt zu einem mobilen Menü zusammen. Bewegung hat eine Variante für reduzierte Bewegung, und die Medien tragen ein Posterbild, damit die Seite auch ohne Autoplay kommuniziert. Das schmale Layout ist eine Entscheidung und keine Quetschung, und die Hierarchie übersteht sie.

Wie Alertix den ersten Blick ordnet

Nichts konkurriert hier mit der ersten Entscheidung. Die Seite sagt es selbst: „Stay Ahead With *Cutting-Edge*“. Das Stützmaterial wartet unter dem Fold, und die Navigation und der Hintergrund-Clip tragen die obere Seite allein. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.

Häufige Fragen

Wie lang ist der Prompt hinter Alertix?

Das erfasste Briefing umfasst 3.245 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.

Kann ich Hero-Bereich von Alertix in einem anderen Stack nachbauen?

Alertix 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 eine aus Alertix nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?

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 1932x1400 erfasst.

In Studio nachbauen

Starte mit der Referenz und passe Inhalte und visuelle Details in Studio an.