Halyard

Halyard is a five-page corporate site for a freight forwarder that doesn't exist. It's light and editorial, and the logistics on it actually work.

• Live route map: 16 real ports on a world map, with containers moving along their trade lanes. Hover a port to see its local time and weekly sailings.

• Container tracking: enter a container number or pick a sample. Numbers are checked against the real ISO 6346 check digit, and a mistyped one gets the corrected number suggested. The card shows the vessel, voyage and arrival date, and a timeline of every milestone from booking to delivery.

• Quote estimator: pick two ports, a container type and the cargo weight. It returns the transit time, sea distance, an indicative rate range and the CO₂e for that container, estimated from the distance between the two ports.

• Motion throughout: headlines arrive word by word, stats count up as they scroll into view, sections reveal on scroll, and pages fade into each other. The office clocks show each office's live local time and whether it's open.

• Five pages: Home, Solutions, About, Careers (open roles come from the Framer CMS) and Contact (a quote request form with loading and success states).

Built in Framer with native layers and responsive desktop, tablet and phone layouts. The map, tracker, quote estimator, counters and clocks are custom React code components. Type: Newsreader, IBM Plex Sans and IBM Plex Mono.