From a sharing page to a planning tool
One HTML file, 33 landmarks
Last September I made Global Journey — a video where world landmarks rise from blueprint paper as 3D relief miniatures. After publishing the video, I shared the prompts on a single HTML page hosted on Gemini. People could browse prompts and copy them, but that was it.
Over time I kept thinking: this could be more useful. What if you could search landmarks on a map, switch between visual styles, plan a route with automatic camera transitions, and export the whole script?
So I rebuilt it from scratch.
一個 HTML 檔，33 個地標
去年九月我做了環球旅程：城市浮雕之旅——一支世界地標從藍圖紙上浮現的 3D 浮雕動畫影片。影片發佈後，我把所有 prompt 放在一個 Gemini 分享頁面上，讓大家可以瀏覽和複製。
但用了一陣子後，我一直覺得：這可以更好用。如果能在地圖上搜尋地標、切換視覺風格、規劃路線並自動生成轉場 prompt、最後一鍵匯出整份腳本呢？
於是我從頭重寫了。
What it does now
97 landmarks, six continents
The original video had 33 landmarks. I expanded to 97 — covering places the first version missed: Petra, Machu Picchu, the Great Barrier Reef, Table Mountain, the Galápagos Islands, and dozens more.
Every landmark has:
- An English MidJourney prompt with
--ar 16:9 --style raw - A Chinese translation
- A cinematic animation prompt for video tools (Seedance / Kling)
- Latitude and longitude for the map
- A
featuresfield used by the style templates
97 個地標，六大洲
原版影片有 33 個地標。我擴展到 97 個——補上了第一版沒有的地方：佩特拉、馬丘比丘、大堡礁、桌山、加拉巴哥群島等等。
每個地標都有：英文 MidJourney prompt、中文翻譯、影片動畫 prompt、經緯度座標、以及風格模板用的特徵描述。
Interactive map
Leaflet + vintage filter
The map uses Leaflet with OpenStreetMap tiles — free, no API key. I added a CSS sepia filter to match the blueprint aesthetic of the project:
.leaflet-tile-pane {
filter: sepia(0.4) saturate(0.7) brightness(1.05);
}
Markers are color-coded by continent. When too many overlap, leaflet.markercluster groups them into numbered circles — click to zoom in and see individual landmarks. Click any marker to see its name, location, and a "View Prompt" button that scrolls down to the card.
The map also responds to the continent filter pills. Pick "Asia" and only Asian landmarks remain on the map.
Leaflet + 復古濾鏡
地圖用 Leaflet + OpenStreetMap 圖磚——免費、不需 API key。我加了 CSS sepia 濾鏡讓地圖符合這個專案的藍圖美學。
標記依大洲分色。地標太密集時，markercluster 會把它們合成帶數字的圓圈——點一下就放大看到個別地標。點任何標記都能看到地標名稱、位置、以及一個「View Prompt」按鈕直接跳到下方卡片。
地圖也會跟著大洲篩選列連動。選「亞洲」，地圖上就只剩亞洲的地標。
Style templates
Five ways to see the same landmark
The default style is the original 3D relief on aged blueprint. But I added four more: Watercolor, Cyberpunk, Ukiyo-e, and Steampunk.
When you pick a style, every card updates instantly. The composed prompt appears highlighted at the top of each card, with the original prompt dimmed below for reference. The formula:
{city}, {country}: {style.prefix} {landmark.features}, {style.colors} {style.suffix}
So "Taipei 101" in Ukiyo-e becomes something like: Taipei, Taiwan: Japanese ukiyo-e woodblock print of a skyscraper with stacked-pagoda design, deep indigo, vermillion, and gold leaf --ar 16:9 --style raw
同一個地標的五種風格
預設風格是原始的藍圖上 3D 浮雕。但我另外加了四種：水彩、賽博龐克、浮世繪、蒸汽龐克。
選一個風格，所有卡片立刻更新。組合後的 prompt 高亮顯示在卡片上方，原始 prompt 淡化顯示在下方做對照。這樣你可以快速比較不同風格的效果，直接複製想要的那個。
Route planner
Plan a cinematic journey
This is the feature I'm most excited about. You add landmarks to a route, drag to reorder them, and the tool auto-generates Chinese transition prompts between each pair:
穿梭動畫，鏡頭從台北101飛越海面，穿過城市與森林，來到一片空白地面上，建築物如雨後春筍一般從空白地面拔地而起
Hit "Export .txt" and you get a complete production script: each landmark's full prompt, followed by the transition to the next stop, ready to paste into your video workflow.
The route persists in IndexedDB, so you can close the browser and come back to it later.
規劃一條電影級路線
這是我最興奮的功能。把地標加入路線、拖拉調整順序，工具就自動在每對地標之間生成中文轉場 prompt。
按「Export .txt」就會匯出一份完整的製作腳本：每個地標的完整 prompt，加上到下一站的轉場動畫 prompt，可以直接貼到影片製作流程中使用。
路線存在 IndexedDB 裡，關掉瀏覽器再打開還在。
Custom generator (BYOK)
Bring your own Gemini key
All 97 landmarks can be browsed without any API key. But if you want to generate a prompt for a landmark that's not in the list — say, your hometown temple or a building you saw on a trip — you can enter your own Gemini API key.
Type a place name, hit Generate, and it returns a prompt in the same 3D relief style, with Chinese translation and animation prompt included.
The key is stored in localStorage and never leaves your browser. The API call goes directly from your browser to Google's servers — there's no backend involved.
自帶 Gemini Key 自訂生成
97 個地標不需要任何 API key 就能瀏覽。但如果你想生成清單以外的地標——比如你家鄉的廟或旅行中看到的建築——可以輸入自己的 Gemini API key。
輸入地名、按 Generate，就會回傳同風格的 prompt，附帶中文翻譯和動畫 prompt。
Key 存在 localStorage 裡，不會離開你的瀏覽器。API 呼叫從你的瀏覽器直接到 Google 伺服器——沒有經過任何後端。
Technical choices
Why Vite + vanilla TypeScript
No React. No framework. The original was a single HTML file — the content is static, the interactions are straightforward. Vite gives me TypeScript, hot reload, and a production build. Vanilla TS keeps the bundle small and the code easy to follow.
The project structure: data lives in src/data/, each UI section is a component in src/components/, services handle IndexedDB and API calls, utils handle HTML escaping and prompt composition.
為什麼用 Vite + 原生 TypeScript
不用 React。不用框架。原版是一個 HTML 檔——內容是靜態的、互動很直覺。Vite 給我 TypeScript、hot reload、和 production build。原生 TS 讓打包檔小、程式碼好讀。
Try it
Global Journey Prompt Planner — browse, search, plan, export. No account needed.
See the video that started it all: Global Journey: A City Relief Adventure
Read how the video was made: Behind the Scenes — 從一張截圖到六大洲一鏡到底
來玩
Global Journey Prompt Planner — 瀏覽、搜尋、規劃、匯出。不需要帳號。
看看一切的起點：環球旅程：城市浮雕之旅
影片幕後：從一張截圖到六大洲一鏡到底
