About this template
Read Church Community as a landing page spec: the values were written down before the page was built. “Take a step toward the light” is the line the layout is built to carry. The colour scheme is muted orange #5A4C41 underneath, white #FFFFFF for the type and muted orange #F1E5C6 carrying the accents, and the page is set in Manrope. The reference is built with React and Framer Motion, and the layout decisions are stated independently of it. Motion comes down to a looping video bed. Borrow the structure and not the subject: the landing page and its numbers move to your brand unchanged.
Designed for
- Quote a 1448x1080 frame in the handoff note so the next build does not have to re-derive it from the page.
- This landing page answers the builder who wants to know what 36px spacing steps actually controls in the layout.
- Product marketers who need the landing page to still read with 5.5s of looping video behind the copy.
What's included
- A bar with nothing spare. Navigation is a thin strip rather than a band: wordmark left, links centre-right, one #F1E5C6 action, all of it sitting above the landing page without a background of its own. The links are set below the wordmark in size, and the #F1E5C6 action is the only element in the bar with any weight.
- Measured, not eyeballed. Type and spacing are drawn from one list here: 36px spacing steps. The list is short enough that a reviewer can check it element by element.
- The loop is the backdrop. The clip runs 5.5s at 1448x1080 and loops without a visible cut, so it reads as surface rather than as footage. Export at 1448x1080 or wider and the cover crop keeps working.
- Display size does the talking. The faces are assigned roles rather than mixed: Manrope carries the display and the interface together. The face is paired with fixed sizes, which is what keeps the display line and the interface text related. Check the scale in greyscale.
Motion & interaction
The reveal is the memory point
Entrance motion is concentrated on one element: a typewriter pass types the intro line. Everything else is already in place when the page loads. Under reduced motion the element simply appears and the layout is unchanged.
A loop, not a timeline
Ambient movement comes from the 5.5s 1448x1080 loop rather than from scroll effects, which keeps the page calm and the type readable. Because it is muted, the loop can run under the copy without competing for sound or focus. Shoot or export at 1448x1080 or wider.
Reading Church Community as a spec
When a rebuild drifts, the spacing goes first. Church Community avoids that by publishing 36px spacing steps with the composition. Nothing in this landing page depends on a default.
Making the landing page yours
Start with the promise, not the decoration. Rewrite “Take a step toward the light” as one sentence that names what you do, then set it in Manrope at the display size the brief uses. Replace muted orange #F1E5C6 with your own accent and check it against muted orange #5A4C41 before you touch anything else. The subject is the part that should change.
What moves in Church Community
The animation budget is stated: a typewriter pass and a 5.5s media loop. Nothing in the landing page moves without a value attached to it. Nothing animates for its own sake in this landing page.
Frequently asked questions
What does the brief behind Church Community actually contain?
The captured brief runs 5,380 characters and covers the frame, the type scale, the palette and the transitions. Copying it gives you that text, and sending it to Studio stages the same request with the page already described.
Is the Church Community brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 5,380-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
How much of Church Community depends on React and Framer Motion?
The reference happens to be built in React and Framer Motion. Nothing in the layout depends on that choice: the spacing, type and motion values transfer to whatever you already use.
