Skip to content

CasesFinancial advisorConcept build

Harbourline Wealth

A flat-fee advice practice whose page is one continuous drawn line. It starts at a fix taken over three photographs of the practice's own mornings, draws a specimen plan as the reader walks thirty years down a staircase, and ends in gold over an intro call that draws the visitor's own plate.

What we build for financial advisers, and what it costs.

Sector
Financial advice, flat-fee fiduciary
Signature
The long line · the pen walks the hero, then draws the plan
Conversion
Intro calls: age, the decision, a time that suits
01

The brief

Harbourline Wealth is an independent, flat-fee fiduciary practice in Boston. Five advisors, $410M advised, retirement transitions and equity compensation for people who built careers in tech and biotech. No commissions and nothing to sell.

The people who call are 58 with a severance package that expires at the end of the month, or 47 with 68 per cent of everything they own in one ticker. They arrive suspicious, and the sector has earned it. The page has one job: earn enough trust in one scroll that a stranger will describe the decision they have not shown anyone.

02

The idea

A plan is a line drawn across decades, so the page is a line, drawn on a chart, in the language of security printing: engraved plates, specimen stamps, numbers set as the image, instruments the visitor operates.

The hero is the one place for photographs of the practice itself, and they are particular: the harbour at 6:10 a.m., the office on Commonwealth Avenue, an intro call at its round table. No handshakes, no couple on a beach. They run edge to edge under the header, and the headline lies along their foot as one line of Source Serif, on the calm dark band each photograph was cropped to put there. Below the hero, engraved plates carry the page, each with a hatched border and a fix at each corner. The six service figures print together on one proof sheet. Plate II is the specimen plan, the sounding is the fee arithmetic, Plate III is the visitor's own plan, and the page ends on an imprint seal.

The two ages the page serves, 58 and 47, stand at 13vw in Source Serif beside their stories, and the 1% bill in the sounding is set at 8rem and changes as you drag.

03

The signature move

One 1.5px stroke runs from the hero to the footer, gold on ivory and cream on pine. Its tip sits on the 70% viewport line, and everything drawn is drawn when it crosses that line. The six service figures draw on their proof sheet in turn, the rule first and the hatch last.

It begins at a fix. Engraved contours draw outward around the line's first point, beside the headline, and the line runs down across the photograph into the page. Under the photographs, on an ivory margin ruled with a gold neat line, three stretches of course stand for the three scenes. The shown scene's stretch draws in gold over six and a half seconds, and when it arrives the next photograph is wiped in behind the pen: a gold hairline that is the leading edge of the new picture, crossing left to right while the picture itself holds still. Stretches already walked stay drawn. Each is a button, and the course pauses with its own button, off-screen, in a hidden tab and under reduced motion.

In the plan it leaves the rail and walks thirty years as a staircase, measured from the real positions of four waypoints. The same scrub draws Plate II beside it, and each waypoint prints one display figure. At 55 the spine and every holding branch off, and $2.61M held prints on the ledger. At 62 italic numerals i to iv run down the gutter beside the brokerage account, the rollover IRA, the 401(k) and the Roth, threaded by a dashed withdrawal course. At 70 a floor rule sums the pension and Social Security to $6,160 a month at 66 units. Beyond, the house takes its beneficiary and 2031 prints as the plate's corner denomination. Strokes un-draw if you scroll back; figures, once written, stay.

On a phone the plate splits into four fragments, one under each waypoint, in real 13 to 15px type, each with its figure.

The numbers are the honesty.

04

Why it converts

Advisor sites hide the fee in a PDF. This one sets it as three courses on one staff, at 80px: $9,600, $15,000, $21,000 a year, agreed before any work starts.

The sounding lets the visitor drop a lead on their own balance. At $3,000,000 a 1% advisor bills $30,000 this year, $27,000 after a 10% fall and $33,000 after a 10% rise; Comprehensive stays at $15,000 whichever way the year goes. Below $960,000, 1% costs less than Foundation, the readout says so in plain words, and just above each crossover it says when a bad year would take 1% under the flat fee. Every number it prints is computed.

The five advisors rest as banknote engravings of the same sittings, contour lines and cross-hatched shadows in the page's two inks, and develop into photographs under a gold hairline as the reader reaches them. The claim beside them is checkable: the advisor who takes your intro call draws your plan.

The form asks for a name, an email, an age band, the decision on the table and a time, and no balance. Plate III is inked from the start as a specimen, and as the visitor answers it becomes theirs: thirty years from their age band, the step at 70, the decision's figure where it lives on the axis, and the signature of the advisor who would draw it. On submit the success panel leads with the disclosure and the plate is struck Specimen, not sent.

05

How it is built

One ScrollTrigger drives the staircase and sets four custom properties on Plate II; the stylesheet turns them into dash offsets and ink, so the plate prints finished without JavaScript or under reduced motion. The fee arithmetic, the plate's canon, Plate III's geometry and the hero's slideshow rules (advance, pause, off-screen, reduced motion) are pure functions under test.

The hero's timer is the course's own CSS animation, so pausing freezes the drawing and the clock together, and the wipe is two opposing transforms, so the pen can never drift off the edge it leads. The show never moves to a photograph that has not decoded. Only the harbour is preloaded; the headline sits on it measured, at 3.6:1 or better on the brightest pixels behind it at every desktop size, under a flat 0.22 darkening and no gradient. Every in-page link scrolls, sets the hash and moves focus to the section's heading. Every dim state is a colour step with its ratio written down, and the form's controls carry no name, so a submit without JavaScript puts nothing in the address bar.

Harbourline Wealth is a fictional firm, invented so we could build the site a flat-fee practice would need. There is no firm, no client money and no advice here: the fees, the advisors and the 30-year plan are illustrative, written to be built against. The intro-call form sends nothing and stores nothing. The build is real, down to the last line.

Let’s make your digital work compound.

Choose a time on Gabriel’s calendar. We’ll go through where you are today, what’s slowing growth, and what’s worth doing first, whether or not we work together.

Gabriel Espinheira

Gabriel Espinheira

Senior software engineer · English or Portuguese

A focused 30 minutes, not a sales pitch.