/* Snow globe A glass globe of water on a walnut base, with a cottage and three firs inside. The snow is a little physics: every flake is a drawn six-armed star that follows the water around it and sinks slowly, fluttering from side to side, until it lands on a roof, on a fir or on the ground and stays there (the snow caps grow as flakes settle). A click shakes the globe: the base tilts back and forth, the light runs across the glass, the water swirls and lifts every flake, which then falls again. The pointer tilts the globe a little and the floating snow follows. */ /* ---- values to change ---- */ const FLAKES = 90; /* how many snowflakes are in the water */ const SHAKE = 14; /* how far the globe tilts when it is shaken, in degrees */ const SWIRL = 1; /* how hard the water swirls and lifts the snow on a shake */ const FALL = 1; /* how fast the snow sinks: lower is slower */ const FLUTTER = 1; /* how much each flake swings from side to side as it falls */ const TILT = 6; /* how far the pointer tilts the globe, in degrees */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const NS = 'http://www.w3.org/2000/svg'; const RAD = Math.PI / 180; const R_IN = 155; /* the inside of the glass, where the flakes are kept */ const PIVOT = { x: 0, y: 212 }; const stage = document.querySelector('[data-stage]'); const globe = document.querySelector('[data-globe]'); const tiltEl = document.querySelector('[data-tilt]'); const shakeEl = document.querySelector('[data-shake]'); const treesEl = document.querySelector('[data-trees]'); const groundEl = document.querySelector('[data-ground]'); const capsEl = document.querySelector('[data-caps]'); const flakesEl = document.querySelector('[data-flakes]'); const shineEl = document.querySelector('[data-shine]'); const sheenEl = document.querySelector('[data-sheen]'); const shadowEl = document.querySelector('[data-shadow]'); const title = document.querySelector('[data-title]'); const reveals = [...document.querySelectorAll('[data-reveal]')]; const hint = document.querySelector('[data-hint]'); /* a seeded random, so that every visit (and every poster) starts with the same snow */ let seed = 52731; const rand = () => { seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; const between = (a, b) => a + (b - a) * rand(); const clamp = (v, a, b) => Math.min(b, Math.max(a, v)); const f2 = (v) => Math.round(v * 100) / 100; const el = (tag, attrs, parent) => { const n = document.createElementNS(NS, tag); for (const k in attrs) n.setAttribute(k, attrs[k]); parent.appendChild(n); return n; }; /* ---- the title: every letter in two spans, the outer one for the entrance, the inner one for the jiggle ---- */ const text = title.textContent.trim(); title.setAttribute('aria-label', text); title.textContent = ''; const outers = []; const inners = []; text.split(' ').forEach((w, wi, all) => { const word = document.createElement('span'); word.className = 'word'; word.setAttribute('aria-hidden', 'true'); for (const ch of w) { const outer = document.createElement('span'); outer.className = 'char'; const inner = document.createElement('span'); inner.className = 'char__in'; inner.textContent = ch; outer.appendChild(inner); word.appendChild(outer); outers.push(outer); inners.push(inner); } title.appendChild(word); if (wi < all.length - 1) title.appendChild(document.createTextNode(' ')); }); /* ---- the scene: the surfaces the snow can land on ---- */ const groundY = (x) => 62 - 10 * Math.cos((x * Math.PI) / 330); const surfaces = [ { id: 'roof', cx: -42, ay: -38, by: 16, w: 52 }, { id: 'chimney', x0: -24, x1: -8, y: -28 }, ]; const trees = [ { cx: 58, trunk: 44, tiers: [[-72, -24, 24], [-46, 10, 32], [-16, 46, 40]] }, { cx: 118, trunk: 54, tiers: [[-4, 30, 17], [16, 56, 23]] }, { cx: -126, trunk: 54, tiers: [[-14, 24, 19], [8, 56, 25]] }, ]; trees.forEach((t, ti) => { const g = el('g', {}, treesEl); el('rect', { class: 'fir__trunk', x: t.cx - 4, y: t.trunk, width: 8, height: 26 }, g); t.tiers.forEach(([ay, by, w], k) => { el('path', { class: 'fir', d: `M${t.cx - w} ${by}Q${t.cx} ${by + 6} ${t.cx + w} ${by}L${t.cx} ${ay}Z` }, g); el('path', { class: 'fir__shade', d: `M${t.cx} ${ay}L${t.cx + w} ${by}Q${t.cx + w / 2} ${by + 4.5} ${t.cx} ${by + 6}Z` }, g); surfaces.push({ id: `t${ti}-${k}`, cx: t.cx, ay, by, w }); }); }); let gd = 'M-170 120V' + f2(groundY(-170)); for (let x = -170; x <= 170; x += 10) gd += `L${x} ${f2(groundY(x))}`; groundEl.setAttribute('d', gd + 'L170 120Z'); /* the snow caps: a white line along the part of each roof and tier that is open to the sky, thickening with the flakes resting on it */ const caps = {}; const rest = (x) => { let y = groundY(x); let id = 'ground'; for (const s of surfaces) { let sy = Infinity; if (s.cx !== undefined) { const d = Math.abs(x - s.cx); if (d <= s.w) sy = s.ay + ((s.by - s.ay) * d) / s.w; } else if (x >= s.x0 && x <= s.x1) sy = s.y; if (sy < y) { y = sy; id = s.id; } } /* near the sides the curved glass comes before the ground: the flake rests against it */ const wall = Math.sqrt(Math.max(0, R_IN * R_IN - x * x)); if (wall < y && wall > 35) { y = wall; id = 'glass'; } return { y, id }; }; surfaces.forEach((s) => { let d = ''; let open = false; const x0 = s.cx !== undefined ? s.cx - s.w * 0.96 : s.x0 + 1; const x1 = s.cx !== undefined ? s.cx + s.w * 0.96 : s.x1 - 1; for (let x = x0; x <= x1 + 0.01; x += 1) { const r = rest(x); if (r.id === s.id) { d += `${open ? 'L' : 'M'}${f2(x)} ${f2(r.y - 0.6)}`; open = true; } else open = false; } caps[s.id] = { node: el('path', { class: 'cap', d, 'stroke-width': 1.6 }, capsEl), count: 0, shown: -1 }; }); const capWidth = (n) => 1.6 + Math.min(n, 9) * 0.5; /* ---- the flakes ---- */ const flakes = []; const count = Math.max(0, Math.round(FLAKES)); for (let i = 0; i < count; i++) { const s = between(0.75, 1.45); flakes.push({ node: el('use', { href: '#sg-flake' }, flakesEl), x: 0, y: 0, vx: 0, vy: 0, rot: between(0, 60), spin: between(-120, 120), s, w: between(1.4, 2.8), ph: between(0, 6.28), amp: between(6, 14), settled: null, drawn: '', }); } function scatter() { for (const f of flakes) { let x; let y; do { const a = between(0, Math.PI * 2); const r = Math.sqrt(rand()) * 148; x = Math.cos(a) * r; y = Math.sin(a) * r; } while (y > rest(x).y - 8); f.x = x; f.y = y; f.vx = 0; f.vy = 0; f.settled = null; } for (const id in caps) caps[id].count = 0; } /* ---- the globe: tilt (pointer, hover), shake (click); both turn about the bottom of the base ---- */ const tilt = { rot: 0, y: 0 }; const shake = { rot: 0, x: 0, sy: 1 }; const sheen = { x: -140, o: 0 }; const angle = () => (tilt.rot + shake.rot) * RAD; const turn = (p, deg, P) => { const a = deg * RAD; const dx = p.x - P.x; const dy = p.y - P.y; return { x: P.x + dx * Math.cos(a) - dy * Math.sin(a), y: P.y + dx * Math.sin(a) + dy * Math.cos(a) }; }; /* where the centre of the water is on the page, to feel the globe accelerate */ const centre = () => { let p = turn({ x: 0, y: 0 }, shake.rot, PIVOT); p = { x: p.x + shake.x, y: PIVOT.y + (p.y - PIVOT.y) * shake.sy }; p = turn(p, tilt.rot, PIVOT); return { x: p.x, y: p.y + tilt.y }; }; let lastT = ''; let lastS = ''; function drawGlobe() { const t = `translate(0 ${f2(tilt.y)}) rotate(${f2(tilt.rot)} ${PIVOT.x} ${PIVOT.y})`; const s = `translate(${f2(shake.x)} 0) rotate(${f2(shake.rot)} ${PIVOT.x} ${PIVOT.y}) translate(0 ${PIVOT.y}) scale(1 ${f2(shake.sy)}) translate(0 ${-PIVOT.y})`; if (t !== lastT) tiltEl.setAttribute('transform', (lastT = t)); if (s !== lastS) { shakeEl.setAttribute('transform', (lastS = s)); } /* the reflection stays with the light: it turns back against the globe and slides a little on the glass */ const deg = tilt.rot + shake.rot; shineEl.setAttribute('transform', `rotate(${f2(-deg)}) translate(${f2(-deg * 0.6)} 0)`); sheenEl.setAttribute('transform', `translate(${f2(sheen.x)} 0)`); sheenEl.style.opacity = f2(sheen.o); const lean = Math.abs(deg); shadowEl.setAttribute('transform', `translate(${f2(shake.x * 0.8 + deg * 1.2)} 0) translate(0 222) scale(${f2(1 - lean * 0.006 - (-tilt.y) * 0.008)} 1) translate(0 -222)`); } /* ---- the water ---- */ let waterSpin = 0; /* how fast the water turns, on its own (it lags behind the glass) */ let turb = 0; /* how stirred the water is */ let clock = 0; let prevAngle = 0; let prevC = null; let prevV = { x: 0, y: 0 }; function step(dt) { clock += dt; const a = angle(); const glassSpin = (a - prevAngle) / dt; prevAngle = a; /* the glass speeds up and slows down: the water lags, so in the glass it seems pushed the other way */ const c = centre(); let acc = { x: 0, y: 0 }; if (prevC) { const v = { x: (c.x - prevC.x) / dt, y: (c.y - prevC.y) / dt }; acc = { x: clamp((v.x - prevV.x) / dt, -9000, 9000), y: clamp((v.y - prevV.y) / dt, -9000, 9000) }; prevV = v; } prevC = c; const ca = Math.cos(-a); const sa = Math.sin(-a); const accL = { x: acc.x * ca - acc.y * sa, y: acc.x * sa + acc.y * ca }; /* gravity, seen from inside the tilted glass */ const g = 46 * FALL; const gL = { x: -Math.sin(a) * g, y: Math.cos(a) * g }; waterSpin += (glassSpin - waterSpin) * Math.min(1, dt / 1.5); const rel = (waterSpin - glassSpin) * 0.6; turb *= Math.exp(-dt / 1.7); const relax = 1.5; for (const f of flakes) { if (f.settled) continue; /* the water around the flake: the swirl, plus two crossing waves of stirring */ const ux = -rel * f.y + turb * (Math.sin(f.y * 0.031 + clock * 1.7) + 0.6 * Math.sin(f.y * 0.067 - clock * 2.3 + 1.2)); const uy = rel * f.x + turb * (Math.sin(f.x * 0.029 - clock * 1.4 + 0.5) + 0.6 * Math.sin(f.x * 0.071 + clock * 2.1)); const heavy = Math.sqrt(f.s); f.vx += ((ux - f.vx) * relax + gL.x * heavy - accL.x * 0.32) * dt; f.vy += ((uy - f.vy) * relax + gL.y * heavy - accL.y * 0.32) * dt; /* the flutter: a swing from side to side that fades when the water is busy */ const calm = 1 / (1 + turb * 0.03 + Math.abs(rel) * 0.8); const sway = FLUTTER * f.amp * Math.sin(clock * f.w + f.ph) * calm; f.x += (f.vx + sway) * dt; f.y += f.vy * dt; f.rot += (f.spin * (0.25 + Math.min(1, Math.hypot(f.vx, f.vy) / 80)) + sway * 2.5) * dt; /* the glass holds it in */ const r = Math.hypot(f.x, f.y); if (r > R_IN) { const nx = f.x / r; const ny = f.y / r; f.x = nx * R_IN; f.y = ny * R_IN; const vn = f.vx * nx + f.vy * ny; if (vn > 0) { f.vx -= vn * nx * 1.3; f.vy -= vn * ny * 1.3; } } /* landed: it stays where it touched, a little sunk into what it rests on */ const land = rest(f.x); if (f.y >= land.y - 2 * f.s && f.vy >= -5) { f.y = land.y - 2 * f.s; f.vx = 0; f.vy = 0; f.settled = land.id; if (caps[land.id]) caps[land.id].count++; } } } function drawFlakes() { for (const f of flakes) { const t = `translate(${f2(f.x)} ${f2(f.y)}) rotate(${Math.round(f.rot)}) scale(${f2(f.s)})`; if (t !== f.drawn) f.node.setAttribute('transform', (f.drawn = t)); } } function drawCaps(instant) { for (const id in caps) { const c = caps[id]; const w = capWidth(c.count); if (w === c.shown) continue; c.shown = w; if (instant) c.node.setAttribute('stroke-width', w); else gsap.to(c.node, { attr: { 'stroke-width': w }, duration: 0.5, ease: 'back.out(3)', overwrite: true }); } } /* the water stirs and every flake is lifted, the ones on the roofs a moment after the others */ function stir(sign, strength) { waterSpin += sign * 1.9 * SWIRL * strength; turb = Math.max(turb, 75 * SWIRL * strength); for (const f of flakes) { if (f.settled) { if (caps[f.settled]) caps[f.settled].count = Math.max(0, caps[f.settled].count - 1); f.settled = null; } f.vx += between(-110, 110) * SWIRL * strength; f.vy -= between(130, 330) * SWIRL * strength; f.spin = between(-160, 160); } } function settleAll() { for (let k = 0; k < 120 * 30; k++) { step(1 / 120); if (flakes.every((f) => f.settled)) break; } for (const f of flakes) { if (!f.settled) { const land = rest(f.x); f.y = land.y - 2 * f.s; f.settled = land.id; if (caps[land.id]) caps[land.id].count++; } } } if (matchMedia('(hover: none)').matches) hint.textContent = hint.textContent.replace('Click', 'Tap'); /* ---- reduced motion: nothing moves; a click lets the snow fade and come back somewhere else ---- */ if (REDUCED) { scatter(); settleAll(); drawGlobe(); drawFlakes(); drawCaps(true); gsap.from([title, ...reveals, globe, hint], { opacity: 0, duration: 0.9, stagger: 0.1, ease: 'power1.out' }); let busy = false; globe.addEventListener('click', () => { if (busy) return; busy = true; gsap.to([flakesEl, capsEl], { opacity: 0, duration: 0.45, ease: 'power1.in', onComplete: () => { scatter(); settleAll(); drawFlakes(); drawCaps(true); gsap.to([flakesEl, capsEl], { opacity: 1, duration: 0.7, ease: 'power1.out', onComplete: () => (busy = false) }); }, }); }); return; } /* ---- the shake ---- */ let sign = 1; let shaking = null; function shakeGlobe() { const s = (sign = -sign); const A = SHAKE; if (shaking) shaking.kill(); stir(s, 1); const swings = [-1, 0.82, -0.62, 0.42, -0.24, 0.1, 0]; shaking = gsap.timeline(); shaking.to(shake, { keyframes: swings.map((k, i) => ({ rot: k * A * s, x: k * A * 1.5 * s, duration: i === 0 ? 0.12 : i === swings.length - 1 ? 0.5 : 0.15, ease: i === swings.length - 1 ? 'elastic.out(1, 0.45)' : 'sine.inOut' })), }, 0); shaking.fromTo(shake, { sy: 0.965 }, { sy: 1, duration: 0.9, ease: 'elastic.out(1.2, 0.35)' }, 0); /* the light runs across the glass, against the first swing */ shaking.fromTo(sheen, { x: s > 0 ? 200 : -200, o: 0 }, { x: s > 0 ? -200 : 200, duration: 0.95, ease: 'power2.inOut' }, 0.02); shaking.to(sheen, { keyframes: [{ o: 1, duration: 0.3 }, { o: 1, duration: 0.3 }, { o: 0, duration: 0.35 }] }, 0.02); /* the title jumps with the shake, letter after letter */ shaking.to(inners, { keyframes: [{ y: -9, rotation: -5 * s, duration: 0.14, ease: 'power2.out' }, { y: 2, rotation: 2 * s, duration: 0.16, ease: 'sine.inOut' }, { y: 0, rotation: 0, duration: 0.6, ease: 'elastic.out(1, 0.4)' }], stagger: { each: 0.018, from: s > 0 ? 'start' : 'end' }, }, 0); } globe.addEventListener('click', shakeGlobe); /* ---- the pointer tilts the globe a little; the hover lifts it off the shelf ---- */ const toRot = gsap.quickTo(tilt, 'rot', { duration: 0.9, ease: 'power3.out' }); stage.addEventListener('pointermove', (e) => { const r = globe.getBoundingClientRect(); const k = clamp((e.clientX - (r.left + r.width / 2)) / (innerWidth * 0.45), -1, 1); toRot(k * TILT); }); const settleTilt = () => gsap.to(tilt, { rot: 0, duration: 1.4, ease: 'elastic.out(1, 0.4)', overwrite: 'auto' }); stage.addEventListener('pointerleave', settleTilt); stage.addEventListener('pointerup', (e) => { if (e.pointerType !== 'mouse') settleTilt(); }); if (matchMedia('(hover: hover)').matches) { globe.addEventListener('pointerenter', () => gsap.to(tilt, { y: -7, duration: 0.6, ease: 'back.out(2.5)', overwrite: 'auto' })); globe.addEventListener('pointerleave', () => gsap.to(tilt, { y: 0, duration: 0.9, ease: 'elastic.out(1, 0.45)', overwrite: 'auto' })); } /* ---- the loop ---- */ let acc = 0; const STEP = 1 / 120; gsap.ticker.add((time, deltaMs) => { acc += Math.min(0.05, deltaMs / 1000); let n = 0; while (acc >= STEP && n < 8) { step(STEP); acc -= STEP; n++; } if (n === 8) acc = 0; drawGlobe(); drawFlakes(); drawCaps(false); }); /* ---- the entrance: the snow already lies; the globe drops on the shelf and the landing stirs it ---- */ scatter(); settleAll(); drawFlakes(); drawCaps(true); prevAngle = angle(); const intro = gsap.timeline({ delay: 0.15 }); intro.from(outers, { y: 40, rotation: 8, opacity: 0, duration: 0.9, ease: 'back.out(2.2)', stagger: 0.025 }, 0); intro.from(reveals, { y: 16, opacity: 0, duration: 0.7, ease: 'power3.out', stagger: 0.1 }, 0.35); intro.fromTo(tilt, { y: -140 }, { y: 0, duration: 0.55, ease: 'power2.in' }, 0.1); intro.from(globe, { opacity: 0, duration: 0.25, ease: 'power1.out' }, 0.1); intro.from(shadowEl, { opacity: 0, duration: 0.55, ease: 'power2.in' }, 0.1); intro.add(() => stir(1, 0.7), 0.65); intro.to(shake, { keyframes: [{ sy: 0.93, duration: 0.08, ease: 'power2.out' }, { sy: 1, duration: 0.8, ease: 'elastic.out(1.2, 0.35)' }] }, 0.65); intro.to(shake, { keyframes: [{ rot: 3, duration: 0.12, ease: 'sine.out' }, { rot: 0, duration: 0.9, ease: 'elastic.out(1, 0.35)' }] }, 0.65); intro.from(hint, { opacity: 0, y: 10, duration: 0.7, ease: 'back.out(2)' }, 1.3); })();