Über diese Vorlage
Rare Gallery zeigt einen Weg, die Komposition (Portfolio-Seite) 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 „A carefully curated collection beyond compare“, und der Rest des Eintrags Portfolio-Seite ordnet sich darum. Die Palette umfasst tiefes limette #222518 darunter, die Schrift ist Instrument Serif. Geliefert wird React und Tailwind CSS, erfasst bei 1920x1414, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung beschränkt sich auf Übergänge von 400ms, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife. Starte beim erfassten Briefing und bearbeite dann den Eintrag Portfolio-Seite, statt von Grund auf neu zu bauen.
Gemacht für
- Produktmarketer, die brauchen, dass die Komposition (Portfolio-Seite) auch mit 6,9s Video in Schleife hinter dem Text lesbar bleibt.
- Gemacht für einen Solo-Gründer, der ein Portfolio-Seite-Design für eine Agentur oder ein Studio ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem Portfolio-Seite-Briefing versorgt, startet mit dem Prompt über 4.964 Zeichen.
Was enthalten ist
- Schmale Navigationsleiste. Die Leiste überlagert Portfolio-Seite, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1920x1414, damit die Medien darunter bis an den Rand durchlaufen.
- Nichts davon ist geerbt. Das Briefing nennt die Zahlen: Abstände in 64px-Schritten, 400ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr. Wo das Briefing schweigt, schweigt es mit Absicht.
- Die Ankündigungs-Pille. Ein Badge, eine Botschaft: die Pille sitzt in Instrument Serif auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Es ist so positioniert, dass die Headline die Mitte der Komposition behält. Ein Badge, eine Botschaft.
- Das Formular füllt den Screen. Hier ist eine Entscheidung zu treffen: das Formular ausfüllen oder gehen. Alles andere auf dem Screen stützt diese Entscheidung. Die Labels stehen über ihren Eingabefeldern, und der Begleittext bleibt über dem ersten Feld. Eine Spalte, eine Aktion.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Ein einziger Clip von 6,9s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Der Clip ist stumm und inline, das erste Bild ist also ohne Interaktion verfügbar.
Die Bedienelemente sind die interaktive Schicht
Die Seite reagiert nur dort, wo man handeln kann: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Hover und Fokus sind gemeinsam festgelegt, Zeiger und Tastatur bekommen dadurch dieselbe Information.
Was du in Rare Gallery zuerst änderst
Wenn du eigene Medien einsetzt, behalt Zuschnitt und Ebenenreihenfolge. Das Medium ist eine Schleife von 6,9s in 1920x1414. Genau diese Platzierung hält den Text lesbar. Rahmen und Skala bleiben; das Thema ist der Teil, der sich ändern soll.
Was sich in Rare Gallery bewegt
Bewegung ist eine kurze Liste und kein System: Übergänge von 400ms, eine Medienschleife von 6,9s und Hover- und Druckzustände, und der Rest der Seite bleibt still. Nichts in diesem Eintrag Portfolio-Seite animiert um seiner selbst willen.
Die Reihenfolge im Eintrag Portfolio-Seite
Wenn ein Leser im Bereich Agentur auf einem einzelnen Screen landet, scannt er, bevor er liest. Das Layout antwortet darauf: die Navigation, die Überschrift, das Ankündigungs-Badge, das Formular und der Hintergrund-Clip sind auf das Scannen hin dimensioniert, und Abstände in 64px-Schritten und 400ms Übergänge halten jede Station unterscheidbar. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie lang ist der Prompt hinter Rare Gallery?
Das erfasste Briefing umfasst 4.964 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 Rare Gallery hängt von React und Tailwind CSS ab?
Rare Gallery 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.
Darf ich Rare Gallery in einem Kundenprojekt verwenden?
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 1920x1414 erfasst.
