Flight Status Card
Published Jan 27, 2025
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.
IA645 ∙ Gate B2
New DelhiBoston
On timeBoarding closes ∙60s left
Departure at 9:30PM
9:30PM
Casual Notes
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
That 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!