Quick summary
THE WORK takes the ogtraplord.com homepage (its real headline, services, process, template shelf, testimonials, and closing line) and retells it as the two-sided fight the headline already picks: a pretty website is easy, and a website that sells is work. Every act is a round. The pretty side promises in italics on paper. The work side answers on navy, and each answer physically shoves the amber divider toward pretty’s defeat. The divider is the only chrome on the page, and it tallies the score live. You can grab it and pull it back, and a spring returns it, stiffer the further the argument has advanced. The close is the collapse: the line gives way, the work column takes the whole screen, and the homepage’s own rocket film scrubs frame by frame under your scroll to the only call to action on the page.
Who this template is for
This build is for anyone whose pitch has two sides, like before and after, cost and saving, or pretty and selling. It’s also for any studio that wants its own homepage retold as an experience visitors can feel taking sides.
- Studios, agencies, and freelancers who want their positioning argued instead of listed. The visitor scrolls the case and watches one side physically win
- Any brand with a two-sided story, like manual versus automated, template versus custom, or cheap versus built. The split-stage grammar fits every argument with a winner
- Developers who want a worked example of a split-stage scroll page: two held grounds, a divider driven off scroll progress, spring physics on a grabbable chrome element, and one dense-GOP scrub clip
What problem this template solves
Most site templates look fine in a screenshot and fall apart in production. You get interchangeable sections, stock imagery, and nothing that proves craft.
- Template marketplaces sell the same layouts to thousands of buyers, so nothing ends up feeling owned
- Buyers can usually preview a design but almost never see the exact instructions that produced it
- Teams need reference builds that survive contact with real content rather than lorem-ipsum mock-ups
What you get with this template
One HTML page on the scrollcraft engine, one custom JS file for the divider, and the subject site’s own assets. Nothing is generated and nothing is invented.
- The full six-act argument: the 50/50 split hero, three promise-vs-practice rounds, the visible plan, the shelf flood with a live counter, the quiet quotes, and the collapse close
- The verdict divider: a full-height amber line that carries both side labels and a live ratio. Every act shoves the ratio toward the losing side’s defeat. You can grab the line with a pointer or touch against a stiffening spring, and it locks at 0/100 after the close
- The peak mechanic: the divider gives way, the winning column takes the full screen, and the page’s only video, a dense-GOP rocket launch, scrubs under the reader’s own scroll to the final CTA
Page sections overview
| Section | Purpose |
|---|---|
| The verdict divider | The chrome is a fight you can grab. |
| The split hero | Both halves of the claim, readable at once. |
| The rounds | Pretty promises, and the work answers. |
| The shelf flood | A live counter runs while the column fills with receipts. |
| The collapse | The divider gives way and the rocket launches under your hand. |
Design and branding system
The design brief was the subject site’s own world, split in two and held in tension.
- The palette comes straight from the homepage being retold: its paper #F7F5F1, its ink, its navy #0D1738 band, and its amber accent in two stops. The one hue is licensed by the hard light/dark split
- Inter throughout, because the subject site is Inter-only. The remix should be unmistakably the same brand under a different grammar
- Zero generated imagery: the rocket film, the posters, and all 41 template cards are the subject site’s own assets, re-encoded or thumbnailed for the page
Mobile and speed optimization
On a phone the argument turns horizontal, with pretty on top and the work below.
- The divider becomes a horizontal line the thumb drags vertically, with the same ratio pill, the same stiffening spring, and the same lock at the verdict
- The pretty voice rides paper chips that carry their own ground, so the light-on-light and dark-on-dark crossings that plague split layouts on small screens never happen
- Reduced motion keeps the divider advancing, since the tally is how the argument reads, and retires the spring, the drag, and the cascade travel
How this template helps you convert
The page earns attention before it asks for anything. The OGtraplord homepage runs on the same logic.
- The strongest visual moment loads first, so visitors like what they see before they read a word
- Every section answers one question and hands off to the next, which keeps the scroll moving toward the call to action
- The ask arrives only after the proof: by the time visitors reach it, the work has already made the argument
Other information about this template
A few notes before you build on this one.
- Built with scrollcraft (the nateherk-design Claude Code plugin) in its split-stage grammar. The divider, the spring, and the collapse are custom page JS that reads the engine’s published --sc-p, and the engine is untouched
- The whole page passed the skill’s own verification suite: desktop, 390px mobile, and reduced-motion walks, plus dead-scroll, scrub-liveness, and composited-contrast checks, all clean
- The subject homepage wasn’t modified. This is a remix reading of ogtraplord.com, built entirely from its published copy and owned assets
- Point it at any two-sided argument: swap the two grounds, the two voices, and the closing film, and the verdict divider sells whatever fight your brand is in
How it works
THE WORK was built with scrollcraft, the nateherk-design Claude Code plugin, in its split-stage grammar: two columns held in tension for the whole page and resolved by scroll. The engine publishes each act’s progress as a CSS custom property, and one custom JS file maps those through a per-act schedule into the divider position, the drag spring, and the lock. There are zero generated assets. The palette, the face, the rocket film, and all 41 template cards are the subject site’s own, re-encoded dense-GOP for scrubbing.
How it was tested
The build passed the skill’s own test run. The desktop, 390px mobile, and reduced-motion walks came back clean, and so did the dead-scroll, scrub-liveness, and composited-contrast checks. A synthetic pointer test also proved that the drag resists, springs back, and locks. The subject homepage itself was never modified.
Screenshots
Captured from the live build, section by section, exactly as the template renders.
