Journey Map
Journey Map
The map on the phone is the city below it: a destination is typed and the route draws twice at once, a coral line on the phone's map and a coral ribbon down the streets of an architectural model, with 3D stop pins popping up.
A pale architectural model of a harbour town, with a street grid, park, little shops, a market hall, a river and a bridge, laid on a wooden table in a warm studio where a low late-afternoon key throws long raking shadows. Five beats over 26 s at 120 bpm: low between the model's streets looking up, a tight close, a wide pass as a route draws across the town, a raking close-up, then a climb to a high overview.
- Length
- 26 s
- Scenes
- 5
- Device
- iphone
- Style
- realistic place
- Camera
- low angle, orbit, establishing wide, ultra closeup, rack focus, crane
//
TPL-JOURNEYMAP — template 10 of 10: MAP / JOURNEY. 26 s, 16:9, 30 fps, no VO.
Sample app: ROUTELY, a delivery / trip tracking iPhone app. Treatment: treatment.md.
THE IDEA. The map on the phone IS the city below it. A white architectural model of a little
harbour town stands on an oak table; the iPhone hovers over its back-left corner, fixed, like
the city's own sky. You type a destination, and the route draws twice at once — a coral line
across the phone's map and a coral ribbon down the model's real streets — while 3D pins pop up
at each stop as small cards. Then the ETA, ultra close. Then the camera climbs to see the whole
journey and the name.
THE WORLD (1 unit = 1 mm). Diorama slab top y = 0, x ±560, z -820..560: a 4×4 street grid
(streets at x, z = ±500, ±250, 0, 50 mm wide; 200 mm blocks on 4 mm sidewalk plinths), white
massing buildings from a seeded `repeat` (64 lots, the 4 special blocks skipped), a park with a
pond and a ring of trees at block (-125, -125), Rosa's Bakery (-375, 375), Bloom & Co. florist
(375, 125), the Harbor Market hall (375, -375) with a terracotta prism roof, a river across
z -650..-550 with a bridge, the north bank where the wordmark stands. The slab sits on an oak
table (top y = -50) in a warm cream studio; a low golden key from front-left throws long
shadows to the back-right. The phone: iphone scale 2 at (-300, 330, -420), rotation (-20, 20, 0),
NEVER translated (a device position channel blanks screen overlays).
THE ROUTE. P0 (-375, 250) → P1 (0, 250) → P2 (0, 0) → P3 (250, 0) → P4 (250, -250) →
P5 (375, -250): a `source(factory=path3d dims=3)` ribbon 14 × 3 mm whose keyframed `d` grows
leg by leg (the points not yet reached ride collapsed on the head; key 0 is a tiny non-collinear
knot so the sweep's plane normal is +Y). The phone map draws the same five legs as cards growing
from their start edge (`scale` + the pinning `position`, the expand-input rig) on the SAME keys:
1.00 · 2.25 · 3.10 · 3.95 · 4.80 · 5.20 (scene s3). Map ↔ world: x' = 35.5 + 0.06 x,
y' = 64 + 0.06 z (screen mm).
PALETTE. route coral #FF5B3A · navy ink #13202F · teal #14B8A6 · map paper #E8E2D6 ·
model white #F4F1EA / #E2DCCF · park #AFCB94 · water #7DB7D6 · oak #A17B55 · studio cream #EFE6D6.
BEATS AND SCENES (music 120 BPM, a beat = 0.5 s; every cut on a beat):
s1-hook 0–6 low in the model's avenue looking up at the hovering phone (black glass);
the screen ASSEMBLES (ui-assemble rig): map from the left, search bar from
above, the ETA sheet from behind the lens; exploded staircase read from the
right at 3.8; packs home 4.5–5.65 as the camera swings to the hero front
s2-search 6–10 close on the search bar: "Harbor Market, Pier 9" TYPES (typewriter); the
suggestion lands; tap
s3-route 10–17 wide over the model: the route draws across the streets AND on the phone's
map in sync; the courier puck rides it; pins pop at Rosa's (0.6), Bloom (3.95),
Harbor Market (5.2)
s4-eta 17–21 the ULTRA CLOSE-UP: into the glass on the ETA card, 55–58° off the screen's
normal; the minutes roll 12 → 11 and the progress bar fills; rack to the
drop-off row
s5-end 21–26 the camera climbs from the phone to the whole journey; "Routely" rises in
text3d on the north bank, the line under it
TEMPLATE SWAP POINTS (re-skin for your own app):
· APP NAME: text3d#wordmark text= (s5) and the header line above; the tagline text3d#tagline.
· PALETTE: the `materials` block (route, coral-sign, ink-sign, model whites, park, water, oak)
and the hexes in tpl-journeymap.screens.html; then re-run the converter and re-paste.
· SCREENS (tpl-journ