The Landing Page

What it is

Every page in the GetLayers model is compositions plus one style plus assets. The style is Obsidian Luxe, chosen because its own description reads like our kit written by a stranger: near-black ground, warm platinum ink, a single restrained gold rationed to one action per screen. Its colour roles were then overridden with our exact validated hexes, so nothing on the page is a GetLayers colour.

The scene, and why the amber is where it is

The hero runs one WebGL scene: a living topographic contour map, drawn as glowing iso-lines over a height field that flows and re-forms. It was chosen over the prettier gold-corona option because it actually means something here. It reads as territory and demand density, which is the business.

The re-tint is the part worth understanding. The obvious move was to make the whole map amber. That would have been wrong, because the kit reserves amber for the primary action, and a glowing amber field directly behind an amber button destroys the one thing the accent is for. So the contour lines take the warm platinum ink ramp, and the accent lands only on the sparkle dots, where it reads as demand points scattered across a map. There is exactly one amber action per surface on the finished page.

Three changes were made to the library scene, all outside its artwork shader. Two of its three render passes were rendering empty targets and adding black to the result, so they were removed, which saves two full-screen passes a frame and lets the canvas keep a real alpha channel so our own void shows through instead of the scene's hard-coded black. And its entrance now runs on time the page was actually visible rather than wall clock, so a tab opened in the background no longer burns its camera move unseen.

The first pass came out too soft, and the fix is worth recording because it is counter-intuitive. Every contour line is drawn as a crisp antialiased core wrapped in a halo, and the halo's falloff was set wide enough that it out-weighed the core, so the field read as haze rather than as drawn line. Pulling the halo back and tightening its falloff is what made the contours sharp. It also helped legibility rather than hurting it, because a tight line covers far fewer pixels behind a glyph than a soft one does.

The page has no numbers on it, deliberately

The plan included a statistics band with four counting figures. It was cut, and this is the one thing on this page that needs your decision.

There is no traction figure anywhere in the repository that could honestly be printed. No jobs-covered count, no agent count, no median fill time, no rating. Tour Dash has never had a landing page, so there is nothing to cite. Inventing four confident-looking numbers would have been the easy way to fill the section and would have put false claims in front of every visitor, so the section came out instead.

Everything that did stay is verifiable against the code. The nine job types and the three families they collapse into come straight from opportunity-adapter.ts. Give me four real figures and the composition drops back in above the closing call to action without disturbing anything around it.

How it was verified

• The scene genuinely renders. Confirmed against the live WebGL context rather than a screenshot, which had already proved unreliable: a backgrounded tab freezes its animation frames and reports a frozen loader that is not actually broken.
• The loader gates on real readiness. The first drawn frame was measured at 1425ms and the curtain leaves on that signal, not on the 6s failsafe.
• Contrast was measured, not eyeballed, and the measurement changed the design. The contour lines are the same warm platinum as the display ink, so the worst case is a lit line crossing a glyph. Sharpening the lines made that worse, and the numbers showed something the eye would not have caught: at 14px, muted body text never reaches the 4.5:1 floor against a lit line at any plausible veil, because muted grey and a lit line sit at almost the same luminance. Full-strength ink clears it comfortably. So body copy that sits on bare map now uses full ink and hierarchy is carried by size and weight instead of a grey step, which is what the dark styles in this family do anyway.
• The veils are local, not global. Darkening the whole page would have fixed every number and flattened the map back into the haze we had just removed. Instead each text block over the map gets a soft pool of ground that falls off before the section edges, which keeps the open centre channel the composition asks for.
• Two brand rules were caught and fixed mid-build. A dot invented for the wordmark had taken the accent, which the kit forbids outright, and the process rail had used the accent as decoration on four ticks. The real keyline Logomark component is now used in all three places and the ticks are neutral.
• Every visitor-facing word went through the humanizer pass, which removed an unverifiable timing claim and the word "vetted" as an unsupported credential.
• tsc --noEmit and npm run build both run clean. The scene is code-split into its own 104 kB gzipped chunk, so it never loads for a signed-in user.

Two things to decide

The display type is scaled well past the text-2xl heading rule in the design conventions. That rule governs the dashboard shell, where it is right, and a hero headline set at text-2xl is not a viable landing page. Sentence case and the tight tracking are kept. Say the word if you want that rule read literally everywhere.

The footer tagline is rendered in sentence case to match the design conventions. The commit that introduced it capitalised it as "Every Showing. Every Task. We got you Covered." One of the two should give.

Review: what the page does not yet do for this market

The page sells the mechanism well — post it, they apply, you pick, it's covered. What it does not yet do is answer the two questions an agent actually decides on. Ranked by how much each one is costing us.

The line weight bug, and the measurement that found it

