// Live 3D heads: Minimoji's web SDK (https://minimoji.com/sdk). A head is drawn in the browser from its avatar // document (no key, nothing fetched per head). These are the five Bunch starter heads on the production service // (striped-walrus-538.convex.site), keyed by the .head slot they sit in; the flat pictures are their stills. var MINIMOJI_SDK = 'https://www.minimoji.com/sdk/minimoji-heads.js'; var AVATARS = {"a":{"blush":false,"brows":"flat","ears":{"style":"none"},"extra":{"style":"earrings"},"eyes":{"color":"ink","shape":"round"},"facialHair":"none","freckles":false,"glasses":{"style":"none"},"hair":{"color":"sky","style":"wavy"},"hat":{"style":"none"},"head":"round","nose":"round","seed":436432577,"skin":"espresso","v":1},"b":{"blush":false,"brows":"round","ears":{"style":"none"},"extra":{"style":"none"},"eyes":{"color":"hazel","shape":"round"},"facialHair":"boxed","freckles":false,"glasses":{"style":"aviator"},"hair":{"color":"espresso","style":"curly"},"hat":{"style":"none"},"head":"round","nose":"dot","seed":244981678,"skin":"brown","v":1},"c":{"blush":true,"brows":"flat","ears":{"style":"none"},"extra":{"style":"none"},"eyes":{"color":"grey","shape":"almond"},"facialHair":"none","freckles":false,"glasses":{"style":"none"},"hair":{"color":"chestnut","style":"long"},"hat":{"style":"none"},"head":"oval","nose":"wedge","seed":395352020,"skin":"fair","v":1},"d":{"blush":false,"brows":"flat","ears":{"style":"none"},"extra":{"style":"none"},"eyes":{"color":"brown","shape":"round"},"facialHair":"none","freckles":true,"glasses":{"style":"none"},"hair":{"color":"ink","style":"pony"},"hat":{"style":"none"},"head":"round","nose":"dot","seed":270172586,"skin":"porcelain","v":1},"e":{"blush":true,"brows":"none","ears":{"style":"none"},"extra":{"style":"none"},"eyes":{"color":"blue","shape":"upturned"},"facialHair":"none","freckles":false,"glasses":{"style":"none"},"hair":{"color":"silver","style":"twin"},"hat":{"style":"none"},"head":"square","nose":"none","seed":354271463,"skin":"brown","v":1}}; // Public Mac beta link. While empty, the Mac button stays a greyed "Mac beta, coming soon" label, not a link. var MAC_BETA_URL = ''; (function () { var mac = document.getElementById('mac'); if (MAC_BETA_URL && mac) { var a = document.createElement('a'); a.className = 'mac'; a.id = 'mac'; a.href = MAC_BETA_URL; a.innerHTML = mac.querySelector('svg').outerHTML + 'Try it on yourMacbeta'; mac.replaceWith(a); } // Heads turn toward the pointer: a perspective tilt plus a small shift, eased in // requestAnimationFrame so they trail gently. Mouse/trackpad only, never with reduced motion. var mm = window.matchMedia; var canFollow = !!mm && mm('(hover: hover) and (pointer: fine)').matches && !mm('(prefers-reduced-motion: reduce)').matches; var live = null; // the 3D stage, once it is up if (canFollow) followPointer(); // Mouse/trackpad and motion allowed: after the load sequence, swap the flat heads for live 3D ones that // look at the cursor. Phones, reduced motion and any failure (no WebGL, SDK unreachable) keep the pictures. // (The page may run this after load: app/page.tsx loads it with next/script, so it also runs on a // client-side arrival, e.g. back from sign-in.) if (canFollow) { if (document.readyState === 'complete') setTimeout(goLive, 1900); else window.addEventListener('load', function () { setTimeout(goLive, 1900); }); } function goLive() { var scene = document.querySelector('.scene'), el = scene && scene.querySelector('.stage3d'); if (!el) return; import(MINIMOJI_SDK).then(function (sdk) { var heads = Array.prototype.slice.call(scene.querySelectorAll('.head')); var ids = heads.map(function (h) { return h.className.replace(/.*\bhead (\w).*/, '$1'); }); scene.classList.add('live3d'); // anchors stop moving so the stage measures them at rest var stage = sdk.mountHeadPerformance(el, { tiles: heads.map(function (h, i) { return { id: ids[i], avatar: AVATARS[ids[i]], character: null, element: h }; }), pointerTarget: window, bursts: false, }); // per head: a slow bob, a spring for the hover lift, and a hop on click (css px, up) var state = heads.map(function (h, i) { return { phase: i * 1.3, lift: 0, v: 0, target: 0, hopAt: -1 }; }); live = { stage: stage, state: state }; heads.forEach(function (h, i) { h.addEventListener('pointerenter', function () { state[i].target = 10; stage.setMood('happy', ids[i]); }); h.addEventListener('pointerleave', function () { state[i].target = 0; stage.setMood('neutral', ids[i]); }); h.addEventListener('click', function () { state[i].hopAt = clock; stage.react(undefined, ids[i]); }); }); var clock = 0, last = 0; function lift(i) { var s = state[i], hop = 0, u = s.hopAt < 0 ? 1 : (clock - s.hopAt) / 0.5; if (u < 1) hop = 34 * Math.sin(Math.PI * u) * (1 - 0.3 * u); return 4 * Math.sin(clock * 1.25 + s.phase) + s.lift + hop; } function frame(now) { var dt = last ? Math.min(0.05, (now - last) / 1000) : 0; last = now; clock += dt; state.forEach(function (s) { s.v += ((s.target - s.lift) * 320 - s.v * 16) * dt; s.lift += s.v * dt; }); stage.idleFrame(dt, lift); window.requestAnimationFrame(frame); } window.requestAnimationFrame(frame); }).catch(function (e) { document.querySelector('.scene').classList.remove('live3d'); if (window.console) console.warn('Live heads unavailable, keeping the pictures:', e && e.message); }); } function followPointer() { var MAX_DEG = 18, MAX_SHIFT = 6, REACH = 420, EASE = 0.12; var faces = Array.prototype.map.call(document.querySelectorAll('.head'), function (h) { return { head: h, img: h.querySelector('img'), rx: 0, ry: 0, x: 0, y: 0 }; }); var pointer = null, hovered = null, frame = 0; function clamp(v) { return v < -1 ? -1 : v > 1 ? 1 : v; } function kick() { if (!frame) frame = window.requestAnimationFrame(step); } window.addEventListener('pointermove', function (e) { if (e.pointerType && e.pointerType !== 'mouse' && e.pointerType !== 'pen') return; pointer = { x: e.clientX, y: e.clientY }; hovered = e.target && e.target.closest ? e.target.closest('.head') : null; kick(); }, { passive: true }); // Pointer left the window: ease back to facing front. document.addEventListener('mouseout', function (e) { if (!e.relatedTarget) { pointer = null; hovered = null; kick(); } }); function step() { frame = 0; if (live) return; var moving = false; faces.forEach(function (f) { var tx = 0, ty = 0; if (pointer) { var r = f.head.getBoundingClientRect(); // a hovered head turns fully toward the cursor (shorter reach, quicker ease) var reach = f.head === hovered ? r.width * 0.6 : REACH; tx = clamp((pointer.x - (r.left + r.width / 2)) / reach); ty = clamp((pointer.y - (r.top + r.height / 2)) / reach); } var k = f.head === hovered ? EASE * 2 : EASE; f.ry += (tx * MAX_DEG - f.ry) * k; f.rx += (-ty * MAX_DEG - f.rx) * k; f.x += (tx * MAX_SHIFT - f.x) * k; f.y += (ty * MAX_SHIFT - f.y) * k; if (Math.abs(tx * MAX_DEG - f.ry) > 0.05 || Math.abs(-ty * MAX_DEG - f.rx) > 0.05) moving = true; f.img.style.transform = 'perspective(500px) translate(' + f.x.toFixed(2) + 'px,' + f.y.toFixed(2) + 'px) rotateX(' + f.rx.toFixed(2) + 'deg) rotateY(' + f.ry.toFixed(2) + 'deg)'; }); if (moving) kick(); } } // A click (or tap) makes a head hop. document.querySelectorAll('.head').forEach(function (h) { h.addEventListener('click', function () { h.classList.remove('hop'); void h.offsetWidth; h.classList.add('hop', 'settled'); setTimeout(function () { h.classList.remove('hop'); }, 520); }); }); })();

The cozy way to hang out and play with friends.