Wanderpin - the globe looked dumb on a 20 km hop, so I taught it to zoom
This batch turns a Wanderpin trip from a thing on your screen into a thing you can send to a friend - with a real link preview, an embeddable globe, and a reel that finally looks good on short hops.
Share a journey, for real
Hit Share and you get a public link (/t/slug) in a box, plus Copy, the native share sheet, and WhatsApp / Instagram / X buttons. The interesting part is what happens when someone opens that link:
-
/t/:slugis server-rendered (api/share.ts) and serves a dynamically generated Open Graph image (api/og.tsxvia@vercel/og) - so pasting a Wanderpin link into a chat unfurls into a proper preview card instead of a blank rectangle. - There’s an embeddable globe too:
/embed/:slugrenders just the spinning globe (a tiny route check inmain.tsxswaps the whole app forEmbedView), and the share dialog hands you the<iframe>snippet. - Shared trips auto-expire after 7 days via a
pg_cronjob, so the table stays small and old links quietly die.
The reel got smarter - 3D for the short hops
The globe fly-through looks flat when two stops are 20 km apart - the arc is a stub and the camera barely moves. So now the Play reel checks each leg: anything under 200 km crosses into the 3D map (terrain + buildings) with a zoom picked from the distance, longer legs stay as globe arcs. It asks once before playing, and video recording stays globe-only so captures never go blank.
What bit me
- Instagram has no web “share a link” intent (unlike WhatsApp/X). So the IG button copies the link and opens Instagram - the native share sheet handles it properly on phones.
-
The slug kept vanishing from the URL. A shared trip was calling
replaceState("/")the instant it loaded, so/t/slugdisappeared mid-playback and you couldn’t re-share what you were watching. Moved that reset onto the “Create yourslongs. -
The reel switch reused the globe↔3D handoff plumbing, and the type-checker caught a
flyTosignature mismatch before it shipped - the map handle wants{ zoom }, not a bare number.
Where it stands
It all builds clean, Try it: https://wanderpin-ecru.vercel.app/
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.