01
Composition instead of maps
The hero uses a grid, a route line and typography instead of a real map or heavy photography.
Routebound
A logistics experience made of direction and rhythm.
Routebound shows how layout, type and a layer of route microinteractions, including a simulated, timezone-aware dispatch status, communicate a real U.S. road-freight operation without building an actual logistics platform.
This tour explains the decisions behind the experience alongside the final interface.
The challenge
Ground the concept in the real U.S. road-freight market: FMCSA hours-of-service rules and recurring interstate corridors, where direction, distance and dispatch rhythm give the Routebound identity its name. The network replaces a generic, placeless setup, without relying on heavy photography, real maps or simulated tracking.
The objective
The experience uses composition, type and a layer of route interactions to convey predictability and scale, without building a functional logistics platform.
- Anchor the network in five real U.S. interstate corridors
- Communicate direction and predictability
- Replace photography with composition
- Simulate a dispatch status aware of each route's own timezone
- Keep the reading focused across every selected route
- Work across screen sizes
- Avoid simulating real tracking
The user journey
A simple choice between routes brings the visual composition closer to a concrete reading of origin, destination and frequency.
See the featured route in the hero
Hover a corridor to preview it without committing to the choice
Select a corridor among the five options
Read distance, estimated transit and frequency as the numbers animate
Follow the live dispatch status, shown in the route's own local time
Explore the network figures
Move on to contact
Key decisions
The experience stays direct, without real logistics infrastructure behind the interface.
02
Local, predictable data
A small set of routes feeds the selector; switching routes only updates local content.
03
Layered microinteraction, not noise
Hover preview, animated counters and a route line in motion stack without competing; motion reinforces the reading instead of distracting from it.
04
A dispatch status with real local time
The panel computes 'in transit' or 'next departure' from each corridor's own timezone (Eastern or Central), using the browser's native Intl API, with no geolocation and no external time service.
05
No simulated tracking
There is no geolocation, real maps or fleet data; the live status is calculated from the clock, not a real fleet, and the figures represent a fictional network.
06
A mark of its own instead of a generic glyph
The symbol is a vector outline of decreasing chevrons drawn in currentColor, so it follows the surrounding text color in both the light header and the dark panels without needing a separate version for each.
07
Named colors as CSS variables
Colors that used to be hardcoded per component became named CSS custom properties, easier to maintain and reuse even without a theme toggle: the mix of a light hero and dark data panels is a deliberate identity choice, not two alternate modes.
What happens behind the interface
Hovering or selecting a route updates the local origin, destination, distance and frequency data, with numbers animating to the new value. A clock continuously computes the selected route's own local time (Eastern or Central) to decide between 'in transit' and 'next departure', using the browser's Intl API. Everything runs client-side, with no external calls.
B2B identity anchored in the U.S. market, editorial route composition and layered microinteraction: hover preview, animated counters and a timezone-aware live dispatch status.
Accessibility and experience
Route selection is keyboard-navigable, with a visible focus state and clearly announced selection states.
- Keyboard route selection
- A visible focus state for every step
- High contrast on a light background
- Reduced motion respected
- Clear hierarchy across hero, routes and network
- A direct reading in any order
Responsive design
On mobile, route, figures and selection stack into one reading path; on desktop, the visual infrastructure gains lateral space and the route stays legible.
What this demonstrates
The concept communicates a road transport operation through composition, type and layered microinteraction, without building the real logistics infrastructure.
- A visual identity of its own (mark, typography, illustration)
- B2B visual identity anchored in the U.S. market
- Composition without heavy photography
- Layered route microinteraction (preview, counters, live status)
- Illustrative network figures
- Full responsiveness
- Accessibility and performance
- Localised corporate content
The standard behind this project
The demo follows principles that make a digital experience more useful, trustworthy and comfortable to use.
- A clear experience
- Works across screen sizes
- Keyboard navigation
- Feedback after actions
- Localised content
- Predictable behaviour
- No unnecessary complexity
- Clear boundaries for the demo
Technical details
Implementation in focus
- Route selection combines a "pinned" state (click) with a "preview" state (hover or focus), without losing the pinned choice when the pointer leaves.
- Distance and transit animate with an easing curve computed via requestAnimationFrame, respecting prefers-reduced-motion.
- The dispatch status recomputes each route's local time (Eastern or Central) with the native Intl.DateTimeFormat API, without a timezone library or external call, ticking every second.
- The Monday-Friday route is handled as a special case in the calculation, rolling forward to the next weekday without counting Saturday or Sunday.
- Motion along the route line reuses the same CSS animation already built for the hero, without heavy animation libraries.
- The dispatch clock lives in its own leaf component that re-renders on its own every second: the route list and the animated counters are no longer affected by the tick.
- The aria-live region now only announces a confirmed click or keyboard selection, not the hover or focus preview, which used to re-announce on every pointer pass.
- The symbol is a single vector path in currentColor, shared between the project page and the portfolio card — each used to have its own copy, and the card's was incomplete.
- The condensed display typeface is self-hosted via next/font/local, following the site's content security policy.
- The corridor illustration in the departure-window section uses the same color variables as everything else, so it never needs a manual update if the palette changes.
- Each language is kept in dedicated content files, with equivalent routes for the demo.
What this demo does not do
The experience illustrates a road transport identity; it does not present itself as a real logistics platform.
- Does not track real shipments
- Does not integrate with carriers
- Does not use maps or geolocation
- The "in transit" status is a local-time simulation, not a GPS or telemetry reading
- Does not account for holidays: the Monday-Friday route still treats a holiday as a normal weekday
- Does not replace a logistics management system
- Only presents illustrative routes and figures
View the project
Explore the Routebound identity, the route selector with hover preview, and the dispatch status that changes with each corridor's own local time.
View projectNext project
Return to the beginning of the sequence to see an appointment journey designed with the same care for clarity.
Explore next project: Três Grãos