Northlight

Northlight ingests tickets, chats and call transcripts, clusters them into product issues, and puts a number on what each unfixed issue costs in churn and support load. One plan: $59 a seat a month, $49 on annual. Viewers and ingest are free.

The buyer is a VP of Product who already owns four dashboards and has seen every hero mockup in the category. There is also nothing to photograph. So the page had to be made out of the product itself, or not made beautiful at all.

Support is an analytics stream nobody reads. Northlight reads it. The page tells that story three times, at three scales: the hero resolves six tickets, the middle of the page resolves the whole month, and the last card is resolved by the reader.

Everything sits on the dashboard's parts: a #0B1220 base, panel surfaces one step up, 1px borders at #223049 doing the depth work, mono microlabels as panel chrome. One month of numbers runs through all of it. 4,216 messages, 42 issues, and csv-export-timeout at 412 messages, 31 accounts and $18,400 of MRR at risk. The seven named issues add up with the 35 in the tail, and a unit test checks that they do.

Between the hero and the product, the problem section shows the inverse: eight real messages, tilted off the grid, each marked open. As the reader scrolls past, each one closes. Its status steps to closed · solved and a 1px rule strikes the quote. Under them sits the largest glyph on the page, an amber 230px 0: of them reached the roadmap. The footer answers it with the same 0 in green, set above the word unread.

In the hero, fifty support strings stream up behind the headline. A 1px cyan rule sweeps the screen once while the rest of the queue hushes; six rows step out of the noise onto a solid read highlight as it crosses them, then fly onto the ruled slots of one cluster card at −2°, with "queue." resting on its top border. The three figures tick together. Hover the queue and every line of the same issue lights, apart from the lines behind the copy, with a chip reading out its count and cost.

The Read is the one pinned section: a sticky stage over four and a half screens of scroll, drawn on a plain 2D canvas. Last month's 4,216 messages enter as a loose field of ticks, stream into four lanes by source, and step from unread to read as the same cyan rule crosses them. They repack into 42 bars sorted by volume, then pour into a ranked list. The list re-sorts by money at risk and csv-export-timeout climbs from third to first. A Slack alert docks, the issue exports as LIN-482 with three quotes attached, the fix ships nine days later and the bar shrinks from 412 ticks to 23.

One function of scroll progress draws the canvas and positions every row, so the ticks never drift from the table they land in. A single display number in the corner carries the beat: 4,216, then 42, 3rd, 1st, LIN-482, 23.

Nothing here is a screenshot. The queue is markup, and it is running.

Most software sites sell software with a picture of software. This one shows the job being done to a month the buyer recognises, in the order the product does it, and ends on the only number that matters to a VP Product: the issue costing the most money was third in the queue.

Pricing is an estimator. Drag seats and the bill moves at $59 each. Drag message volume from 1,000 to 60,000 and the $0 flashes but the total never changes. The reader proves the pricing claim by hand.

The form is the page's last cluster card. It docks in, its header echoes the company as it is typed, and on submit the read rule sweeps it and Pending steps to Held. Every button on the page reaches it, and the success panel opens by saying nothing was sent.

Every part is code and there are no image files. The hero headline is painted by the server and never animated. An inline script arms the card before first paint so its rows start as an empty table rather than flashing full and emptying when the script arrives. The canvas draws only when scroll progress changes, from layouts precomputed out of slots the CSS lays out, so CSS owns the composition and the canvas fills it.

Below 1024px the rail becomes a five-segment bar over the active step. Below 768px The Read keeps its pin with phone geometry: half the ticks, five rows and a folded tail, and the issue panel covering the rest of the list. Ask for reduced motion, or turn scripts off, and it renders finished: the five steps, a static histogram of the 42 issues, the ranked table and the shipped issue with its sparkline. Screen readers get that same finished version while the stage runs.