/* The wire cube One cube of hairlines on warm paper, a word on every face. Take it and turn it: when you let go it spins on with the speed of your hand, slows down, and close to a face a magnet takes it, passes the face by a hair and clicks back square. The word that faces you takes on weight and the one colour of the page; the others stay thin, and through the wire you see the ones behind, mirrored. Edges hidden behind the cube are dashed, as in a technical drawing. Left alone, the cube turns by itself from face to face. */ /* ---- values to change ---- */ const WORDS = ['Think', 'Draw', 'Build', 'Test', 'Ship', 'Rest']; /* one per face: front, right, back, left, top, bottom */ const WEIGHT = 780; /* the weight the word facing you takes, from 300 to 900 */ const GLIDE = 1; /* how long the cube spins on after you let go: 2 = twice as long, 0.5 = half */ const SNAP = 0.5; /* the magnetic click: 0 = it lands softly, 1 = it passes the face and comes back */ const TILT = 14; /* degrees the eye looks at the cube from above and from the side: 0 = one face straight on */ const HOLD = 1.5; /* seconds every face stays when the cube turns by itself */ const SIZE = 0.42; /* the side of the cube, as a share of the page */ const AUTOPLAY = true; /* the cube turns by itself until someone takes it, and again a while after */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const THIN = 170; /* the weight of the words that do not face you */ const WD_MIN = 62; /* the width axis of Archivo */ const WD_MAX = 125; const FILL = 0.74; /* the word facing you fills this share of its face */ const TYPE = 0.235; /* the type size, as a share of the side of the cube */ const STEP = 1 / 240; /* seconds of one step of the physics */ const LET_GO = 2.2; /* rad/s: below this speed the magnet takes the cube */ const AHEAD = 0.2; /* rad: in the turns it makes by itself, the cube slows to the magnet this far from the face */ const IDLE = 6; /* seconds after someone lets go before the cube turns by itself again */ const LEAN = 0.05; /* rad: how much the cube leans towards the pointer */ const $ = (s) => document.querySelector(s); const stage = $('[data-stage]'); const wire = $('[data-wire]'); const scene = $('[data-scene]'); const cubeEl = $('[data-cube]'); const hint = $('[data-hint]'); const live = $('[data-live]'); const ctx = wire.getContext('2d'); const clamp = (v, a, b) => Math.min(b, Math.max(a, v)); const lerp = (a, b, t) => a + (b - a) * t; const smoothstep = (a, b, v) => { const t = clamp((v - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); }; const words = WORDS.map((w) => String(w == null ? '' : w).trim()); while (words.length < 6) words.push(''); const heavy = clamp(Number(WEIGHT) || 780, 300, 900); const friction = 2 / clamp(Number(GLIDE) || 1, 0.2, 5); const zeta = lerp(1, 0.34, clamp(Number(SNAP) || 0, 0, 1)); const omega = 19; const tilt = clamp(Number(TILT) || 0, 0, 35) * Math.PI / 180; const hold = clamp(Number(HOLD) || 0, 0.2, 10); /* ------------------------------------------------------------------ rotations quaternions [w, x, y, z]; the axes are those of CSS (x right, y down, z towards you), with the usual matrices, so rotateY of CSS and a rotation about y here are the same thing */ const qMul = (a, b) => [ a[0] * b[0] - a[1] * b[1] - a[2] * b[2] - a[3] * b[3], a[0] * b[1] + a[1] * b[0] + a[2] * b[3] - a[3] * b[2], a[0] * b[2] - a[1] * b[3] + a[2] * b[0] + a[3] * b[1], a[0] * b[3] + a[1] * b[2] - a[2] * b[1] + a[3] * b[0], ]; const qConj = (a) => [a[0], -a[1], -a[2], -a[3]]; const qNorm = (a) => { const l = Math.hypot(a[0], a[1], a[2], a[3]) || 1; return [a[0] / l, a[1] / l, a[2] / l, a[3] / l]; }; /* the rotation of a vector v (angle = its length, axis = its direction) */ function qExp(v) { const a = Math.hypot(v[0], v[1], v[2]); if (a < 1e-9) return [1, v[0] / 2, v[1] / 2, v[2] / 2]; const s = Math.sin(a / 2) / a; return [Math.cos(a / 2), v[0] * s, v[1] * s, v[2] * s]; } /* the other way: the vector of the shortest rotation */ function qLog(q) { let [w, x, y, z] = q; if (w < 0) { w = -w; x = -x; y = -y; z = -z; } const s = Math.hypot(x, y, z); if (s < 1e-9) return [2 * x, 2 * y, 2 * z]; const a = 2 * Math.atan2(s, w); return [x / s * a, y / s * a, z / s * a]; } const qAxis = (axis, angle) => qExp([axis[0] * angle, axis[1] * angle, axis[2] * angle]); function qMat(q) { const [w, x, y, z] = q; return [ 1 - 2 * (y * y + z * z), 2 * (x * y - w * z), 2 * (x * z + w * y), 2 * (x * y + w * z), 1 - 2 * (x * x + z * z), 2 * (y * z - w * x), 2 * (x * z - w * y), 2 * (y * z + w * x), 1 - 2 * (x * x + y * y), ]; } const mApply = (m, v) => [ m[0] * v[0] + m[1] * v[1] + m[2] * v[2], m[3] * v[0] + m[4] * v[1] + m[5] * v[2], m[6] * v[0] + m[7] * v[1] + m[8] * v[2], ]; const mApplyT = (m, v) => [ m[0] * v[0] + m[3] * v[1] + m[6] * v[2], m[1] * v[0] + m[4] * v[1] + m[7] * v[2], m[2] * v[0] + m[5] * v[1] + m[8] * v[2], ]; const X = [1, 0, 0]; const Y = [0, 1, 0]; /* the 24 ways a cube can rest: every face to the front, turned four ways */ const RESTS = []; { const seen = new Set(); for (const a of [0, 1, 2, 3]) for (const b of [0, 1, 2, 3]) for (const c of [0, 1, 2, 3]) { let q = qMul(qAxis(Y, a * Math.PI / 2), qMul(qAxis(X, b * Math.PI / 2), qAxis([0, 0, 1], c * Math.PI / 2))); if (q[0] < 0 || (Math.abs(q[0]) < 1e-9 && (q[1] < -1e-9 || (Math.abs(q[1]) < 1e-9 && (q[2] < -1e-9 || (Math.abs(q[2]) < 1e-9 && q[3] < 0)))))) q = q.map((v) => -v); q = q.map((v) => Math.round(v * 1e6) / 1e6); const key = q.join(','); if (!seen.has(key)) { seen.add(key); RESTS.push(qNorm(q)); } } } function nearestRest(q) { let best = RESTS[0]; let d = -1; for (const r of RESTS) { const dot = Math.abs(q[0] * r[0] + q[1] * r[1] + q[2] * r[2] + q[3] * r[3]); if (dot > d) { d = dot; best = r; } } return best; } /* ------------------------------------------------------------------ the faces right (r), down (d) and outward normal (n) of every face, as rotateY/rotateX of CSS would give them: so turning the cube by a quarter about y or x brings a face to the front with its word upright */ const FACES = [ { r: [1, 0, 0], d: [0, 1, 0], n: [0, 0, 1] }, /* front */ { r: [0, 0, -1], d: [0, 1, 0], n: [1, 0, 0] }, /* right */ { r: [-1, 0, 0], d: [0, 1, 0], n: [0, 0, -1] }, /* back */ { r: [0, 0, 1], d: [0, 1, 0], n: [-1, 0, 0] }, /* left */ { r: [1, 0, 0], d: [0, 0, 1], n: [0, -1, 0] }, /* top */ { r: [1, 0, 0], d: [0, 0, -1], n: [0, 1, 0] }, /* bottom */ ]; const faceOfNormal = (v) => { let best = 0; let d = -2; FACES.forEach((f, i) => { const k = f.n[0] * v[0] + f.n[1] * v[1] + f.n[2] * v[2]; if (k > d) { d = k; best = i; } }); return best; }; FACES.forEach((f, i) => { const el = document.createElement('div'); el.className = 'face'; const w = document.createElement('span'); w.className = 'word'; w.textContent = words[i]; el.appendChild(w); cubeEl.appendChild(el); f.el = el; f.word = w; f.wd = 100; /* the width axis that makes the word fill its face */ f.k = 1; /* a scale, only for a word too long even at the narrowest width */ f.show = 0; /* 0 to 1: the word rises into its face (the opening) */ f.lit = 0; /* 0 to 1: the extra weight of the chosen word, with its elastic */ f.tint = 0; /* 0 to 1: the accent */ f.roll = 0; /* degrees the word turns in its face to stand upright */ }); /* the twelve edges: corners that differ in one coordinate, with the two faces they join */ const CORNERS = []; for (const x of [-1, 1]) for (const y of [-1, 1]) for (const z of [-1, 1]) CORNERS.push([x, y, z]); const faceOn = (axis, sign) => (axis === 0 ? (sign > 0 ? 1 : 3) : axis === 1 ? (sign > 0 ? 5 : 4) : (sign > 0 ? 0 : 2)); const EDGES = []; CORNERS.forEach((a, i) => CORNERS.forEach((b, j) => { if (j <= i) return; const diff = [0, 1, 2].filter((k) => a[k] !== b[k]); if (diff.length !== 1) return; const others = [0, 1, 2].filter((k) => k !== diff[0]); EDGES.push({ a: i, b: j, faces: [faceOn(others[0], a[others[0]]), faceOn(others[1], a[others[1]])], p: 0 }); })); /* the pen starts at the top left corner in front and the wire grows from there, corner after corner */ { const start = CORNERS.findIndex((c) => c[0] === -1 && c[1] === -1 && c[2] === 1); const dist = CORNERS.map((c) => Math.abs(c[0] - CORNERS[start][0]) / 2 + Math.abs(c[1] - CORNERS[start][1]) / 2 + Math.abs(c[2] - CORNERS[start][2]) / 2); EDGES.forEach((e) => { if (dist[e.b] < dist[e.a]) { const t = e.a; e.a = e.b; e.b = t; } e.step = dist[e.a]; }); EDGES.sort((p, q) => p.step - q.step); } /* ------------------------------------------------------------------ colours from the page */ function rgb(name, fallback) { const probe = document.createElement('i'); probe.style.color = getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback; document.body.appendChild(probe); const m = getComputedStyle(probe).color.match(/[\d.]+/g) || [0, 0, 0]; probe.remove(); return m.slice(0, 3).map(Number); } const INK = rgb('--ink', '#141414'); const ACCENT = rgb('--accent', '#ff3d1f'); const inkStr = 'rgb(' + INK.join(',') + ')'; /* ------------------------------------------------------------------ the state */ let q = [1, 0, 0, 0]; /* the orientation of the cube */ let w = [0, 0, 0]; /* its spin, rad/s, about the axes of the cube's own room */ let mode = 'rest'; /* rest, drag, free (spinning on), snap (the magnet), still (moved by a tween) */ let target = q; /* the rest the magnet is pulling to */ let chosen = -1; /* the face that has the weight */ let squeeze = 0; /* how much the words narrow with the speed */ let acc = 0; const lean = { x: 0, y: 0 }; const fade = { v: REDUCED ? 0 : 1 }; let S = 300; let P = 900; let W = 0; let H = 0; let ox = 0; /* the shift that puts the cube, as the eye sees it at rest, in the middle of the page */ let oy = 0; let dpr = 1; /* the eye: a fixed tilt from above and from the side, and the lean towards the pointer */ function viewMatrix() { const v = qMul(qAxis(X, -tilt - lean.y * LEAN), qAxis(Y, tilt * 1.15 + lean.x * LEAN)); return v; } /* ------------------------------------------------------------------ layout */ const measurer = document.createElement('span'); measurer.setAttribute('aria-hidden', 'true'); measurer.style.cssText = 'position:absolute;left:-9999px;top:0;visibility:hidden;white-space:pre;line-height:1;letter-spacing:-0.015em;'; stage.appendChild(measurer); function layout() { W = innerWidth; H = innerHeight; dpr = Math.min(2, devicePixelRatio || 1); wire.width = Math.round(W * dpr); wire.height = Math.round(H * dpr); /* the farthest a corner can reach from the middle, in any turn, is half the diagonal of the cube enlarged by the perspective (P = 3 sides): 1.22 sides. The cube never leaves the page while it spins */ const room = (Math.min(W, H) / 2 - 16) / (Math.sqrt(3) / 2 * 3 / (3 - Math.sqrt(3) / 2)); S = Math.max(60, Math.min(Math.min(W * 1.3, H) * clamp(Number(SIZE) || 0.42, 0.15, 0.6), room, 460)); P = S * 3; const type = S * TYPE; scene.style.setProperty('--s', S + 'px'); scene.style.setProperty('--p', P + 'px'); scene.style.setProperty('--type', type + 'px'); measurer.style.fontSize = type + 'px'; /* for every word, the width along the axis of the typeface at the full weight, and the axis that fills the face */ FACES.forEach((f, i) => { const text = words[i]; if (!text) { f.wd = 100; f.k = 1; return; } measurer.textContent = text; const want = S * FILL; const samples = []; for (let k = 0; k <= 8; k++) { const wd = lerp(WD_MIN, WD_MAX, k / 8); measurer.style.fontVariationSettings = '"wdth" ' + wd + ', "wght" ' + heavy; samples.push([wd, measurer.getBoundingClientRect().width]); } let wd = WD_MAX; if (want <= samples[0][1]) wd = WD_MIN; else for (let k = 1; k < samples.length; k++) { if (want <= samples[k][1]) { const [a, wa] = samples[k - 1]; const [b, wb] = samples[k]; wd = lerp(a, b, (want - wa) / Math.max(1e-6, wb - wa)); break; } } f.wd = wd; f.k = Math.min(1, want / Math.max(1, samples[0][1])); }); const h = S / 2; { const m = qMat(viewMatrix()); const xs = []; const ys = []; CORNERS.forEach((c) => { const v = mApply(m, [c[0] * h, c[1] * h, c[2] * h]); const k = P / (P - v[2]); xs.push(v[0] * k); ys.push(v[1] * k); }); ox = -(Math.min(...xs) + Math.max(...xs)) / 2; oy = -(Math.min(...ys) + Math.max(...ys)) / 2; scene.style.left = 'calc(50% + ' + ox.toFixed(1) + 'px)'; scene.style.top = 'calc(50% + ' + oy.toFixed(1) + 'px)'; } FACES.forEach((f) => { const { r, d, n } = f; f.el.style.transform = 'matrix3d(' + [r[0], r[1], r[2], 0, d[0], d[1], d[2], 0, n[0], n[1], n[2], 0, n[0] * h, n[1] * h, n[2] * h, 1].join(',') + ')'; }); } /* ------------------------------------------------------------------ physics */ function step(dt) { if (mode === 'free') { q = qNorm(qMul(qExp([w[0] * dt, w[1] * dt, w[2] * dt]), q)); const k = Math.exp(-friction * dt); w = [w[0] * k, w[1] * k, w[2] * k]; if (Math.hypot(w[0], w[1], w[2]) < LET_GO) startSnap(nearestRest(q)); } else if (mode === 'snap') { /* a damped spring on the rotation that is left: it pulls, passes the face by a little and settles */ const x = qLog(qMul(q, qConj(target))); const K = omega * omega; const C = 2 * zeta * omega; w = [w[0] + (-K * x[0] - C * w[0]) * dt, w[1] + (-K * x[1] - C * w[1]) * dt, w[2] + (-K * x[2] - C * w[2]) * dt]; q = qNorm(qMul(qExp([w[0] * dt, w[1] * dt, w[2] * dt]), q)); /* the word takes its weight as the magnet clicks, not when the last tremor is gone */ if (chosen < 0 && Math.hypot(x[0], x[1], x[2]) < 0.02) light(frontOf(target).i); if (Math.hypot(x[0], x[1], x[2]) < 0.0004 && Math.hypot(w[0], w[1], w[2]) < 0.01) settle(); } } /* the face that will face you when the cube rests on r, and the turn its word needs to stand upright */ function frontOf(r) { const m = qMat(r); const i = faceOfNormal(mApplyT(m, [0, 0, 1])); const f = FACES[i]; const rr = mApply(m, f.r); const dd = mApply(m, f.d); const roll = Math.atan2(dd[0], rr[0]) * 180 / Math.PI; return { i, roll }; } function startSnap(r) { target = r; mode = 'snap'; const { i, roll } = frontOf(r); const f = FACES[i]; /* the word turns upright in its face while the magnet pulls (the shortest way round) */ const want = f.roll + ((((roll - f.roll) % 360) + 540) % 360) - 180; if (Math.abs(want - f.roll) > 0.5) gsap.to(f, { roll: want, duration: 0.6, ease: 'back.out(1.7)', overwrite: 'auto' }); } function settle() { q = target.slice(); w = [0, 0, 0]; mode = 'rest'; const { i } = frontOf(q); light(i); } /* the chosen word takes on weight with an elastic and turns to the accent */ function light(i) { if (chosen === i) return; dim(); chosen = i; const f = FACES[i]; if (REDUCED) { gsap.set(f, { lit: 1, tint: 1 }); } else { gsap.to(f, { lit: 1, duration: 0.9, ease: 'elastic.out(1, 0.42)', overwrite: 'auto' }); gsap.to(f, { tint: 1, duration: 0.45, ease: 'power2.out' }); } if (words[i]) live.textContent = words[i]; } function dim() { if (chosen < 0) return; const f = FACES[chosen]; gsap.to(f, { lit: 0, tint: 0, duration: REDUCED ? 0.2 : 0.22, ease: 'power2.out', overwrite: 'auto' }); chosen = -1; } /* a turn by itself: a small pull back, then a push that, with the friction, brings the cube near the face `quarters` quarter turns away, where the magnet takes it */ let mover = null; function push(axis, quarters) { if (mode === 'drag') return; if (mover) { mover.kill(); mover = null; } w = [0, 0, 0]; const base = nearestRest(q); q = base.slice(); const angle = quarters * Math.PI / 2; dim(); if (REDUCED) { crossfade(qNorm(qMul(qAxis(axis, angle), base))); return; } fling(axis, base, angle); } /* from `base`, a turn of `angle` about `axis` (a unit vector): the pull back is a tween, the rest is the physics */ const BACK = 0.05; function fling(axis, base, angle) { const sign = Math.sign(angle); const a = { v: 0 }; mode = 'still'; mover = gsap.to(a, { v: -BACK, duration: 0.22, ease: 'sine.inOut', onUpdate: () => { q = qNorm(qMul(qAxis(axis, a.v * sign), base)); }, onComplete: () => { mover = null; const v0 = friction * (Math.abs(angle) + BACK - AHEAD) + LET_GO; w = [axis[0] * v0 * sign, axis[1] * v0 * sign, axis[2] * v0 * sign]; mode = 'free'; }, }); } /* seconds a push takes until the cube rests again (the pull back, the glide, the magnet) */ function pushTime(quarters) { if (REDUCED) return 0.6; const travel = Math.abs(quarters) * Math.PI / 2 + BACK - AHEAD; const v0 = friction * travel + LET_GO; return 0.22 + Math.log(v0 / LET_GO) / friction + 0.75; } /* reduced motion: no turning, the cube fades out and comes back on its new face */ let fading = null; function crossfade(dest) { if (fading) fading.kill(); mode = 'still'; fading = gsap.timeline() .to(fade, { v: 0, duration: 0.22, ease: 'power1.in' }) .add(() => { q = dest.slice(); w = [0, 0, 0]; target = q; mode = 'rest'; settle(); }) .to(fade, { v: 1, duration: 0.3, ease: 'power1.out' }); } /* ------------------------------------------------------------------ drawing */ let M = qMat(q); function render() { const V = viewMatrix(); const D = qMul(V, q); M = qMat(D); const h = S / 2; cubeEl.style.transform = 'matrix3d(' + [M[0], M[3], M[6], 0, M[1], M[4], M[7], 0, M[2], M[5], M[8], 0, 0, 0, 0, 1].join(',') + ')'; scene.style.opacity = fade.v; wire.style.opacity = fade.v; const speed = Math.hypot(w[0], w[1], w[2]); const cosRest = Math.cos(tilt) * Math.cos(tilt * 1.15); /* the faces: how much each one faces you, from the normal and from the eye (with the perspective) */ const facing = FACES.map((f) => { const n = mApply(M, f.n); const c = [n[0] * h, n[1] * h, n[2] * h]; const e = [-c[0], -c[1], P - c[2]]; const l = Math.hypot(e[0], e[1], e[2]); return { nz: n[2], seen: (n[0] * e[0] + n[1] * e[1] + n[2] * e[2]) / l }; }); FACES.forEach((f, i) => { if (!words[i]) { f.word.style.opacity = 0; return; } const nz = facing[i].nz; const g = smoothstep(0.3, Math.max(0.5, cosRest - 0.02), nz); const wght = clamp(THIN + (heavy - THIN) * (0.7 * g * g + 0.3 * f.lit * g), 100, 900); const wd = clamp(f.wd - (f.wd - WD_MIN) * 0.6 * squeeze, WD_MIN, WD_MAX); /* the words in front: from a whisper on the sides to full; the ones behind, seen through the wire, mirrored */ const op = nz > 0 ? lerp(0.3, 1, smoothstep(0.15, 0.85, nz)) * smoothstep(0, 0.12, nz) + (1 - smoothstep(0, 0.12, nz)) * 0.12 : 0.12 * smoothstep(-0.75, 0, nz); const t = f.tint; f.word.style.color = 'rgb(' + Math.round(lerp(INK[0], ACCENT[0], t)) + ',' + Math.round(lerp(INK[1], ACCENT[1], t)) + ',' + Math.round(lerp(INK[2], ACCENT[2], t)) + ')'; f.word.style.opacity = (op * f.show).toFixed(3); f.word.style.fontVariationSettings = '"wdth" ' + wd.toFixed(2) + ', "wght" ' + wght.toFixed(1); f.word.style.transform = 'translate(-50%, -50%) rotate(' + f.roll.toFixed(2) + 'deg) translateY(' + ((1 - f.show) * 0.18).toFixed(3) + 'em) scale(' + (f.k * 0.5).toFixed(4) + ')'; }); /* the wire */ ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, W, H); const cx = W / 2 + ox; const cy = H / 2 + oy; const pts = CORNERS.map((c) => mApply(M, [c[0] * h, c[1] * h, c[2] * h])); const proj = (v) => { const k = P / (P - v[2]); return [cx + v[0] * k, cy + v[1] * k]; }; ctx.lineCap = 'round'; ctx.strokeStyle = inkStr; const hidden = []; for (const e of EDGES) { if (e.p <= 0) continue; const a = pts[e.a]; const b = pts[e.b]; const end = [lerp(a[0], b[0], e.p), lerp(a[1], b[1], e.p), lerp(a[2], b[2], e.p)]; const p0 = proj(a); const p1 = proj(end); const vis = smoothstep(-0.03, 0.03, Math.max(facing[e.faces[0]].seen, facing[e.faces[1]].seen)); if (vis < 1) hidden.push([p0, p1, 1 - vis]); if (vis <= 0) continue; ctx.globalAlpha = vis; ctx.lineWidth = 1.25; ctx.beginPath(); ctx.moveTo(p0[0], p0[1]); ctx.lineTo(p1[0], p1[1]); ctx.stroke(); } ctx.setLineDash([3, 5]); ctx.lineWidth = 1; for (const [p0, p1, a] of hidden) { ctx.globalAlpha = a * 0.45; ctx.beginPath(); ctx.moveTo(p0[0], p0[1]); ctx.lineTo(p1[0], p1[1]); ctx.stroke(); } ctx.setLineDash([]); ctx.globalAlpha = 1; } function tick(time, deltaMs) { const dt = Math.min(0.05, Math.max(0, deltaMs / 1000)); acc += dt; while (acc >= STEP) { step(STEP); acc -= STEP; } const speed = Math.hypot(w[0], w[1], w[2]); squeeze = lerp(squeeze, clamp((speed - 3) / 12, 0, 1), 1 - Math.exp(-dt * (speed > 3 ? 10 : 5))); render(); } /* ------------------------------------------------------------------ taking the cube */ let drag = null; let touched = false; let idleCall = null; function stopAuto() { if (demo) demo.pause(); if (idleCall) idleCall.kill(); idleCall = null; } function restartAutoLater() { if (!AUTOPLAY || !demo) return; if (idleCall) idleCall.kill(); idleCall = gsap.delayedCall(IDLE, () => { if (mode === 'rest' && !drag) demo.restart(); else restartAutoLater(); }); } function firstTouch() { if (touched) return; touched = true; gsap.to(hint, { opacity: 0, duration: 0.4, ease: 'power2.out', overwrite: true }); } stage.addEventListener('pointerdown', (ev) => { if (!ready || (ev.button !== undefined && ev.button > 0)) return; stopAuto(); firstTouch(); if (mover) { mover.kill(); mover = null; } drag = { id: ev.pointerId, x: ev.clientX, y: ev.clientY, x0: ev.clientX, y0: ev.clientY, hist: [] }; if (!REDUCED) { w = [0, 0, 0]; mode = 'drag'; dim(); } stage.classList.add('is-dragging'); try { stage.setPointerCapture(ev.pointerId); } catch (e) { /* not captured: still fine */ } }); stage.addEventListener('pointermove', (ev) => { if (!drag) { if (!REDUCED && ev.pointerType === 'mouse') leanTo((ev.clientX / W) * 2 - 1, (ev.clientY / H) * 2 - 1); return; } if (ev.pointerId !== drag.id) return; const dx = ev.clientX - drag.x; const dy = ev.clientY - drag.y; drag.x = ev.clientX; drag.y = ev.clientY; if (REDUCED) return; /* the drag in the plane of the screen becomes a turn about an axis of the screen, brought into the cube's room */ const k = 1 / (S * 0.6); const Vm = qMat(viewMatrix()); const v = mApplyT(Vm, [-dy * k, dx * k, 0]); q = qNorm(qMul(qExp(v), q)); const now = performance.now(); drag.hist.push([now, v]); while (drag.hist.length && now - drag.hist[0][0] > 90) drag.hist.shift(); }); function release(ev) { if (!drag || (ev && ev.pointerId !== drag.id)) return; const d = drag; drag = null; stage.classList.remove('is-dragging'); if (REDUCED) { /* a quarter turn the way the hand went */ const dx = d.x - d.x0; const dy = d.y - d.y0; if (Math.hypot(dx, dy) > 12) { if (Math.abs(dx) > Math.abs(dy)) push(Y, dx > 0 ? 1 : -1); else push(X, dy > 0 ? -1 : 1); } restartAutoLater(); return; } /* the speed of the last 90 ms of the hand */ const now = performance.now(); const recent = d.hist.filter((h) => now - h[0] <= 90); let v = [0, 0, 0]; if (recent.length) { const span = Math.max(0.016, (now - recent[0][0]) / 1000 + 0.016); for (const [, r] of recent) v = [v[0] + r[0], v[1] + r[1], v[2] + r[2]]; v = [v[0] / span, v[1] / span, v[2] / span]; } const sp = Math.hypot(v[0], v[1], v[2]); if (sp > 30) v = v.map((c) => c * 30 / sp); w = v; mode = 'free'; if (Math.hypot(w[0], w[1], w[2]) < LET_GO) startSnap(nearestRest(q)); restartAutoLater(); } stage.addEventListener('pointerup', release); stage.addEventListener('pointercancel', release); stage.addEventListener('pointerleave', (ev) => { if (!drag && ev.pointerType === 'mouse') leanTo(0, 0); }); let leanX = null; let leanY = null; function leanTo(x, y) { if (!leanX) { leanX = gsap.quickTo(lean, 'x', { duration: 0.9, ease: 'power3.out' }); leanY = gsap.quickTo(lean, 'y', { duration: 0.9, ease: 'power3.out' }); } leanX(clamp(x, -1, 1)); leanY(clamp(y, -1, 1)); } /* the arrow keys turn the cube by a quarter, the way the arrow points */ stage.addEventListener('keydown', (ev) => { if (!ready) return; const keys = { ArrowLeft: [Y, -1], ArrowRight: [Y, 1], ArrowUp: [X, 1], ArrowDown: [X, -1] }; const k = keys[ev.key]; if (!k) return; ev.preventDefault(); stopAuto(); firstTouch(); if (drag) return; push(k[0], k[1]); restartAutoLater(); }); /* ------------------------------------------------------------------ the direction */ /* the turns it makes by itself: round the four sides (once with a spin and a quarter), then over the top and the bottom, and back to the first face, where it all starts again */ const ROUTE = [[Y, -1], [Y, -1], [Y, -5], [Y, -1], [X, -1], [X, -2], [X, -1]]; let demo = null; let ready = false; function buildDemo() { if (!AUTOPLAY) return; demo = gsap.timeline({ repeat: -1, paused: true }); ROUTE.forEach(([axis, n]) => { demo.call(push, [axis, n]); demo.to({}, { duration: pushTime(n) + hold }); }); } function opening() { const tl = gsap.timeline(); if (REDUCED) { q = [1, 0, 0, 0]; target = q; EDGES.forEach((e) => { e.p = 1; }); FACES.forEach((f) => { f.show = 1; }); settle(); tl.to(fade, { v: 1, duration: 0.6, ease: 'power1.out' }); tl.to(hint, { opacity: 0.45, duration: 0.5 }, 0.4); tl.to({}, { duration: hold }); } else { /* the cube starts turned away about one axis and draws itself while it comes round, slowly; then a push brings it to the first face, where the magnet takes it */ const u = (() => { const v = [0.5, -1, 0.32]; const l = Math.hypot(...v); return v.map((c) => c / l); })(); const A0 = 1.32; const A1 = 1.05; const TURN = A1 + Math.PI * 2; const ang = { v: A0 }; const place = () => { q = qAxis(u, ang.v); }; place(); mode = 'still'; tl.to(ang, { v: A1, duration: 2.2, ease: 'sine.inOut', onUpdate: place }, 0); tl.to(EDGES, { p: 1, duration: 0.62, ease: 'power2.inOut', stagger: (i) => EDGES[i].step * 0.28 + (i % 3) * 0.05 }, 0.1); tl.to(FACES, { show: 1, duration: 0.7, ease: 'power3.out', stagger: 0.07 }, 0.95); /* the same push as every other turn, with a whole spin more: back to the first face, where the magnet takes it */ tl.add(() => fling(u, qAxis(u, A1), -TURN), 2.2); const glide = 0.22 + Math.log((friction * (TURN + BACK - AHEAD) + LET_GO) / LET_GO) / friction; tl.to(hint, { opacity: 0.45, duration: 0.6, ease: 'power1.out' }, 2.2 + glide + 0.4); tl.to({}, { duration: 0.75 + hold }, 2.2 + glide); } tl.add(() => { ready = true; if (demo && !touched) demo.play(0); }); } let resizing = null; function start() { layout(); buildDemo(); gsap.ticker.add(tick); opening(); render(); addEventListener('resize', () => { if (resizing) resizing.kill(); resizing = gsap.delayedCall(0.12, () => { layout(); render(); }); }); } const fontReady = document.fonts ? Promise.all([ document.fonts.load(heavy + ' 100px "Archivo Variable"', words.join(' ')), document.fonts.load(THIN + ' 100px "Archivo Variable"', words.join(' ')), document.fonts.ready, ]).catch(() => 0) : Promise.resolve(); fontReady.then(start);