City Keys — transfers and tours
A landing for a Sochi transfer company: an arrivals board in the headline, a live price calculator and routes the car actually drives along.
Open the project
Try changing the district and the landing time in the calculator — the price and the car class react at once. Theme and language switch in the header.
Gallery
-
The price adds up line by line: the ride, the night rate, the child seat — and which car was selected -
Each tour route is shown as dots on a line, the way a diagram at a stop would -
The night theme, for whoever opens the site after landing in the dark -
About the project
The company meets people at the airport, drives them around the city and runs tours — and the whole visual language is borrowed from airport wayfinding: large signage type, monospaced codes and times, dotted routes, signal yellow on deep navy. The price summary is laid out as a boarding stub, because that is what the customer will check against the confirmation. The night theme is not decoration: half the flights land after dark, and the site gets opened in the taxi.
What is inside
- An arrivals board in the headline: the line flips between three promises, the letters turning in a wave from left to right
- The transfer price is calculated live — the car class follows the number of people and suitcases, the night rate kicks in at 23:00, and the finished quote is carried into the booking form
- The plane and the car follow their curves via getPointAtLength: exactly along the line and turned along the tangent, not on an approximated path
- Day and night themes on one set of tokens; the board and the logo mark stay dark in both — otherwise it would be yellow on white
- Both language versions in full, down to the step timings and the currency format