The contours still read soft after the first sharpening pass, and the cause turned out to be a resolution bug rather than a taste decision. The shader derives its distance to the nearest contour from screen-space derivatives, which means the line width is specified in device pixels. On a 2× display a width of 1.5 draws a line 0.75 CSS pixels across, thinner than a hairline, which is exactly what reads as blur. The reference on getlayers.ai renders at 1×, so it never showed the problem. Both the line width and the halo falloff now scale with the live pixel ratio, so the line has the same apparent weight on every display.

One claim made during that pass was wrong and is worth correcting. The scene measured about 50fps and that was read as a cost of the mesh. Hiding the canvas entirely produced the same 50fps, so the ceiling was the ultrawide display and browser overhead, and the scene was costing nothing measurable. Desktop therefore keeps the full mesh. Touch devices still get a quarter of the vertices, not because a phone was measured — it could not be, from here — but because a phone GPU is a different machine and the reduction is invisible at that screen size.

What changed after the review

Four of the nine findings are fixed. The biggest one is blocked, and the reason matters.

Why the real-jobs map is blocked, and what would unblock it

Querying the database as an anonymous visitor returns an exact count of zero rows. Whether that is row-level security doing its job or simply an empty table, the outcome for a logged-out landing page is identical: there is nothing to plot. Building the map anyway would have produced an empty map, which proves the opposite of what it is meant to prove.

Two things are needed before it can ship, and the second is not optional. First, a way for a logged-out page to read the data at all, either a public view of anonymized open jobs or a small server endpoint that queries with a service key and returns only what is safe. Second, the positions have to be rounded to the town or ZIP centroid rather than the street address. These are live listings at real homes belonging to real clients, and a public marketing page is not the place to publish where they are and when nobody will be there.

V2: the product, shown

V1 is pinned as landing-v1 and still serves /. V2 lives at /v2 so the two can be read side by side. The weakness it fixes is structural rather than cosmetic: a visitor could finish V1 having never seen the thing they were being asked to sign up for.

So V2 changes the macrostructure and keeps the style. V1 was manifesto-first, a statement over an abstract map. V2 is split-narrative: the argument scrolls on the left while the application itself stays pinned on the right, swapping to the screen each step is describing. The contour map is demoted from subject to ground, and hands off to the real opportunity map, which is the same idea rendered in earnest.

Every screenshot is a real capture of the running application at /demo, which uses fictional data, and the page says so rather than leaving a visitor to work it out. That is also the only honest source available: real listings are live jobs at real clients' homes, and a public marketing page is not the place to publish them. Captured at 2× and served as webp: four screens, 367KB in total.

No fake browser chrome anywhere. Drawing a window frame with traffic lights is a way of faking a screenshot, and we have the real thing, so the shots sit in a plain bezel with a light catch and nothing else.

Two rules V1 was quietly breaking

Building V2 against the design checklist surfaced two failures in V1 that had gone unnoticed, and one of them affected every visitor on a phone.

• The hero headline ran to three lines and the hero carried seven text elements. The cap is two lines and four elements. The fix worth recording is that the headline is now constrained in characters, not pixels: line count is a function of characters per line, so a pixel width fixes it at one viewport and breaks it at the next. It now holds at two lines from 768px up.
• Every breakpoint below 1440 scrolled sideways. The soft veil behind text bleeds past its own block on purpose, and that pushed the document 44px wider than the viewport on mobile and 32px on tablet. Both pages now clip it. The clip is overflow-x: clip and deliberately not hidden, because hidden makes the element a scroll container and would have broken the pinned panel in V2's spine.

Verified at 320, 375, 768, 1024, 1440 and 1920: no horizontal scroll at any width, the call to action above the fold at every width, and the pinned panel showing the correct screen at all four steps. tsc and the production build run clean, and impeccable detect reports nothing.

The spine showed the wrong screen for 15% of the scroll

Reported from reading the page, not from a test: the pinned panel kept showing the previous step's screen while the words had already moved on. It was real, it was measurable, and the cause is worth writing down because the broken version is the obvious one to write.

The panel picked the active step inside an IntersectionObserver callback. That callback only receives the elements whose intersection actually changed. When the step that had just become centred was not among them, there was nothing to select, so the panel held whatever it was already showing. That is why it read as stuck rather than merely late.

It is now driven by scroll and measures every step against the centre of the viewport on each pass, coalesced into one animation frame. Reading four rectangles is cheap, and the observer keeps the one job it is genuinely good at: telling the loop to stop when the section is nowhere near the screen.

The timing itself was also wrong, separately. The crossfade ran for 700ms, so the outgoing screen stayed the more visible of the two for about 350ms after each crossover, and the panel read as trailing the words even once the selection was correct. It is 420ms now.

Reshooting the screens, and why the first fix made it worse

The screens in the spine were cut off. They were viewport crops of a scrolling page, so the map was sliced through the middle, its legend lost a family, and the listing cards ran off the bottom edge.

The first attempt at legibility made that worse rather than better. The panel cropped each shot to 16/10 and then magnified a region of it, on the reasoning that a shot captured at 1800px and shown at 700px had spare resolution to spend. It did, and the type did get bigger, but the magnification cut away more of each screen than the original crop had. Legibility bought with cropping is not legibility on a page whose whole argument is that the picture matches the words.

