From 84cb38ba20a727f33fe5fb886b9db44452582b77 Mon Sep 17 00:00:00 2001 From: gator Date: Thu, 30 Jul 2026 23:48:45 +0000 Subject: [PATCH] Globe scroll hero ported from trekmap-shop --- index.html | 150 +++++++++++++++++++++++++++-------------------------- 1 file changed, 76 insertions(+), 74 deletions(-) diff --git a/index.html b/index.html index b8dd764..0a0e4ad 100644 --- a/index.html +++ b/index.html @@ -52,10 +52,48 @@ nav .links a:hover{color:var(--ink)} .btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(244,241,234,.22)} .btn.ghost:hover{border-color:var(--gold);box-shadow:none} +/* ── globe scroll story ── */ +.story{position:relative} +.story .sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center} +.globewrap{position:absolute;inset:0;will-change:transform} +#globe{width:100%;height:100%;display:block} +.intro{position:absolute;inset:0;display:flex;align-items:center;z-index:3;will-change:transform,opacity} +.intro .wrap{width:100%} +.intro h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:13ch;margin:.5rem 0 0} +.intro h1 em{font-style:normal;color:var(--gold);display:block} +.intro .lede{margin-top:18px;font-size:1.08rem;max-width:30em} +.intro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; + background:radial-gradient(70% 60% at 22% 50%,rgba(0,22,46,.94),rgba(0,22,46,.6) 45%,transparent 72%)} +@media(max-width:820px){.intro::before{background:linear-gradient(180deg,rgba(0,22,46,.9),rgba(0,22,46,.55) 60%,transparent)}} +.chapters{position:absolute;inset:0;z-index:4;pointer-events:none} +.chapter{position:absolute;top:50%;width:min(400px,42vw);transform:translateY(28px);opacity:0; + background:rgba(0,13,28,.72);backdrop-filter:blur(10px);border:1px solid var(--line); + border-radius:16px;padding:26px 26px 28px;margin-top:-120px;will-change:transform,opacity} +.chapter.left{left:max(24px,calc(50vw - var(--max)/2))} +.chapter.right{right:max(24px,calc(50vw - var(--max)/2))} +.chapter .coord{font-size:.66rem;letter-spacing:.16em;color:var(--gold);opacity:.8;font-weight:600} +.chapter h2{font-size:1.5rem;margin:12px 0 10px} +.chapter .cbody{color:var(--muted);font-size:.95rem} +@media(max-width:820px){ + .chapter{width:auto;left:20px;right:20px;top:auto;bottom:12vh;margin-top:0;padding:20px} + .chapter.left,.chapter.right{left:20px;right:20px} +} +.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5; + font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);opacity:.6} +.cue::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0; + background:linear-gradient(var(--gold),transparent);animation:cue 2.2s ease-in-out infinite} +@keyframes cue{0%,100%{opacity:.2;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}} + +/* LED wall-map band in the hardware section */ +.ledband{position:relative;height:230px;margin:44px 0 8px;border:1px solid var(--line); + border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#00162e,#000d1c)} +.ledband canvas{position:absolute;inset:0;width:100%;height:100%} +.ledcap{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:.72rem; + letter-spacing:.1em;color:var(--muted);opacity:.75} + /* ── hero ── */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden; background:radial-gradient(120% 80% at 78% 45%,rgba(11,25,44,.2),var(--midnight) 70%)} -#led{position:absolute;inset:0;width:100%;height:100%;z-index:0} .hero .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:60px} .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,var(--midnight) 8%,rgba(0,31,63,.86) 34%,rgba(0,31,63,.15) 62%,transparent 82%)} @@ -67,8 +105,8 @@ h1 em{font-style:normal;color:var(--gold);display:block} .legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;font-size:.82rem;color:var(--muted)} .legend b{display:inline-flex;align-items:center;gap:8px;font-weight:400} .legend i{width:8px;height:8px;border-radius:50%;display:block} -.legend .w{background:var(--gold);box-shadow:0 0 10px var(--gold)} -.legend .v{background:var(--teal);box-shadow:0 0 10px var(--teal)} +.legend .w{background:rgba(230,184,0,.55);box-shadow:0 0 8px rgba(230,184,0,.45)} +.legend .v{background:#ffd54a;box-shadow:0 0 10px rgba(255,213,74,.9)} .legend .o{background:rgba(143,163,184,.32)} .scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3; font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);opacity:.6} @@ -213,7 +251,7 @@ footer.f a:hover{color:var(--gold)} TrekMap
- The loop + The story The app Hardware FAQ @@ -222,57 +260,28 @@ footer.f a:hover{color:var(--gold)} -
- -
-

Pre-order · first production run

-

Hang your travels on the wall.

-

TrekMap is a travel bucket list that lives on a world map — and an LED map that glows with everywhere you've been and everywhere you're going. One list, two places: your phone and your wall.

-
- Reserve your map - Open the app -
-
- bright — been there - amber — on the list - dark — not yet -
-
- -
+
+
+
-
-
-
-

How it works

-

Wish it. Time it. Make it happen.

-

Most travel apps are a log of where you've been. TrekMap is built around the part that comes first — wanting to go.

-
-
-
-

01 / WISH IT

-

Save it in one tap

-

Share an Instagram or TikTok reel straight from your phone. TrekMap watches the video, reads the signs and the audio, works out the actual place, and files it with a cover photo.

- -
-
-

02 / TIME IT

-

See it build up

-

Countries glow by how badly you want to go. Explorer Mode splits 57 countries into states, prefectures and regions, so progress is honest instead of a flag you coloured in from the airport.

- -
-
-

03 / MAKE IT HAPPEN

-

Go when it's cheap

-

TrekMap hunts fares from your home airport straight to the places you've actually saved — not a feed of deals to somewhere you never wanted to go.

- +
+
+

Pre-order · first production run

+

Hang your travels on the wall.

+

A travel bucket list that lives on a world map — and an LED map that glows with everywhere you’ve been and everywhere you’re going.

+
+ Reserve your map + Open the app +
+
+ full gold — been there + ember — on the list +
+ +
+
@@ -302,6 +311,8 @@ footer.f a:hover{color:var(--gold)}

One LED per region. Yours lit the way you travelled.

The map syncs over Wi-Fi with your list. Wishes breathe amber. Places you've been sit bright and steady. It is the only wall art that is out of date the moment you land somewhere new — in a good way.

+

TrekMap Mini

@@ -379,6 +390,8 @@ footer.f a:hover{color:var(--gold)}
+ +