← Return to the itinerary

Appendix to the itinerary

How This Voyage
Was Charted

Being the back page of the brochure — where the ship line explains its charts, inks, and instruments.

I. The Concept

Nomadic means travel, so the site is read as a 1920s grand-tour itinerary aboard a luxury steamship line. An idea buys its ticket and DEPARTS; it travels VIA six crafts — the services; it ARRIVES at three destinations — the real projects, hung as travel posters; and correspondence is received at the HOME PORT. A gold dotted route line draws itself down the page, stop by stop, with a small steamship marking your position on the crossing.

II. Design System

Gatsby-era print luxury: gold is an accent, cream carries the ground, and the ornament repeats from a small vocabulary — sunbursts, fans, chevrons, diamond rules, and double-rule frames (one of which borders the viewport for the whole voyage, like a poster frame).

  • Deep emerald
    #0E3B31
  • Champagne gold
    #D4AF6A
  • Cream
    #F2E8D5
  • Ink
    #141414
  • Cinzel — deco roman capitals for display: the crest, waypoint words, service names.
  • Poiret One — geometric thin accents: slogans, taglines, luggage-label regions, all letter-spaced caps.
  • Cormorant Garamond — the body serif; it sets the long contact copy like a formal invitation.

III. Tech & Motion

  • Route-line rig — after layout, a script measures each waypoint medallion and builds a cubic-bézier SVG path through them (with a gentle bow around the DEPART copy). The dotted gold path sits under a mask whose solid stroke is revealed by stroke-dashoffset, eased toward the scroll position each frame; the steamship glyph rides getPointAtLength and rotates to the path tangent.
  • Waypoint arrivals — each medallion unfolds with an expanding circular clip-path and a slow counter-rotation of its rays; content rises and fades in staggered 90 ms steps on a quart-out curve.
  • Sheen effects — the headline's gold foil is a clipped gradient whose position drifts; poster frames get a one-shot glint sweep on hover.
  • Reduced motion — the route line renders fully drawn, the sunburst holds still, and reveals are instant. Nothing is hidden; it is simply already there.
  • Stack — Astro 5, hand-written CSS, no client framework; self-hosted fonts via Fontsource; images resized to WebP with sharp.

IV. AI Assets

All four images were generated with the Higgsfield CLI against GPT Image 2 (quality high, 2K) at the aspect ratios noted, then resized to display size and converted to WebP with sharp. The prompts, verbatim:

voyage-owl-emblem Owl emblem · GPT Image 2 · 1:1
Art deco owl emblem, symmetrical geometric owl face made of fanned sunburst rays and chevrons, champagne gold linework on deep emerald green background, elegant 1920s luxury brand medallion, clean vector style, centered, no text, no letters, no watermark
voyage-poster-nl Amsterdam poster · GPT Image 2 · 2:3
1920s art deco travel poster illustration of Amsterdam canal houses and a bicycle by the water, flat geometric shapes, bold simplified forms, limited palette of deep emerald green champagne gold and cream, elegant vintage lithograph grain, NO TEXT anywhere, no letters, no words, no border text, no watermark
voyage-poster-id Bali poster · GPT Image 2 · 2:3
1920s art deco travel poster illustration of a Balinese temple gate with tropical frangipani flowers and volcano silhouette, flat geometric shapes, bold simplified forms, limited palette of deep emerald green champagne gold and cream, elegant vintage lithograph grain, NO TEXT anywhere, no letters, no words, no watermark
voyage-poster-vn Ha Long Bay poster · GPT Image 2 · 2:3
1920s art deco travel poster illustration of Ha Long Bay limestone karsts with a traditional junk boat with ribbed sails, flat geometric shapes, bold simplified forms, limited palette of deep emerald green champagne gold and cream, elegant vintage lithograph grain, NO TEXT anywhere, no letters, no words, no watermark

V. How to Reproduce

  1. Scaffold an Astro 5 static site; add Cinzel, Poiret One, and Cormorant Garamond from Fontsource.
  2. Generate the four images with the prompts above; convert to WebP at roughly twice display width.
  3. Lay the page out as itinerary bands — emerald, cream, emerald, cream, emerald — each opened by a waypoint medallion.
  4. Build the route-line rig: measure waypoints, draw one SVG path, reveal it through a dash-offset mask tied to scroll.
  5. Keep the ornament vocabulary small — sunburst, fan, chevron, diamond rule — and let cream carry the ground.

Designed & built by Claude (Anthropic) for Nomadic Owls. One of ten directions — see the other nine at nomadic-ten.pages.dev.

← Return to the itinerary