Contrail: search flights, then choose your seat inside the plane.
A flight search website where every flight opens a 3D model of its aircraft. You walk through the cabin and pick exactly where you sit.
Built by Gr8r for its own portfolio. Not client work.
- Client
- Contrail
- Project
- Flight search and booking website
- Platforms
- Website, desktop and mobile
The problem
Make choosing a seat feel like seeing it.
Most flight sites end with a flat grid of numbered squares. It is hard to tell how close a seat is to the wing, the galley or the exit, or what a fare really includes. Contrail had to keep search and comparison quick, then show the actual cabin before you commit to a seat.
- 1Seat maps are abstract grids
- 2Fares hide what is included
- 3Search and booking feel like separate sites
The workflow
From search to seat in four steps.
- 1
Search
Pick a route, dates, travellers and cabin.
- 2
Compare
Sort and filter flights, and check nearby dates.
- 3
Fare
Choose Basic, Standard or Flex with everything listed side by side.
- 4
Seat
Step inside the aircraft in 3D and choose where you sit.
The website
The aircraft is part of the booking.
Each step keeps the trip, the price and the next action in view. The 3D cabin and the flat seat map show the same seats, so you can switch between them.
- Fares
Every fare, compared plainly
The flight page lists the itinerary, three fares and a table of what each includes, from bags to changes and refunds.
- 3D cabin
Walk through the cabin
Suggest a seat and the camera moves to it inside the aircraft, with the seat's price, legroom and power listed beside it.
- Seat map
A seat map that explains itself
The flat map marks taken seats, exits, lavatories and cabins. Choosing a seat adds its price to the trip total straight away.
- Explore
Ideas before a search
Explore lists destinations from London by theme, with the cheapest return fare over the next six weeks.
Engineering
A real 3D model behind every flight.
Contrail is a Next.js site. Each aircraft is rendered in WebGL with three.js, so the same seat data drives both the 3D cabin and the accessible seat map. Flights, fares, seat availability and payments are simulated, and the site says so in its footer.
- Next.js app
- three.js WebGL aircraft models
- Seat map with keyboard navigation
- ⌘K command palette
Look: turn the aircraft before stepping inside
Choose: pick a seat from the flat map
Jump: reach any page or trip with ⌘K
Outcomes
A booking flow you can see.
What the website demonstrably does. Measured results will be added only with evidence and approval.
Seats in context
Every flight opens a 3D model of its aircraft, from the outside view to the cabin.
Clear fare choices
Three fares compared line by line, with the total updated at every step.
One path to booking
Search, results, fare and seat sit in one guided flow of six booking steps.
