Open the atlas↗
01  /  12
↑↓ to drift
Design-a-thon · 2026

TerraPulse

A living atlas.
Spatial entry
Climate-adaptive
Travel-magazine soft
Hover the planet · 78 cities
01 — Where it fits

Travel tools start after you've chosen.

Google Maps
"How do I get there?"
good once you've decided
Instagram
"Where was someone just?"
a feed, not a map
Booking · TripAdvisor
"How much? When?"
starts after the choosing
TerraPulse
"Where should I go?"
the missing first step
02 — The approach

An atlas that breathes.

01
Spatial entry
Cities rise out of the globe. Tabs unfold like pages.
02
A palette per city
Five climates. Marrakech reads warm. Cusco reads cool.
03
Image leads
Photos do the talking. Text waits behind the click.
“
Open a city the way you'd open a  window.
TerraPulse · Design principle № 01
03 — Four layers

Globe to postcard,
one drift.

↻ loops every 4s
1
Entry
The globe
  • 3D earth
  • Hover → pin rises
  • Drag to spin
2
Marrakech
Morocco
Landmarks
Trending
Food
Weather
Voices
Cover
The cover
  • Editorial page
  • 5 BIG tabs
  • Climate-tinted
3
← back
Land·
Trend·
Food·
Landmarks
Sections
The pages
  • Zoom-in arrival
  • In-place tab flip
  • Image-first grid
4
Jemaa el-Fnaa
Detail
The postcard
  • Tap photo → lifts
  • Glass backdrop
  • Click outside drifts
04 — Climate atlas

5 palettes. Click a city.

interactive · click swatches
Coastal
Mist · sea · sand
Tropical
Peach · cream · sun
Mountain
Moss · fog · stone
Warm sun
Apricot · honey · gold
Urban
Silver · pearl · lilac
North Africa  /  31.63°, -7.98° UTC +01
Marrakech
Morocco
Landmarks
Trending
Food
Weather
Voices
06 — Interaction rhythm

Read it like a magazine.

01 · pin rises
Hover the planet.
Bali
Indonesia
L·
T·
F·
W·
V·
02 · pillar grows
The cover floats up.
← back
L·
T·
F·
Landmarks
03 · tab unfolds
Pages turn in place.
Ubud temple
04 · postcard lifts
Want the story?
07 — What makes it land

How it should feel.

Spatial · atmospheric · editorial
Spatial
"It feels like walking into a place."
  • 3D camera lock-on
  • Globe recedes, pillar grows
  • No modals
Atmospheric
"Every city has a mood."
  • 5 climate palettes
  • Auto-detected per city
  • Cascades through every surface
Editorial
"It reads like a magazine."
  • Variable serif type
  • Paper grain, dust orbs
  • Text retreats, image leads
08 — Under the hood

Just HTML, CSS, and three.js.

Engine
  • Three.js r128
  • Custom atmosphere shader
  • Pillar of light, hand-rolled
Surface
  • React 18, in-browser Babel
  • Phase-based state machine
  • Hand-written CSS system
Atlas
  • 78 curated cities
  • Wikimedia Commons photos
  • Offline fallback per city
Voice
  • Calm travel guide
  • Suggests by mood
  • Always one step away
09 — Image pipeline

AI for retrieval, not generation.

Every photo is a real place, indexed and matched.
01
Tag
City name + semantic tags
(landmarks · food · atmosphere)
→
02
Search
Query external sources
(APIs + image search)
→
03
Rank
Filter + relevance ranking
(drop off-topic, low-quality)
→
04
Pick
Most representative visual
per city + per landmark
Every image on the atlas is a real-world photo — semantically matched, never hallucinated.
10 — Try it

Hover the planet. Right here.

Embedded. Real product. Same code.
Running inline · open in a new tab ↗
11 — TerraPulse

A living atlas

Hover the planet. Watch cities rise.
78
Cities
5
Climates
4
Layers
① Submitted to
  • The Perfect Blend visual design system
  • Cookie Cutter Challenge interactive prototyping
  • Framaccino high-fidelity experience
Goal — a spatial travel experience system, beyond a traditional UI.
② AI content · Gemini API
  • City descriptions
  • Travel narratives
  • Landmark / food / trending summaries
AI writes the content. We designed the structure.
Thank you.