What actually binds is height, and that took a while to see. The panel is pinned inside a viewport-height box, so a near-square shot renders small no matter how wide the column is, and the app's 14px interface type goes with it. The app's pages are tall, so a screenshot of a whole page is always near-square. Two changes together fix it:

• Frame the section, not the page. Each screen is now captured on the block its step is about, scrolled so the app's sticky header and its sidebar stay in frame. Every ratio lands between 1.26 and 1.50 instead of 0.89 to 1.04, and each frame ends in the gap between two cards rather than through one.
• Give the section more width than the rest of the page. The screens are the content here, so the container is wider and the panel takes more of it. At 1440 the shot renders at about 0.83× its capture width; at 1920 it is slightly over 1:1.

Four smaller things came out of doing it. The "view full size" control moved out from over the screenshot, where it collided with the app's own floating button on the calendar screen and where a pill laid over a product shot reads as though it belonged to the product. It was also hover-revealed, which on a touch device means never. The full-size view now scrolls on a phone instead of shrinking to fit, so it is a real magnification rather than the same size again. And one line of copy came down: step 02 no longer names three service families, because the sample market has no admin job open and the legend in the picture shows two.

The framing rules and the anchor for each screen are recorded in scripts/capture-marketing-shots.mjs, so the next reshoot does not have to rediscover them. Verified: no wrong-screen samples anywhere in the section, no horizontal scroll at 320, 375, 768, 1024, 1280, 1440, 1920 or 2560, no shot taller than the viewport it sits in, and the full-size view still takes focus on open and returns it on Escape.

V3: the background stops being a texture and becomes a place

V2's background was a procedural contour field. It was handsome, and it could have belonged to any product on earth. That is the thing worth naming, because it is the difference between a nice page and a page that could only be this company's: V3 replaces it with the actual market, and scrolling flies across it.

Every line in it is real, and that was the condition for doing it at all.

The rhythm is fly, arrive, hold, fly. The camera travels in the connective sections and holds almost still behind the four steps, because there the pinned screenshots are the subject and a moving map would be a third thing competing for the same attention. Hovering a pin names the job, so the label appears because a reader asked what a dot is rather than because the page decided to tell them.

Two sections got better without being rewritten. The handoff line "the same map, from inside the app" now has something to refer to. And the section that names the three families of work has a map behind it demonstrating exactly that, in exactly those colours — which also retired the one place the brand's amber was being spent on decoration rather than on the primary action.

Four decisions are load-bearing and two of them come from earlier scars on this project:

• Every line goes through the wide-line renderer, including the fine residential mesh that a plain line could draw for free. A plain GL line is one device pixel, so the same map arrives at a full pixel on a laptop and half of one on a retina screen. This is the same trap that made the V1 hero look blurry, where a width of 1.5 drew 0.75 of a CSS pixel.
• Nothing depth-tests. The layers sit a few metres apart on a plane viewed at a shallow angle, which is precisely the geometry that z-fights. Draw order does the work instead.
• Fog range follows altitude. A fixed density is either soup at 600 m or useless at 15,000, and the point of the pull-up over the market is that you can see the market.
• The fine road classes fade out with altitude, the way they do on a real map. Screen-space line widths mean that from 15 km up the residential mesh otherwise collapses into a solid haze and the county stops reading as a county.

Legibility was the risk, and it was measured rather than eyeballed: the glyphs are made invisible, the background behind them is photographed, and every text run is scored against what is actually behind it. 54 runs, none below its contrast floor, worst margin 1.35×. The first pass of that measurement was wrong in a way worth recording — it hid the whole content layer, which also hid the text veils that are the thing being given credit for.

The sample market moved to Short Hills

The demo had been set in Passaic County since it was relocated there from New York. It is now Short Hills and the towns around it: Millburn, Summit, Springfield, Livingston, Maplewood, Mountainside and Chatham.

This was not only a background change, and that is why it is worth its own section. The pins on the landing page are the sample market's real jobs, and the product screenshots show those same jobs, so moving the map without moving the market would have left three surfaces disagreeing with each other. All 26 jobs moved, along with the agents and contractors who post them and every string derived from them: applications, transactions, notifications, the areas people say they cover, and three brokerages that had been named after Paterson landmarks.

One thing improved by accident. The new market has an admin job open where the old one did not, so the opportunity map's legend now shows all three service families instead of two — which means the page can go back to naming all three, having been softened to two when the picture could only prove two.

A copy pass ran alongside it. "Everything you'd have driven across the county for" was a fragment with no subject, and after the move the county was the wrong noun as well. The hero now carries the tagline, held to two lines by breaking it at the sentence rather than wherever the width happened to run out. One line in the trust section was claiming an application shows more than it does, and now says what the card actually carries: a name, a rating, the reviews behind it, and whatever the applicant wrote.