Journey Flow

• 

  Main page

• 

  review page

• 

  customize route path

• 

• 

  add photo

Inspiration

Travel memories are usually scattered across photos, messages, and disconnected maps. We wanted to turn those fragmented experiences into a single cinematic story that feels like a travel film rather than static content.

What it does

Journey Flow converts natural language travel descriptions into cinematic animated map videos. It generates routes with moving transport, destination reveals, photo moments, and optional video export. Users can also manually build journeys using a large location database and customize routes, styles, and media.

How we built it

We used MeDo as the core intelligence layer to convert natural language into structured journey data. The prompt design itself was not the hardest part. The more challenging and iterative work was integrating MeDo’s output with the rendering engine.

Everything in Journey Flow runs directly in the user’s browser. The rendering engine is fully client-side using MapLibre and a custom canvas animation system. Photos are stored locally in IndexedDB, which was also enabled through MeDo with a single prompt that set up persistent client-side storage for media handling.

The only remote step in the entire system is the LLM plugin call, which converts the user’s travel description into a structured itinerary JSON. That output then drives the entire animation pipeline in the browser.

The system uses Turf.js for curved path generation, a canvas-based animation layer for motion and visual effects, and Mediabunny for MP4 video export, all executed locally.

How we worked with MeDo

Development was highly iterative. The initial prompt-to-itinerary flow was relatively straightforward, but building the rendering engine required multiple rounds of refinement. We gradually broke the system into smaller components and worked through them one step at a time.

We started with basic itinerary generation, then expanded into map rendering, transport movement, trail effects, photo pauses, video recording, and customization tools. Instead of generating everything at once, we used focused conversations in which each iteration improved a specific part of the experience.

This approach made MeDo feel less like a code generator and more like a collaborative development partner.

Challenges we ran into

The main challenge was building a reliable rendering pipeline from MeDo’s structured output. While generating the itinerary was straightforward, making the animation engine robust enough to handle timing, edge cases, and multi-leg journeys required multiple iterations.

Synchronizing animation, camera movement, and video recording without performance issues in the browser was also difficult. We also had to ensure IndexedDB photo storage worked reliably across sessions and integrated cleanly into the rendering flow.

Accomplishments that we're proud of

We successfully built an end-to-end system that turns a single paragraph into a fully animated cinematic travel video, entirely running in the browser. The integration between AI-generated structure and real-time map animation works smoothly, including pause phases, photo storytelling, and video export.

The manual mode with a large location database also adds depth and control for advanced users, while still keeping everything client-side.

What we learned

We learned how powerful structured LLM outputs can be when paired with a rendering engine. Designing the system around a strict itinerary schema made it possible to separate intelligence from visualization cleanly. We also learned how far complex animation, storage, and video encoding pipelines can be pushed entirely in the browser.

What's next for Journey Flow

Next, we plan to improve route realism with smarter geographic pathing, add collaborative journey creation, and introduce sharing features for social storytelling. We also want to expand customization options and improve performance for longer and more complex travel narratives.

Built With

• baidu
• medo