Über diese Vorlage
Church Community zeigt einen Weg, die Komposition (Landingpage) für dieses Publikum zu bauen. Gedacht ist sie für eine Bildungs- oder Community-Marke, und die Anweisungen dazu sind veröffentlicht. Sie beginnt mit „Take a step toward the light“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette umfasst gedämpftes orange #5A4C41 darunter, weiß #FFFFFF für die Schrift und gedämpftes orange #F1E5C6 für die Akzente, die Schrift ist Manrope. Die Referenz ist mit React und Framer Motion gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Bewegung bleibt auf eine Videospur in Schleife beschränkt. Nimm es zur Hand, wenn im Fall Landingpage die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Übernimm den 1448x1080-Rahmen und Abstände in 36px-Schritten aus diesem Landingpage-Design, bevor du irgendetwas anderes mitnimmst.
- Studio-Leads, die mehrere Projekte parallel fahren, nehmen dieses Landingpage-Design als Muster, das jede weitere Seite kopiert.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Bildung 5,5s Video in Schleife tragen kann.
Was enthalten ist
- Navigation in einer Zeile. Die Leiste ist der leiseste Teil der Komposition: Wortmarke, eine kurze Linkreihe und eine Aktion in #F1E5C6, alles auf der kleinsten Schriftstufe des Briefings. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #F1E5C6 ist das einzige Element in der Leiste mit Gewicht.
- Am Viewport gemessen. Das Briefing nennt die Zahlen: Abstände in 36px-Schritten. Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
- Das Video ist Hintergrund, keine Fläche. Der erste Screen ist ein einzelner Clip bei 1448x1080, alles andere ist darauf angeordnet. Die Schleife ist kurz genug (5,5s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Die Skala fällt steil ab. Die Display-Zeile steht in Manrope in einer vom Briefing festgelegten Größe, dadurch ist die Headline ein Kompositionselement und kein Absatz. Die Zeilenhöhe folgt den Größenstufen und nicht einem einzigen globalen Wert. Behalte die Größenstufen, auch wenn du die Schrift tauschst.
Bewegung & Interaktion
Die Überschrift setzt sich zusammen
Die Bewegung beim Eintritt konzentriert sich auf ein Element: ein Typewriter-Durchlauf tippt die Einleitungszeile. Alles andere steht bereits, wenn die Seite lädt. Der Endzustand ist dieselbe Komposition, die auch ein Standbild zeigt, es hängt also nichts davon ab, dass die Bewegung durchläuft.
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung kommt aus der 5,5s-Schleife in 1448x1080 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. Dreh oder exportiere in 1448x1080 oder breiter.
Church Community als Spezifikation lesen
Jede Beziehung auf dieser Seite ist ein Wert, den du prüfen kannst: Abstände in 36px-Schritten. Genau das macht Church Community nachbaubar statt nur reproduzierbar. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Was du in Church Community zuerst änderst
Setz den neuen Text in der Display-Größe, die das Briefing nennt (Abstände in 36px-Schritten), und der Rest der Skala folgt ohne Redesign. Rahmen und Skala bleiben; das Thema ist der Teil, der sich ändern soll.
Was sich in Church Community bewegt
Das Briefing bindet jeden Übergang an einen Wert (ein Typewriter-Durchlauf und eine Medienschleife von 5,5s). Genau das unterscheidet die Seite von einem Template mit aufgesetztem Animations-Preset. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Ist der Prompt zu Church Community eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 5.380 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 ist dieser Eintrag zu Church Community aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 5.380 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Warum nennt der Eintrag React und Framer Motion überhaupt?
Die Referenz ist zufällig in React und Framer Motion gebaut. Im Layout hängt nichts von dieser Entscheidung ab: Abstände, Schrift und Bewegungswerte übertragen sich auf das, was du bereits verwendest.
