GUANGZHOU 23:40
HANGZHOU AIRPORT ARRIVED
DESTINATION 01:35

TRAVEL / 01

FROM SKY
TO STREET

A journey from the sky
to the street.

01 / 06

01 — ORIGIN

Guangzhou · departure city · 23:40

23:40

  • GUANGZHOU
  • HANGZHOU

0 KM

00% SCROLL PROGRESS

SCROLL  TO  TRAVEL  ↓

CASE / 01 — INTERACTIVE

FROM SKY
TO STREET

A scroll-driven map story. One continuous camera carries you from a departure city at night, through a flight across the coast, down to a taxi ride that ends at the destination.

Role
UI · Motion · Interaction
Year
2026
Discipline
Map information design
Stack
Canvas · SVG · rAF — no map API

Map as material

The map is deliberately stripped back — coastline, water, roads. Information density is kept low so the journey, not the basemap, is the subject. The palette shifts from a dark satellite tone in the sky to a paper-light street map on the ground.

One camera, one timeline

Scroll position drives a single damped timeline. The camera pans, tilts and scales with the plane and the taxi; routes draw themselves as they are travelled; markers arrive instead of loading.

Quiet interaction

The cursor adds a shallow parallax. Hovering a city name underlines it; hovering the aircraft scales it slightly. Everything else stays still, so the movement that matters is readable.

SPECIFICATION / 02 — VISUAL LANGUAGE

THE STYLE
BOARD

One page that fixes the rules the scroll story plays by — how the map is stripped back, which seven tones are allowed, how the type behaves, and how the plane, the taxi and the markers belong to the same family.

FIG. 01 Map style · palette · typography · icon set · route line · interface cards · storyboard
Palette
Seven tones only — #0B0D0F ink, #2E80F5 flight route, #F5B516 street route, #1E9B67 origin, #173B67 deep water. One accent per state, never two.
Type & icons
Inter / SF Pro throughout. Place names carry wide tracking, every time and counter is tabular mono. Plane, taxi and markers are drawn at one stroke weight so they read as one set.
Motion
One camera, one timeline. Routes draw as they are travelled, markers arrive instead of loading, and the palette moves from satellite dark to paper light as the journey lands.