Advisor OS showcase · v8 · design guide
VOYAGE
Sailing directions for the chart itself
§ 1 · Concept
The concept
Advisor OS drawn as an antique admiralty chart: four harbours in career order, joined by one red plotted passage that draws itself as you scroll. Chart precision over pirate kitsch — graticule, soundings, anchorages and a lighthouse, all built from real product facts and real product numbers.
§ 2 · Palette
Palette
- #f2ecdd
- Chart bone — the paper
- #1d3a5f
- Sounding navy — all line work and text
- #cfe0dd
- Shoal tint — shallow-water fills
- #c03b2d
- Signal red — route, pennants, CTAs. The only loud colour
Product colours appear only as tiny harbour-light dots: CMFAS Prep#2dd4bf · Pick a Time#7aa2ff · ActivityTracker#ff6b3d · FourLens#b79bff
§ 3 · Type
Type system
Cartouche titles, harbour names, section heads. A digitisation of a 17th-century face; its rough edges read as ink on rag paper.
One italic line per harbour, spoken like a log entry.
Coordinates, waypoint lines, dues tags, legend, buttons, soundings. The surveyor's hand against the poet's.
§ 4 · Signature
The plotted passage
One red route line runs the length of the page, drawn from harbour to harbour as you scroll — stroke-dashoffset scrubbed against a piecewise scroll map, with a ship marker riding the tip via getPointAtLength(). At each harbour the map plateaus, so the ship holds in the dashed anchorage circle while you read that product's sailing directions. The route ends at a lighthouse whose conic-gradient beam sweeps past the closing CTA.
Why: the four products are only honest as a sequence — get licensed, fill the calendar, do the work, read the room. A passage plotted through four separate harbours says "one course, four ports" without ever pretending they share a login.
§ 5 · Techniques
Techniques used
- Scroll-scrubbed SVG stroke — the route is one path; stroke-dasharray equals its measured length and dashoffset is eased toward a target on every scroll frame (vanilla rAF, no library).
- Marker along a path — the ship's position and heading come from getPointAtLength() at the drawn length and a trailing sample for the angle.
- Piecewise scroll mapping — waypoint elements are measured after layout and font load; each contributes a reach point and a hold point, giving the anchorage pauses.
- Procedural chart furniture — compass rose ticks, depth soundings (real figures only: 3684, 9, 104, 12, 5, 48, 8, 4) and shoal blobs are generated by seeded code, not drawn by hand and not bitmaps.
- Conic-gradient light — the lighthouse beam is a masked conic-gradient wedge on a slow CSS rotation.
- Two-layer parallax — shoal fills and soundings drift at ±2–3% of scroll; nothing else moves.
- Graticule frame — the fixed chart border and its degree ticks are pure CSS repeating gradients.
- Reduced motion — prefers-reduced-motion draws the full route at once, moors the ship by the lighthouse and holds the beam lit and still.
§ 6 · Scorecard