Journey Map.

Slides are stops on a winding road; the camera travels the road and each panel hangs beside its stop.

Look

As designed

Use Journey Map in the Studio Open full screen

How it moves

Warm paper, a dotted map ground and a serpentine route that snakes across a canvas much larger than the screen. Each slide is a numbered stop with its panel pinned next to it; moving on slides the whole map to the next stop while an ember trail draws itself along the road. A route index across the top keeps every title on screen. Use it for roadmaps, customer journeys and stories told as a trip.

This is the specification the Studio sends to the model, written for Journey Map's own look. Change the look in the Studio and every value follows.

Palette

Background#f2efe9
Text#16130f
Muted#6f6a62
Accent#d8542a
Surface#ffffff
Hairlinergba(22,19,15,.14)

Type: Instrument Sans. Corners: 14px.

Layout

- The screen is a window onto a canvas, not a slide. The canvas is 200vw x 230vh, positioned absolutely, on the page ground (#f2efe9). A dot grid (radial-gradient circle of rgba(22,19,15,.14), 1.5px, repeating every 44px, extended 3000px past the canvas on every side) is the paper grain that makes travel legible.

- The route is a serpentine of stops on a 3-column, 3-row grid. Columns sit at 27 / 50 / 73 % of canvas width, rows at 22 / 50 / 78 % of canvas height. Stops fill row 0 left to right, row 1 right to left, row 2 left to right, so a 7-slide deck is 3 + 3 + 1. One SVG (viewBox set to the measured canvas size, pointer-events none, overflow visible) holds two paths through the stop centres with the corners rounded to 40px via quadratic curves: a road (2px rgba(22,19,15,.14)) and a trail (2px #d8542a, pathLength 1, stroke-dasharray 1, stroke-dashoffset 1 - --trail). The trail head is measured, not typed: sample the path 500 times per stop and take the nearest, so the trail ends exactly on the active disc.

- A stop is a 4.5rem disc (3.2rem on phones), a real <button>, with 2px rgba(22,19,15,.14) border, #ffffff fill, the two-digit number at 1.15rem / 700 tabular. Visited stops fill #16130f with #f2efe9 numerals. The active stop fills #d8542a with #ffffff numerals and scales 1.15; hover 1.06. Beneath each disc its title in .72rem / 600 caps, tracked .12em, in #6f6a62 (#16130f once visited or active), 11rem wide and centred. The first stop carries a "Start" pin above it and the last an "End" pin below, each a 1.15rem star glyph in #d8542a over a .68rem caps label.

- Each slide is a card panel positioned at its own stop: width clamp(26rem, 43vw, 48rem), max-height 72vh, #ffffff fill, 1px rgba(22,19,15,.14) border, radius 14px, padding clamp(1.3rem, 2vw, 2rem) x clamp(1.4rem, 2.2vw, 2.2rem). It hangs to the RIGHT of its stop on rows that run left to right and to the LEFT on the reversed row (a --side of +1 or -1 shifts it 3.4rem clear of the disc). Inside: a meta line ("Stop 03 of 07", .72rem caps, tracked .16em, #6f6a62), an h2 at clamp(1.55rem, 2.5vw, 2.3rem) / 700 / -0.03em, a lede, then the objects. Cover h2 clamp(2.2rem, 3.8vw, 3.6rem) / -0.04em with the meta reading "Stop 01 of 07, start"; the last meta reads "end of the road". Shared objects are re-metred for the panel (features three across, rings 4.4-6rem, stats three across, carousel one per view).

- Route index, always visible: a fixed top strip on a gradient from #f2efe9 (58%) to transparent, one column per slide. A 2px track runs through the dot centres, filled with #d8542a to var(--progress). Each node is a .62rem dot (border rgba(22,19,15,.14); done and active fill #d8542a; active scales 1.55) over its title in .7rem / 600 caps, #6f6a62, #16130f when active. Titles hide on phones. HUD "Stop 03 / 07" bottom-right in .75rem caps, tracked .16em, tabular; a hint "Scroll or press right arrow to travel the route" bottom-left that fades after slide 1.

Motion

- The camera is one transform on the canvas: translate(50vw - --cx, --ay - --cy), where --cx/--cy are the active stop's coordinates and --ay is where it should land vertically (50vh; 30vh on phones). JS only writes --cx, --cy and --trail on each change. The canvas transitions transform over 800ms cubic-bezier(.22,1,.36,1), the same duration and curve as the trail (stroke-dashoffset) and the index fill (width), so map, trail and index all arrive together.

- Panels: inactive ones sit at opacity .12 and scale .9 (transform-origin on the side nearest the stop); the active one goes to opacity 1, scale 1, z-index up, with box-shadow 0 22px 60px color-mix(in oklab, #16130f 12%, transparent). Opacity .55s ease, transform 800ms on the same curve, so during travel you see neighbouring panels ghosted in the distance. Set body data-reveal-delay="900" data-animate-delay="900" so objects land after the camera.

- Closing slide is simply the last stop at the end of the serpentine with the End pin; no special takeover. On phones the panel centres below the disc (width min(88vw, 30rem), max-height 60vh) and features stack to one column.

- Re-measure the route on load and on resize (debounced 150ms).

Navigation. arrows / Space / PageUp / PageDown / Home / End / 1-9; wheel and trackpad move one slide per gesture; every stop disc and every index node is a button with data-goto and jumps.