Über diese Vorlage
Vision Reveal zeigt einen Weg, die Komposition (Hero-Bereich) für dieses Publikum zu bauen. Gedacht ist sie für eine Agentur oder ein Studio, und die Anweisungen dazu sind veröffentlicht. Die Zeile lautet „I build compelling visual stories & motion that make ideas shine“, und der Rest des Eintrags Hero-Bereich ordnet sich darum. Die Palette ist weiß #E4E4E4 darunter, schwarz #111111 für die Schrift und petrol #75C5DE für die Akzente, gesetzt in Inter. Der Bau ist Framer Motion; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Die Bewegung bleibt auf Übergänge von 0.3s, cubic-bezier(0.96,-0.02,0.38,1.01) und eine Videospur in Schleife beschränkt. Lass es beim Schreiben offen: Die 16.723 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Wenn du ein Modell statt eines Designers briefst, starte mit dem Hero-Bereich-Briefing und lass den Prompt ein Breakpoint bei 447px festhalten.
- Studio-Teams, die ein Projekt briefen und nach ein 1460x1080 Rahmen suchen, um darauf zu reagieren.
- Dieses Hero-Bereich-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Agentur 5,8s Video in Schleife tragen kann.
Was enthalten ist
- Zurückhaltende Navigation. Wortmarke, Links und die Aktion in #75C5DE teilen eine Grundlinie, was eine dünne Zeile nicht zufällig wirken lässt. Die Labels passen bei 447px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Das Posterbild ist entscheidend. Die Komposition ist auf den Clip in 1460x1080 gebaut und nicht daneben, deshalb bekommen die Medien nie eine Kachel oder einen Rahmen. Die Schleife ist kurz genug (5,8s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Die Schrift trägt den Ton. Die Schrift ist hier das Styling-System: Inter in der Display-Größe, dieselbe Schrift durch die ganze Oberfläche, und keine zweite Akzentfarbe, die die Arbeit übernimmt. Die Laufweite wird enger, je größer die Schrift wird, deshalb hält die Display-Zeile über 14–42px zusammen.
- Eine Zeile, keine Schubladen. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen. Die Referenz wurde mit 1460x1080 erfasst.
Bewegung & Interaktion
Gerendert, nicht illustriert
Der erste Bildschirm wird vom Browser erzeugt und nicht als Bild ausgeliefert: ein WebGL-Canvas. Die Szene reagiert auf den Viewport, statt als Bild dahinter zu liegen.
Ein leiserer Zweig ist enthalten
Die Bewegungsebene bringt einen Ausschalter mit: Bei prefers-reduced-motion wird die Bewegung, also der Auftritt und die Schleife, ausgelassen. Die Rückmeldung der Interaktion funktioniert auch bei reduzierter Bewegung; weggelassen werden nur die Auftritte. Teste die Seite mit abgeschalteter Bewegung.
Was der Eintrag Hero-Bereich richtig macht
Die meisten Agentur-Seiten scheitern am Hinzufügen: mehr Sektionen, mehr Verläufe, mehr Behauptungen. Vision Reveal macht es umgekehrt. Die Seite sagt es selbst: „I build compelling visual stories & motion that make ideas shine“. Die Komposition bleibt auf weiß #E4E4E4 und nutzt petrol #75C5DE nur für Aktionen, und das reicht, um bewusst zu wirken. Es gibt einem Leser im Bereich Agentur den kürzesten ehrlichen Weg zum Angebot.
Die Reihenfolge im Eintrag Hero-Bereich
Ein Screen, eine Handlung, und dazwischen die Navigation, die Überschrift, die Kennzahlen-Zeile und die Feature-Liste. Das Briefing legt diese Reihenfolge fest, statt den ersten Screen einem Stapel von Sektionen zu überlassen. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Was du in Vision Reveal zuerst änderst
Die Palette zuerst neu zu belegen ist der übliche Fehler. Sie ändert die Stimmung, ohne die Komposition anzufassen, und Schrift von 14px bis 42px und 100vh hohe Sektionen tragen das Layout weiterhin; mach Text und Medien zuerst und die Palette zuletzt. Schreib Text und Medien um, bevor du irgendetwas neu einfärbst.
Häufige Fragen
Was steht eigentlich im Briefing hinter Vision Reveal?
Das erfasste Briefing umfasst 16.723 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 Vision Reveal in einem anderen Stack nachbauen?
Nein. Das Briefing ist eine Spezifikation, keine Liste von Abhängigkeiten. Es wurde für Framer Motion 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.
Kann ich die Übergänge von Vision Reveal behalten und nur die Zeitwerte ändern?
Auftritte und Zustandswechsel liegen im Bereich von 0.3s mit cubic-bezier(0.96,-0.02,0.38,1.01) mit einem Reduced-Motion-Zweig im Briefing. Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
