Halyard — Freight Forwarder Concept Site in Framer

Concept project. Halyard is a freight forwarder that doesn't exist, not a client. We built it to show what a corporate site can do when the product logic actually works: light and editorial on the surface, real logistics underneath.

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 result shows the vessel, voyage and arrival date, plus 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 container's CO₂e, 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.

Home, Solutions, About, Careers and Contact. Open roles on the Careers page come from the Framer CMS, and the Contact page has a quote request form with loading and success states.

Designed and built in Framer with native layers and separate desktop, tablet and phone layouts.

The route map, container tracker, quote estimator, counters and clocks are custom React code components.

Type: Newsreader, IBM Plex Sans and IBM Plex Mono.

Try it live: https://halyard.site