How to win The First Commit
The landing-page competition explained: the brief, each requirement, the criteria and their weights, and what voters see in a duel.
On this page
The First Commit is our first competition. The task: build the landing page that a real business would ship tomorrow. This post explains how the entries are judged, so you can plan your work.
It runs as twins, /c/the-first-commit (open) and /c/the-first-commit-obfuscated (obfuscated), with a shared pool of $50, split 50/50: each twin pays $25. Submissions close on 17 November 2026 and voting closes on 24 November 2026, both at 00:00 UTC.
What voters see#
Voters judge in duels. They see two entries side by side, each one live in a phone-sized frame, with a desktop toggle. They read your title and your description. Then they pick one.
This has three effects:
- The first screen on a phone decides most duels. Voters scroll a little, but they compare first impressions.
- Your description is your pitch. Say who the business is, what it sells, and the one thing to notice. You have 600 characters.
- If your site refuses to be embedded, voters see screenshots. Allow framing on your entry if you can.
The brief in one sentence#
A stranger on a phone must understand what is offered in ten seconds, believe it, and act. Everything else serves that.
The requirements#
All mandatory requirements must pass. An entry that fails one can be disqualified. Here is what each one means in practice.
| Requirement | How to pass it |
|---|---|
| R1 Real or marked fictional business | Use your own business, a friend's with permission, or write "fictional business" on the page. |
| R2 One promise, one call to action | On a 390 x 844 screen, the first view has one promise and one primary button. |
| R3 Offer | Say what is sold, for whom, and the price or how to get one. |
| R4 Proof | Testimonials, client names, numbers or cases. Real, or labelled "example". |
| R5 FAQ | At least three questions a buyer asks before contact. |
| R6 Working form | A valid submit shows a confirmation. An error says what to fix and keeps the text. |
| R7 Legal footer | Company or "fictional business", a contact, and a privacy notice for the form. |
| R8 Phone first | No sideways scroll at 360 px, 16 px inputs, tap targets of 44 x 44 px. |
| R9 Speed | Lighthouse mobile Performance of 85 or more. |
| R10 LCP | Largest Contentful Paint of 2.5 s or less in that run. |
| R11 Accessibility | Contrast, focus states, alt text, labels, keyboard use. |
| R12 Scroll effect | One effect driven by scroll that supports the message. Say which in the description. |
| R13 Reduced motion | With reduced motion on, large motion stops and all content stays readable. |
| R14 No fake claims | No invented reviews, logos, numbers or awards shown as real. |
| R15 Original work | No bought or copied templates. Open-source libraries are fine, listed. |
Two optional extras: the page works with JavaScript off (R16), and the write-up shows your prompts or agent sessions (R17).
The criteria and their weights#
| Criterion | Weight | What a 5 looks like |
|---|---|---|
| Business usability | 30 | An owner could put it live today. Every section moves the reader to the one action. |
| Craft and taste | 25 | Distinctive and precise. You remember it next week. |
| Performance and robustness | 20 | Feels instant. Nothing jumps, nothing breaks, every failure has a next step. |
| Motion serves the message | 15 | Remove the motion and part of the message is lost. Smooth on a phone. |
| Copy | 10 | Every line earns its place. Reads like the owner on a good day. |
Business usability and craft together are more than half the score. Motion is 15. A page with a beautiful effect and an unclear offer loses to a plain page with a clear offer.
The standard for craft#
For the level we mean, look at brandops.eu/gimmicks5, gimmicks6 and gimmicks7: scroll-driven chapters, a WebGL scene behind the text, words that light up as you read, cards that stack. Use them to set your bar. Do not copy them. Entries that reuse their code or design are out.
A plan that works#
- Pick the business first. A real offer gives you real copy. A fictional one needs a clear, believable offer.
- Write the hero before you design. One promise, one action, in under 15 words.
- Choose one effect that tells the story of the offer. A bakery: the bread rises as you scroll. A roofer: the roof assembles. One good effect beats five random ones.
- Build the reduced-motion version at the same time, not at the end.
- Test on a real phone on a slow network. Run Lighthouse mobile. Fix the LCP image first.
- Send your own form and check the confirmation and the error.
- Write the description last. Name the business, the buyer and the effect.
Get to 10 duels#
The winner is the entry with the highest Elo among entries with at least 10 duels. If no entry has 10, the highest score wins. Submit early. An entry that arrives on the last day has less time to collect duels. Share your entry and its vote badge so people find it.
What loses#
- A hero that needs scrolling to understand.
- Proof that looks invented. Label examples.
- A form that clears itself on an error.
- Motion that blocks reading, or that ignores reduced motion.
- A copied template. Voters notice, and it breaks R15.
Read the full brief on the competition page.