THE
SONDER
PROJECT

A card game that turns the strangers around you into your greatest source of inspiration, local secrets and hidden wisdom.

THE SONDER PROJECT

I just got a card

What is Sonder?

(function () { var SRC = [ "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js", "https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js", "https://unpkg.com/[email protected]/build/three.min.js" ]; function load(i) { if (window.THREE) { initGlobe(); return; } if (i >= SRC.length) { var el = document.getElementById("globe-stage"); if (el) el.innerHTML = '

Three.js konnte nicht geladen werden.

'; return; } var s = document.createElement("script"); s.src = SRC[i]; s.onload = function () { window.THREE ? initGlobe() : load(i + 1); }; s.onerror = function () { load(i + 1); }; document.head.appendChild(s); } if (document.readyState === "complete") load(0); else window.addEventListener("load", function () { load(0); }); })(); function initGlobe() { "use strict"; /* ================= Einstellungen ================= */ var CFG = { speed: 1.5, direction: "left", smoothing: 8, dragSpeed: 5, stopOnHover: true, scale: 8, initialLat: 23, initialLng: -23, fill: "dots", fillColor: "#ffffff", dotColor: "#ffffff", dotSize: 5, density: 8, allDots: false, oceanColor: "#111111", showGrid: true, gridColor: "#D4D4D4", showOutline: true, outlineColor: "#ffffff", outlineWidth: 1, detail: 5, markerColor: "#00f7ff", markerSize: 40, markers: [{ lat: 50.11, lng: 8.68 }] }; /* ================================================= */ var stage = document.getElementById("globe-stage"); if (!stage) return; if (typeof THREE === "undefined") { stage.innerHTML = '

Three.js konnte nicht geladen werden.

'; return; } function lin(v, a, b, c, d) { return a === b ? c : c + ((v - a) / (b - a)) * (d - c); } function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); } function rgba(input) { if (!input || !input.trim()) return { hex: "#000000", a: 0 }; var s = input.trim(); var m = s.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)/i); if (m) { var r = clamp(parseFloat(m[1]), 0, 255) | 0; var g = clamp(parseFloat(m[2]), 0, 255) | 0; var b = clamp(parseFloat(m[3]), 0, 255) | 0; var a = m[4] !== undefined ? clamp(parseFloat(m[4]), 0, 1) : 1; var hx = "#" + [r, g, b].map(function (n) { return ("0" + n.toString(16)).slice(-2); }).join(""); return { hex: hx, a: a }; } var h = s.replace(/^#/, ""); if (h.length === 8) return { hex: "#" + h.slice(0, 6), a: parseInt(h.slice(6, 8), 16) / 255 }; if (h.length === 4) return { hex: "#" + h[0]+h[0]+h[1]+h[1]+h[2]+h[2], a: parseInt(h[3] + h[3], 16) / 255 }; if (h.length === 3) return { hex: "#" + h[0]+h[0]+h[1]+h[1]+h[2]+h[2], a: 1 }; return { hex: "#" + h.slice(0, 6), a: 1 }; } var rotSpeedBase = CFG.speed === 0 ? 0 : lin(clamp(CFG.speed, 0, 10), 0, 10, 0, 0.9); var rotSpeed = CFG.direction === "left" ? -rotSpeedBase : rotSpeedBase; var dotSpacing = lin(clamp(CFG.density, 1, 10), 1, 10, 24, 8); var dotMul = lin(clamp(CFG.dotSize, 1, 10), 1, 10, 0.1, 0.5); var markerMul = lin(clamp(CFG.markerSize, 0, 100), 0, 100, 0.1, 2.5); var scaleMul = lin(clamp(CFG.scale, 1, 20), 1, 20, 0.2, 2); var smoothN = clamp(CFG.smoothing / 10, 0, 1); var lerpFactor = smoothN === 0 ? 1 : lin(smoothN, 0, 1, 0.4, 0.03); var velDecay = lin(smoothN, 0, 1, 0.7, 0.96); var dragSens = lin(clamp(CFG.dragSpeed, 0, 10), 0, 10, 0.001, 0.02); var oceanC = rgba(CFG.oceanColor), gridC = rgba(CFG.gridColor); var outC = rgba(CFG.outlineColor), dotC = rgba(CFG.dotColor), fillC = rgba(CFG.fillColor); function toXYZ(lat, lng) { var a = lat * Math.PI / 180, o = lng * Math.PI / 180; return { x: Math.cos(a) * Math.sin(o), y: Math.sin(a), z: Math.cos(a) * Math.cos(o) }; } var W = stage.clientWidth || 800, H = stage.clientHeight || 600; var R = 1 * scaleMul; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(50, W / H, 0.1, 1000); camera.position.set(0, 0, 2.5 / scaleMul); camera.lookAt(0, 0, 0); var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(W, H); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); var canvas = renderer.domElement; stage.appendChild(canvas); var globe = new THREE.Group(); globe.rotation.y = CFG.initialLng * Math.PI / 180; globe.rotation.x = CFG.initialLat * Math.PI / 180; scene.add(globe); var oceanMesh = new THREE.Mesh( new THREE.SphereGeometry(R, 64, 64), new THREE.MeshBasicMaterial({ color: new THREE.Color(oceanC.hex), transparent: oceanC.a < 1, opacity: oceanC.a }) ); globe.add(oceanMesh); renderer.render(scene, camera); function tube(points, width, material, group) { if (points.length < 2) return; var curve = new THREE.CatmullRomCurve3(points); var geo = new THREE.TubeGeometry(curve, points.length * 2, (width / 10) * 0.01, 8, false); var mesh = new THREE.Mesh(geo, material); mesh.renderOrder = 0; group.add(mesh); } if (CFG.showGrid && gridC.a > 0) { var gGroup = new THREE.Group(); var gMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(gridC.hex), transparent: gridC.a < 1, opacity: gridC.a }); var step = 15, seg = 64, i, k, p, pts; for (var lat = -90; lat <= 90; lat += step) { pts = []; for (i = 0; i <= seg; i++) { p = toXYZ(lat, (i / seg) * 360 - 180); pts.push(new THREE.Vector3(p.x*R, p.y*R, p.z*R)); } tube(pts, 1, gMat, gGroup); } for (var lng = -180; lng < 180; lng += step) { pts = []; for (k = 0; k <= seg; k++) { p = toXYZ((k / seg) * 180 - 90, lng); pts.push(new THREE.Vector3(p.x*R, p.y*R, p.z*R)); } tube(pts, 1, gMat, gGroup); } globe.add(gGroup); } var outlineGroup = new THREE.Group(); globe.add(outlineGroup); if (CFG.markers && CFG.markers.length) { var mGeo = new THREE.SphereGeometry(0.01 * markerMul, 16, 16); var mMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(rgba(CFG.markerColor).hex) }); CFG.markers.forEach(function (mk) { if (!mk || typeof mk.lat !== "number" || typeof mk.lng !== "number") return; var p = toXYZ(mk.lat, mk.lng); var mesh = new THREE.Mesh(mGeo, mMat); mesh.position.set(p.x * R * 1.01, p.y * R * 1.01, p.z * R * 1.01); globe.add(mesh); }); } var LAND_URL = "https://raw.githubusercontent.com/martynafford/natural-earth-geojson/refs/heads/master/50m/physical/ne_50m_land.json"; function simplify(ring, detail) { if (ring.length < 2 || detail >= 10) return ring; var stepSize = Math.max(1, Math.floor(lin(clamp(detail, 1, 10), 1, 10, 10, 1))); var out = [ring[0]]; for (var i = stepSize; i < ring.length - 1; i += stepSize) out.push(ring[Math.min(i, ring.length - 1)]); var last = ring[ring.length - 1], first = ring[0]; if (Math.abs(last[0] - first[0]) > 1e-4 || Math.abs(last[1] - first[1]) > 1e-4) out.push(last); return out.length >= 2 ? out : ring; } fetch(LAND_URL) .then(function (r) { if (!r.ok) throw new Error("Land data " + r.status); return r.json(); }) .then(function (land) { if (CFG.showOutline && outC.a > 0) { var oMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(outC.hex), transparent: outC.a < 1, opacity: outC.a, depthTest: true, depthWrite: true }); var ring = function (coords) { var pts = simplify(coords, CFG.detail).map(function (c) { var p = toXYZ(c[1], c[0]); return new THREE.Vector3(p.x * R, p.y * R, p.z * R); }); if (pts.length > 1 && pts[0].distanceTo(pts[pts.length - 1]) > 0.001) pts.push(pts[0].clone()); tube(pts, CFG.outlineWidth, oMat, outlineGroup); }; land.features.forEach(function (f) { var geo = f.geometry; if (!geo || !geo.coordinates) return; if (geo.type === "Polygon" && geo.coordinates.length) ring(geo.coordinates[0]); else if (geo.type === "MultiPolygon") geo.coordinates.forEach(function (poly) { if (poly.length) ring(poly[0]); }); }); } var BW = 2048, BH = 1024; var oc = document.createElement("canvas"); oc.width = BW; oc.height = BH; var ctx = oc.getContext("2d", { willReadFrequently: true }); ctx.fillStyle = "#000"; ctx.fillRect(0, 0, BW, BH); ctx.fillStyle = "#fff"; ctx.beginPath(); var px = function (lng, lat) { return [((lng + 180) / 360) * BW, ((90 - lat) / 180) * BH]; }; var tracePoly = function (poly) { poly.forEach(function (r) { if (!r.length) return; var s = px(r[0][0], r[0][1]); ctx.moveTo(s[0], s[1]); for (var i = 1; i < r.length; i++) { var q = px(r[i][0], r[i][1]); ctx.lineTo(q[0], q[1]); } ctx.closePath(); }); }; land.features.forEach(function (f) { var g = f.geometry; if (!g) return; if (g.type === "Polygon") tracePoly(g.coordinates); else if (g.type === "MultiPolygon") g.coordinates.forEach(tracePoly); }); ctx.fill(); var pixels = ctx.getImageData(0, 0, BW, BH).data; var onLand = function (lng, lat) { var x = Math.round(((lng + 180) / 360) * BW) % BW; if (x < 0) x += BW; var y = clamp(Math.round(((90 - lat) / 180) * BH), 0, BH - 1); return pixels[(y * BW + x) * 4] > 128; }; if (CFG.fill === "solid") { var TW = 1024, TH = 512; var fc = document.createElement("canvas"); fc.width = TW; fc.height = TH; var fctx = fc.getContext("2d"); var img = fctx.createImageData(TW, TH), d = img.data; var c = new THREE.Color(fillC.hex); var fr = Math.round(c.r * 255), fg = Math.round(c.g * 255), fb = Math.round(c.b * 255); var fa = Math.round((fillC.a || 1) * 255); for (var ty = 0; ty < TH; ty++) { for (var tx = 0; tx < TW; tx++) { var lng2 = ((((tx / TW - 0.25) * 360 + 180) % 360) + 360) % 360 - 180; var lat2 = (ty / TH - 0.5) * 180; var idx = (ty * TW + tx) * 4; if (CFG.allDots || onLand(lng2, lat2)) { d[idx]=fr; d[idx+1]=fg; d[idx+2]=fb; d[idx+3]=fa; } else d[idx + 3] = 0; } } fctx.putImageData(img, 0, 0); var tex = new THREE.CanvasTexture(fc); tex.flipY = false; tex.needsUpdate = true; globe.add(new THREE.Mesh( new THREE.SphereGeometry(R * 1.002, 64, 64), new THREE.MeshBasicMaterial({ map: tex, transparent: true }) )); } else { var coords = [], base = dotSpacing * 0.08; for (var la = -90; la <= 90; la += base) { var cosLat = Math.cos(Math.abs(la) * Math.PI / 180); var lngStep = cosLat > 0.01 ? base / Math.max(0.3, cosLat) : 360; for (var lo = -180; lo < 180; lo += lngStep) { if (CFG.allDots || onLand(lo, la)) coords.push([lo, la]); } } if (coords.length) { var inst = new THREE.InstancedMesh( new THREE.SphereGeometry(0.01 * dotMul, 4, 4), new THREE.MeshBasicMaterial({ color: new THREE.Color(dotC.hex), transparent: dotC.a < 1, opacity: dotC.a }), coords.length ); var mtx = new THREE.Matrix4(); for (var n = 0; n < coords.length; n++) { var p2 = toXYZ(coords[n][1], coords[n][0]); mtx.makeScale(1, 1, 1); mtx.setPosition(p2.x * R, p2.y * R, p2.z * R); inst.setMatrixAt(n, mtx); } inst.instanceMatrix.needsUpdate = true; globe.add(inst); } console.log("[Globe] " + coords.length + " Punkte erzeugt"); } renderer.render(scene, camera); }) .catch(function (err) { console.error("[Globe] Kartendaten fehlgeschlagen:", err); renderer.render(scene, camera); var note = document.createElement("div"); note.id = "globe-note"; note.textContent = "Kartendaten konnten nicht geladen werden."; stage.appendChild(note); }); var rot = { x: globe.rotation.y, y: globe.rotation.x }; var target = { x: rot.x, y: rot.y }; var vel = { x: 0, y: 0 }; var dragging = false, hovering = false, lastX = 0, lastY = 0, raf = null; var TH_ = 0.01; function loop() { if (!dragging && rotSpeed !== 0 && (!CFG.stopOnHover || !hovering)) target.x += rotSpeed * 0.01; if (!dragging && smoothN > 0) { if (Math.abs(vel.x) > TH_ || Math.abs(vel.y) > TH_) { target.x += vel.x; target.y += vel.y; target.y = clamp(target.y, -Math.PI / 2, Math.PI / 2); vel.x *= velDecay; vel.y *= velDecay; } else { vel.x = 0; vel.y = 0; } } var dx = target.x - rot.x, dy = target.y - rot.y; if (Math.abs(dx) > TH_ || Math.abs(dy) > TH_ || rotSpeed !== 0 || dragging) { rot.x += dx * lerpFactor; rot.y = clamp(rot.y + dy * lerpFactor, -Math.PI / 2, Math.PI / 2); globe.rotation.y = rot.x; globe.rotation.x = rot.y; renderer.render(scene, camera); } var busy = dragging || rotSpeed !== 0 || Math.abs(vel.x) > TH_ || Math.abs(vel.y) > TH_ || Math.abs(dx) > TH_ || Math.abs(dy) > TH_; raf = busy ? requestAnimationFrame(loop) : null; } function start() { if (raf === null) raf = requestAnimationFrame(loop); } if (rotSpeed !== 0) start(); canvas.addEventListener("pointerdown", function (e) { dragging = true; vel.x = 0; vel.y = 0; lastX = e.clientX; lastY = e.clientY; canvas.setPointerCapture(e.pointerId); start(); }); canvas.addEventListener("pointermove", function (e) { if (dragging) { var dx = e.clientX - lastX, dy = e.clientY - lastY; target.x += dx * dragSens; target.y = clamp(target.y + dy * dragSens, -Math.PI / 2, Math.PI / 2); vel.x = dx * dragSens * 0.3; vel.y = dy * dragSens * 0.3; lastX = e.clientX; lastY = e.clientY; return; } if (!CFG.stopOnHover) return; var rect = canvas.getBoundingClientRect(); var m = new THREE.Vector2( ((e.clientX - rect.left) / rect.width) * 2 - 1, -((e.clientY - rect.top) / rect.height) * 2 + 1 ); var rc = new THREE.Raycaster(); rc.setFromCamera(m, camera); hovering = rc.intersectObject(oceanMesh).length > 0; start(); }); function endDrag() { dragging = false; start(); } canvas.addEventListener("pointerup", endDrag); canvas.addEventListener("pointercancel", endDrag); canvas.addEventListener("pointerleave", function () { hovering = false; start(); }); if (typeof ResizeObserver !== "undefined") { new ResizeObserver(function () { var w = stage.clientWidth || 800, h = stage.clientHeight || 600; camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); camera.position.set(0, 0, 2.5 / scaleMul); camera.lookAt(0, 0, 0); renderer.render(scene, camera); }).observe(stage); } }

NO FOLLOWERS.
NO LIKES. NO EGO.

#1 PICK A
QUESTION

Choose from a set of questions across three categories: deep reflections, local recommendations and street philosophy, eg: "What is a popular opinion you think is complete bullshit?"

#2 HAND IT TO
A STRANGER

Spot someone who catches your eye. Someone whose presence makes you curious. Hand them the card. No introduction, no small talk needed. The card speaks for itself and does the work for you.

#3 COLLECT
THE ANSWERS

The stranger responds anonymously and passes the card on to the next person. You get notified with every new answer. Watch your card travel from stranger to stranger, city to city.

NO MORE NPC'S

THE FIRST DROP IS COMING.

We are currently testing the first prototypes on the streets. Leave your email to get early access to the limited decks and start your own chain of anonymous truth.

What is the Sonder Project?

Every day, we walk past hundreds of strangers and forget them in a split second, even though they carry decades of valuable wisdom. The Sonder Project unites these passing lives and their experiences on one anonymous platform. We are the first global network built to uncover the invisible knowledge of the streets and share it with a community of strangers turning everyday encounters into inspiration. The most valuable recommendations and life lessons don't come from profit-seeking algorithms or influencers - they come from decades of real life experience of the people around us. The Sonder Project is built to capture this. We connect strangers through simple physical cards given to people who stand out in the real world. This card allows them to anonymously share their honest wisdom, hidden gems, and perspectives into our digital archive. It’s a platform driven only by pure conviction. Strangers becoming teachers, passing the card forward to build a global logbook of human connection.

Sonder

[sande] noun. English

the realization that each random passerby is living a life as vivid and complex as your own - populated with their own ambitions, friends, routines, worries, and inherited craziness - an epic story that continues invisibly around you like an anthill sprawling deep underground, with elaborate passageways to thousands of other lives that you'll never know existed, in which you might appear only once as an extra, sipping coffee in the background, as a blur of traffic passing on the highway, as a lighted window at dusk.