Basecamp · guided treks
Trekking & Camping
A field guide to your snow peak adventures, from the first switchback to the summit.
100kPeople have explored
Ama Dablam14 days · 13 nights★★★★★
Cloud ridge7 days · 6 nights★★★★★
Valley lakes5 days · 4 nights★★★★☆
Pine trail3 days · 2 nights★★★★☆
Trail map
A route draws itself up a mountain photo in a shaped frame, a walker climbs it, clouds drift at their own depth; a strip of routes scrolls below.
Use when: Travel, outdoor, events and anything with a route: treks, tours, races, deliveries, a journey over a place.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/trail-mapFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short kicker above the headline. |
| headline * | string (8–48 chars) | — | Two to five big words. |
| subheadline | string (≤ 140 chars) | — | One sentence under the headline. |
| primaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| secondaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| photo * | object | — | A landscape photo the route climbs; it is cropped to fill the frame. |
| src * | string (≥ 1 chars) | — | |
| alt * | string (4–200 chars) | — | |
| trail * | object | — | |
| points * | array[] (2–24) | — | The route, from the start to the end, over the photo. |
| stops | integer[] (≤ 8) | [] | Indices of points marked as stops along the way. |
| label | string (≤ 28 chars) | "Trekking distance" | |
| distance * | string (≤ 12 chars) | — | Counted up when the route reaches its end, e.g. “70 km”. |
| description * | string (≤ 200 chars) | — | The route in words, for screen readers. |
| explorers | object | — | |
| count * | string (≤ 8 chars) | — | e.g. “100k”. |
| label * | string (≤ 40 chars) | — | |
| initials | string[] (≤ 4) | [] | Shown as avatars; no photos of real people needed. |
| destinations | object[] (≤ 8) | — | A scrolling strip of routes under the hero. |
| src * | string (≥ 1 chars) | — | |
| alt * | string (4–160 chars) | — | |
| name * | string (2–28 chars) | — | |
| duration * | string (≤ 24 chars) | — | e.g. “7 days · 6 nights”. |
| rating * | number (0–5) | — | |
| reviews * | integer (0–9007199254740991) | — | |
| href | string | — |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| accent | string | "oklch(0.68 0.19 42)" | The start pin, the walker, the main button and the stars. |
| intro | boolean | true | The route draws itself from the start to the end, stops lighting up as it passes. |
| walker | boolean | true | A glowing dot walks the route, over and over. |
| parallax | boolean | true | Photo, route and clouds shift at different depths with the pointer. |
| clouds | boolean | true | Soft clouds drift over the edges of the frame. |
The same hero as a Web Component
Web Component · no framework
<sg-trail-map>
The same engine, driven by attributes: a green route, no clouds, a shorter climb up Ama Dablam.
42 kmTo base camp