DESCRIPTION
Serko.ai is an AI travel agent for business trips. The site shows the product by letting it run. On the home page a trip gets booked on a globe while you watch, from San Francisco to New York. Further down, a canceled flight gets rebooked as you scroll. I built these animated parts as creative dev at N4 Studio.
MY ROLE
Built the hero globe and its animation sequence, the scroll cards, and the approval and spend animations on the For companies page. The globe and cards run from one script that reads its elements and settings from Webflow, so the team can change copy, cities and cards in the Designer.
MeTHOD
The globe is a transparent WebGL canvas on top of the Webflow gradient. Dots, grid, route and cards all get their position from the same camera, so a card stays on its city when the window resizes. All the dots draw in one call, and land comes from a 5 KB mask baked into the script instead of loading map data.
The text is real DOM. Pills and cards are Webflow elements that the script picks up and plays on a timeline, with a typewriter that doesn't shift the layout.
The scroll cards run in five steps. Scroll picks the step and the animation plays at its own speed, so scrolling fast never leaves it stuck half way.
View more
VWFNDR
