ganesha/
logwritingworkgallerygraphabout
  1. Home
  3. Flight Status Card

Flight Status Card

2025
<1 min
ganesh kumar

i'm ganesh kumar. design engineer. i build with mycelium, figma, typescript, and whatever's in between since 2018 & believe the best interfaces are the ones you forget you're using... read about the work and team i'm after

  • Email
  • Twitter
  • LinkedIn
  • Github
  • Substack

Stumbled across this really clean flight tracker UI on Twitter (aka X) last weekend and couldn’t resist trying to recreate it myself. After a few hours of tinkering (and maybe a coke or two) on Saturday night, I managed to put together this little flight status component. Nothing fancy, just a fun little weekend project.

Air India Flight
Air India Logo

IA645 ∙ Gate B2

New DelhiBoston

On time

Boarding closes ∙60s left

Departure at 9:30PM

9:15PM
9:30PM

Casual NotesPermalink

Twitter scrolling at midnight sometimes leads to the best impromptu design sessions!

  • Status Indicators - Those little colored pills are oddly satisfying to animate
  • Airport Codes - Found a free API with IATA codes that made this way easier
  • Time Display - Played with a few formats before settling on this cleaner approach

Subtle popup animation for boarding status? Totally accidental… i was messing with opacity values and ended up liking how it looked. Sometimes the best design decisions happen when you’re not trying too hard!