# Contrail: Case Study | Gr8r Studio > 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. Source: https://gr8rstudio.com/work/contrail # 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 - [Motion Design](https://gr8rstudio.com/services/motion-design) [Visit the website](https://flights-gr8r.vercel.app/)[Discuss your website](https://gr8rstudio.com/contact) 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 search starts on the homepage, next to an upcoming trip and the cheapest fares from London. Results show prices for the days around your date, with filters for stops, bags, times and aircraft. The workflow ## From search to seat in four steps. 1. 1 Search Pick a route, dates, travellers and cabin. 2. 2 Compare Sort and filter flights, and check nearby dates. 3. 3 Fare Choose Basic, Standard or Flex with everything listed side by side. 4. 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. 1. 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. 2. 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. 3. 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. 4. 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 1. Look: turn the aircraft before stepping inside 2. Choose: pick a seat from the flat map 3. 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. ## Planning a booking experience people enjoy? Gr8r helps teams turn complex journeys into clear, engaging websites and working software. [Discuss your website](https://gr8rstudio.com/contact) ## Next project - [SaaSCRMCloseCRMA structured CRM for busy sales teams: tasks, deals, records and automation that reps can scan in seconds. Read the case study ](https://gr8rstudio.com/work/closecrm) - [AISaaSSellerOSOne workspace for marketplace sellers: sales, stock, shipments and profit, with an AI briefing. Read the case study ](https://gr8rstudio.com/work/selleros) - [AIFintechLedgerOSFinance operations where AI agents handle the routine work and people make the risky calls. Read the case study ](https://gr8rstudio.com/work/ledgeros) - [SaaSProductivityTask Management AppOne workspace for projects, tasks, deadlines and updates, from each person's list to the company timeline. Read the case study ](https://gr8rstudio.com/work/task-management-app) - [ProcurementOnboardingVelunoSupplier onboarding with parallel reviews, documents, renewals and a supplier portal in one workspace. Read the case study ](https://gr8rstudio.com/work/veluno) - [AIAutomationRelayA workflow automation workspace where AI agents run the work and people approve the risky steps. Read the case study ](https://gr8rstudio.com/work/relay) - [DronesLogisticsSortieMission control for autonomous delivery drones, with a live 3D map of every flight. Read the case study ](https://gr8rstudio.com/work/sortie) - [LogisticsOperationsAxleA fleet command centre for live tracking, dispatch, safety, compliance and maintenance. Read the case study ](https://gr8rstudio.com/work/axle) - [HealthcareSaaSCendaraHealthcare claim denials worked to resolution: documents, appeals, reviews and payer replies. Read the case study ](https://gr8rstudio.com/work/cendara) - [3DLogisticsLoadlineA transport operations platform with 3D load planning, dispatch and live fleet tracking. Read the case study ](https://gr8rstudio.com/work/loadline) - [WebsiteLearningKnowspaceA zoomable canvas of surprising facts, explored by topic, search and a small daily goal. Read the case study ](https://gr8rstudio.com/work/knowspace) - [WebsiteWellbeingHinterlandAn illustrated mental health publication: topics, essays, short practices and a clear route to support. Read the case study ](https://gr8rstudio.com/work/hinterland) - [WebsiteAgencyAtlasA design agency website told as a gallery visit, with old master paintings reworked as dot prints. Read the case study ](https://gr8rstudio.com/work/atlas) - [UX auditProcurementVeluno UX AuditOur own supplier onboarding product, audited like a client’s: 13 findings, 3 high, and what to leave alone. Read the case study ](https://gr8rstudio.com/work/veluno-ux-audit) - [UX auditHealthcareCendara UX AuditOur own claims product, audited like a client's: 12 findings ranked by impact, from sideways tables to hidden logins. Read the case study ](https://gr8rstudio.com/work/cendara-ux-audit) Ask Ali