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, 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, it tallies the score live, and you can grab it and pull it back — 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 CTA on the page.
Who this template is for
This build is for anyone whose pitch has two sides — before and after, cost and saving, pretty and selling — and 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 rather than listed: the visitor scrolls the case and watches one side physically win
- Any brand with a two-sided story — manual vs automated, template vs custom, cheap vs 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 — 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 bespoke JS file for the divider, and the subject site’s own assets — nothing generated, nothing 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 carrying both side labels and a live ratio that every act shoves toward the losing side’s defeat, grabbable with pointer or touch against a stiffening spring, locked 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; the work answers. |
| The Shelf Flood | A real counter runs while the column fills with receipts. |
| The Collapse | The divider gives way and the rocket launches under your hand. |
Design & branding system
The design brief was the subject site’s own world, split in two and held in tension.
- The palette is lifted straight from the homepage being retold: its paper #F7F5F1, its ink, its navy #0D1738 band and its amber accent in two stops — one hue, licensed by the hard light/dark split
- Inter end to end, 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 real assets, re-encoded or thumbnailed for the page
Mobile & speed optimization
On a phone the argument turns horizontal — pretty on top, 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 — the tally is comprehension, not decoration — while retiring the spring, the drag and the cascade travel
How this template helps you convert
The page earns attention before it asks for anything — the same conversion logic the OGtraplord homepage runs on.
- The strongest visual moment loads first, so a visitor forms a positive impression before reading a word
- Every section answers one question and hands off to the next, keeping scroll momentum toward the call to action
- The ask arrives only after the proof — by the time a visitor reaches 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 bespoke page JS reading the engine’s published --sc-p, engine untouched
- The whole page passed the skill’s own verification harness: desktop, 390px mobile and reduced-motion walks, dead-scroll, scrub-liveness and composited-contrast checks all clean
- The subject homepage was not 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 actually in
How it works
Built with scrollcraft, the nateherk-design Claude Code plugin, in its split-stage grammar — two columns held in tension for the whole page, resolved by scroll. The engine publishes each act’s progress as a CSS custom property; one bespoke JS file maps those through a per-act schedule into the divider position, the drag spring and the lock. 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.
On its verification
The build passed the skill’s own harness — desktop, 390px mobile and reduced-motion walks, dead-scroll, scrub-liveness and composited-contrast checks all clean — plus a synthetic pointer test proving the drag resists, springs back and locks. The subject homepage itself was never modified.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
