/* The rope title A wooden spool drops onto the page with a bounce and starts to turn: a twisted hemp rope runs off it, its strands sliding as it goes, and writes a joined-up title in one line, looping round on itself. Wherever the rope crosses itself a knot is tied: it forms loose, turns and snaps tight with a puff of fibres; the dot of the i drops in as a small knot of its own. The frayed end swings and settles. Then someone pulls the end: the knots give, the end is yanked straight, the rope runs out through its own letters at full speed, the empty spool rolls away and it all starts again. A click pulls the end at once. The letters are a joined-up script drawn for this demo: every letter is the path the rope follows. */ /* ---- values to change ---- */ const TITLE = 'bowline'; /* the word the rope writes: letters a to z and spaces */ const SUBTITLE = 'Ropes, sails & rigging since 1962'; /* the line under the title (empty = no line) */ const SPEED = 1; /* how fast the rope runs: 2 = twice as fast, 0.5 = half as fast */ const ROPE = 1; /* how thick the rope is: 1.4 = a fat mooring line, 0.7 = a thin cord */ const KNOTS = true; /* tie a knot wherever the rope crosses itself */ const REST = 2.6; /* seconds the finished title stays before the end is pulled */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; /* the alphabet: a joined-up script drawn for this demo, one stroke per letter (x-height 100, baseline 0, y down). Every letter starts where the rope comes into it and ends where it leaves for the next one */ const GLYPHS = { a: { d: 'M 62 -88 C 45 -105 5 -95 4 -50 C 3 -12 40 -5 58 -45 C 62 -60 64 -80 66 -100 C 63 -60 58 -20 68 -6 C 76 4 92 -4 104 -22' }, b: { d: 'M 2 -60 C 20 -120 55 -190 42 -215 C 30 -235 8 -200 10 -150 C 12 -100 8 -30 12 -12 C 15 2 28 2 28 -14 C 32 -60 58 -100 78 -80 C 96 -60 72 -5 42 -10 C 55 -30 80 -60 104 -62' }, c: { d: 'M 64 -82 C 56 -100 20 -100 8 -60 C -2 -20 30 2 60 -10 C 75 -16 88 -22 98 -30' }, d: { d: 'M 62 -88 C 45 -105 5 -95 4 -50 C 3 -12 40 -5 58 -45 C 64 -90 66 -170 62 -212 C 60 -230 80 -230 78 -212 C 74 -150 68 -40 74 -10 C 80 4 94 -4 106 -22' }, e: { d: 'M 0 -25 C 30 -30 62 -60 52 -88 C 42 -110 8 -90 6 -50 C 4 -10 40 6 76 -20' }, f: { d: 'M 0 -60 C 25 -110 55 -200 40 -220 C 25 -235 10 -200 12 -140 C 14 -60 14 40 10 110 C 8 130 -10 125 -4 90 C 4 40 40 -10 70 -30' }, g: { d: 'M 62 -88 C 45 -105 5 -95 4 -50 C 3 -12 40 -5 58 -45 C 62 -70 64 -85 66 -100 C 64 -40 66 60 50 110 C 40 140 10 125 18 90 C 28 50 60 -5 96 -30' }, h: { d: 'M 0 -60 C 20 -120 55 -190 42 -215 C 30 -235 8 -200 10 -150 C 12 -100 10 -30 12 -12 C 14 2 28 2 28 -14 C 30 -70 46 -100 62 -95 C 78 -90 74 -40 74 -14 C 74 2 92 -2 104 -22' }, i: { pre: 14, d: 'M -14 -74 C -12 -92 -6 -100 -1 -100 C 3 -100 4 -96 4 -92 C 8 -60 4 -20 14 -6 C 22 4 34 -4 46 -24', dot: [8, -150] }, j: { pre: 14, d: 'M -14 -74 C -12 -92 -6 -100 -1 -100 C 3 -100 4 -96 4 -92 C 8 -40 10 40 2 110 C -2 135 -25 130 -20 100 C -12 60 20 0 50 -30', dot: [8, -150] }, k: { d: 'M 0 -60 C 20 -120 55 -190 42 -215 C 30 -235 8 -200 10 -150 C 12 -100 10 -30 12 -12 C 14 2 28 2 28 -14 C 32 -60 54 -110 70 -88 C 82 -68 52 -52 34 -50 C 20 -50 22 -36 36 -38 C 52 -38 58 -10 72 -6 C 82 -3 94 -10 102 -22' }, l: { d: 'M 0 -55 C 20 -120 50 -190 40 -215 C 30 -235 8 -200 8 -150 C 8 -90 6 -30 16 -8 C 24 4 38 -4 50 -24' }, m: { pre: 14, d: 'M -14 -74 C -12 -92 -6 -100 -1 -100 C 3 -100 4 -96 4 -92 C 6 -60 6 -30 8 -12 C 10 2 24 2 24 -14 C 26 -70 36 -100 50 -96 C 62 -92 60 -40 62 -12 C 64 2 78 2 78 -14 C 80 -70 90 -100 104 -96 C 116 -92 112 -40 114 -14 C 116 2 130 -2 140 -22' }, n: { pre: 14, d: 'M -14 -74 C -12 -92 -6 -100 -1 -100 C 3 -100 4 -96 4 -92 C 6 -60 6 -30 8 -12 C 10 2 24 2 24 -14 C 26 -70 38 -100 54 -96 C 68 -92 64 -40 66 -14 C 68 2 82 -2 94 -22' }, o: { d: 'M 50 -95 C 25 -98 4 -70 5 -40 C 6 -8 40 -2 55 -30 C 64 -52 64 -88 46 -96 C 28 -102 22 -80 40 -80 C 58 -80 76 -88 92 -92' }, p: { pre: 14, d: 'M -14 -74 C -12 -92 -6 -100 -1 -100 C 3 -100 4 -96 4 -92 C 8 -40 10 40 8 108 C 7 124 24 124 22 106 C 20 40 18 -40 24 -70 C 34 -100 66 -100 68 -60 C 70 -20 44 0 22 -8 C 44 -14 72 -20 98 -30' }, q: { d: 'M 62 -88 C 45 -105 5 -95 4 -50 C 3 -12 40 -5 58 -45 C 62 -70 64 -85 66 -100 C 64 -40 66 60 62 104 C 60 122 76 124 76 104 C 76 60 80 10 104 -25' }, r: { pre: 14, d: 'M -14 -74 C -12 -92 -6 -100 -1 -100 C 3 -100 4 -96 4 -92 C 12 -100 28 -96 40 -88 C 38 -60 36 -30 38 -10 C 44 -4 56 -6 70 -24' }, s: { d: 'M 2 -40 C 10 -70 20 -95 26 -100 C 40 -70 58 -40 46 -14 C 36 4 8 2 4 -10 C 16 -2 44 -10 70 -26' }, t: { d: 'M 4 -60 C 15 -120 22 -160 26 -175 C 22 -120 18 -40 24 -12 C 30 4 44 0 46 -20 C 48 -60 20 -110 -4 -110 C 20 -112 50 -112 70 -110' }, u: { pre: 14, d: 'M -14 -74 C -12 -92 -6 -100 -1 -100 C 3 -100 4 -96 4 -92 C 6 -50 2 -10 20 -4 C 40 2 50 -50 54 -96 C 52 -60 50 -20 60 -6 C 68 4 80 -4 92 -22' }, v: { pre: 14, d: 'M -14 -74 C -12 -92 -6 -100 -1 -100 C 3 -100 4 -96 4 -92 C 10 -60 24 -10 34 -2 C 44 -10 52 -60 56 -92 C 58 -114 84 -112 76 -90 C 72 -78 86 -86 98 -92' }, w: { pre: 6, d: 'M 2 -98 C 6 -60 12 -6 26 -2 C 38 2 44 -36 50 -60 C 53 -74 66 -74 66 -60 C 68 -36 72 -4 84 -2 C 96 0 104 -50 106 -96 C 108 -116 134 -114 126 -92 C 122 -80 136 -86 148 -92' }, x: { d: 'M 2 -80 C 20 -100 34 -90 40 -50 C 46 -10 58 0 72 -10 C 56 -6 44 -30 40 -50 C 36 -70 50 -96 70 -92 C 76 -90 84 -92 92 -94' }, y: { pre: 14, d: 'M -14 -74 C -12 -92 -6 -100 -1 -100 C 3 -100 4 -96 4 -92 C 6 -50 2 -10 20 -4 C 40 2 50 -50 54 -96 C 54 -40 56 60 40 110 C 30 140 0 125 8 90 C 18 50 50 -5 86 -30' }, z: { d: 'M 4 -90 C 30 -100 50 -96 60 -90 C 40 -60 20 -30 6 -2 C 30 -10 50 -6 70 -20' }, }; /* a path of M and C commands, as a list of cubic pieces */ function parseCubics(d) { const n = d.match(/-?\d+(\.\d+)?/g).map(Number); const out = []; let x = n[0], y = n[1]; for (let k = 2; k + 5 < n.length; k += 6) { out.push([x, y, n[k], n[k + 1], n[k + 2], n[k + 3], n[k + 4], n[k + 5]]); x = n[k + 4]; y = n[k + 5]; } return out; } function cubicPoint(c, t) { const u = 1 - t; return { x: u * u * u * c[0] + 3 * u * u * t * c[2] + 3 * u * t * t * c[4] + t * t * t * c[6], y: u * u * u * c[1] + 3 * u * u * t * c[3] + 3 * u * t * t * c[5] + t * t * t * c[7], }; } function unit(x, y) { const l = Math.hypot(x, y) || 1; return { x: x / l, y: y / l }; } /* the whole word as one line of points, the same distance apart (in letter units), with the places where the rope crosses itself (the knots) and the dots of the i and the j */ function layoutWord(word, step = 2) { const pieces = []; const dots = []; let ox = 0; let last = null; for (const ch of String(word).toLowerCase()) { const g = GLYPHS[ch]; if (!g) { if (last) ox += 46; continue; } if (g.pre) ox += g.pre; const cs = parseCubics(g.d).map((c) => c.map((v, i) => (i % 2 ? v : v + ox))); const first = cs[0]; if (last) { const tE = unit(last[6] - last[4], last[7] - last[5]); const tA = unit(first[2] - first[0], first[3] - first[1]); const dist = Math.hypot(first[0] - last[6], first[1] - last[7]); const k = Math.min(60, Math.max(14, dist * 0.45)); pieces.push([last[6], last[7], last[6] + tE.x * k, last[7] + tE.y * k, first[0] - tA.x * k, first[1] - tA.y * k, first[0], first[1]]); } if (g.dot) dots.push({ x: g.dot[0] + ox, y: g.dot[1], piece: pieces.length + 1 }); pieces.push(...cs); last = cs[cs.length - 1]; ox = last[6] + 8; } /* fine points, then the same points spaced evenly along the length */ const fine = []; const pieceStart = []; for (const c of pieces) { pieceStart.push(fine.length); const len = Math.hypot(c[2] - c[0], c[3] - c[1]) + Math.hypot(c[4] - c[2], c[5] - c[3]) + Math.hypot(c[6] - c[4], c[7] - c[5]); const n = Math.max(4, Math.ceil(len / 1.5)); for (let i = fine.length ? 1 : 0; i <= n; i++) fine.push(cubicPoint(c, i / n)); } const cum = [0]; for (let i = 1; i < fine.length; i++) cum.push(cum[i - 1] + Math.hypot(fine[i].x - fine[i - 1].x, fine[i].y - fine[i - 1].y)); const total = cum[cum.length - 1]; const pts = []; let j = 0; for (let s = 0; s <= total; s += step) { while (j < cum.length - 2 && cum[j + 1] < s) j++; const f = (s - cum[j]) / ((cum[j + 1] - cum[j]) || 1); pts.push({ x: fine[j].x + (fine[j + 1].x - fine[j].x) * f, y: fine[j].y + (fine[j + 1].y - fine[j].y) * f }); } /* the dot of an i appears when the rope reaches the top of its stem */ for (const dt of dots) dt.s = cum[pieceStart[Math.min(dt.piece, pieceStart.length - 1)]] || 0; /* where the line crosses itself: the later pass is the one that ties the knot */ const cross = []; for (let i = 0; i < pts.length - 1; i++) { for (let k = i + 8; k < pts.length - 1; k++) { const p = pts[i], p2 = pts[i + 1], q = pts[k], q2 = pts[k + 1]; const d = (p2.x - p.x) * (q2.y - q.y) - (p2.y - p.y) * (q2.x - q.x); if (!d) continue; const t = ((q.x - p.x) * (q2.y - q.y) - (q.y - p.y) * (q2.x - q.x)) / d; const u = ((q.x - p.x) * (p2.y - p.y) - (q.y - p.y) * (p2.x - p.x)) / d; if (t < 0 || t > 1 || u < 0 || u > 1) continue; const x = p.x + (p2.x - p.x) * t, y = p.y + (p2.y - p.y) * t; if (cross.some((c) => Math.hypot(c.x - x, c.y - y) < 30)) continue; cross.push({ x, y, s: k * step, s0: i * step, a1: Math.atan2(p2.y - p.y, p2.x - p.x), a2: Math.atan2(q2.y - q.y, q2.x - q.x) }); } } let minY = Infinity, maxY = -Infinity, minX = Infinity, maxX = -Infinity; for (const p of pts) { minY = Math.min(minY, p.y); maxY = Math.max(maxY, p.y); minX = Math.min(minX, p.x); maxX = Math.max(maxX, p.x); } for (const dt of dots) minY = Math.min(minY, dt.y - 14); return { pts, total: (pts.length - 1) * step, step, cross, dots, box: { x: minX, y: minY, w: maxX - minX, h: maxY - minY } }; } /* ------------------------------------------------------------------ the stage */ const NS = 'http://www.w3.org/2000/svg'; const TAU = Math.PI * 2; const H = 2; /* the rope is followed as points this many pixels apart */ const RINGS = 4; /* turns of rope on the full spool */ const $ = (s) => document.querySelector(s); const scene = $('[data-scene]'); const svg = $('[data-stage]'); const sub = $('[data-sub]'); const hint = $('[data-hint]'); const reader = $('[data-reader]'); const el = { blur: $('[data-blur-amount]'), spoolShadow: $('[data-spool-shadow]'), ropeShadow: $('[data-rope-shadow]'), knotShadows: $('[data-knot-shadows]'), spool: $('[data-spool]'), spoolBody: $('[data-spool-body]'), spoolTurn: $('[data-spool-turn]'), flange: $('[data-flange]'), grain: $('[data-grain]'), holes: $('[data-holes]'), coilBase: $('[data-coil-base]'), coilStrands: $('[data-coil-strands]'), coilLight: $('[data-coil-light]'), hubTurn: $('[data-hub-turn]'), hub: $('[data-hub]'), hubSlot: $('[data-hub-slot]'), rope: $('[data-rope]'), ropeBase: $('[data-rope-base]'), ropeStrands: $('[data-rope-strands]'), ropeLight: $('[data-rope-light]'), fray: $('[data-fray]'), whip: $('[data-whip]'), knots: $('[data-knots]'), }; function make(tag, attrs, parent) { const n = document.createElementNS(NS, tag); for (const k in attrs) n.setAttribute(k, attrs[k]); if (parent) parent.append(n); return n; } const f1 = (v) => (Math.round(v * 10) / 10).toString(); const clamp = (v, a, b) => Math.min(b, Math.max(a, v)); /* a fixed little number for every index: the fibres are the same in every round */ const hash = (i) => { const x = Math.sin(i * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); }; /* the word: only letters and spaces, the first letter written as a capital for screen readers */ const WORD = String(TITLE).toLowerCase().replace(/[^a-z ]+/g, '').replace(/\s+/g, ' ').trim() || 'bowline'; reader.textContent = WORD.charAt(0).toUpperCase() + WORD.slice(1) + (SUBTITLE ? '. ' + SUBTITLE : ''); sub.setAttribute('aria-hidden', 'true'); if (matchMedia('(hover: none)').matches) hint.textContent = 'Tap to pull the end'; sub.textContent = ''; const letters = []; for (const ch of String(SUBTITLE)) { const s = document.createElement('span'); s.className = 'lettera'; s.textContent = ch; sub.append(s); letters.push(s); } /* ------------------------------------------------------------------ geometry */ let G = null; /* the measures of this window */ let S = null; /* the state that the timeline moves and render() draws */ let tl = null; let hurry = false; /* evenly spaced points along a cubic, every H pixels */ function resampleCubic(c) { const fine = []; for (let i = 0; i <= 60; i++) fine.push(cubicPoint(c, i / 60)); const out = [fine[0]]; let acc = 0; let want = H; for (let i = 1; i < fine.length; i++) { const a = fine[i - 1], b = fine[i]; const seg = Math.hypot(b.x - a.x, b.y - a.y); while (acc + seg >= want) { const t = (want - acc) / (seg || 1); out.push({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t }); want += H; } acc += seg; } return out; } function build() { S = null; lastLead = null; const vw = scene.clientWidth; const vh = scene.clientHeight; svg.setAttribute('viewBox', `0 0 ${vw} ${vh}`); const narrow = vw < 700; const coarse = layoutWord(WORD, 2); const box = coarse.box; const ropeU = 17 * ROPE; /* rope thickness in letter units */ const spoolU = ropeU * 6.4; /* spool radius in letter units */ const tailU = 70; let k; let ox; let baseY; let cx; let cy; if (!narrow) { const groupU = spoolU * 2 + 64 + box.w + tailU; k = Math.min((vw * 0.84) / groupU, (vh * 0.42) / box.h, 3); const left = (vw - groupU * k) / 2; cx = left + spoolU * k; ox = left + (spoolU * 2 + 64) * k - box.x * k; baseY = vh * 0.45 - (box.y + box.h / 2) * k; cy = baseY - 46 * k; } else { k = Math.min((vw - 28) / (box.w + 40), (vh * 0.3) / box.h); ox = (vw - (box.w + 40) * k) / 2 - box.x * k; baseY = vh * 0.38 - (box.y + box.h / 2) * k; const Rs0 = spoolU * k; cx = Math.max(18 + Rs0, ox + box.x * k + Rs0 * 0.2); cy = baseY + (box.y + box.h) * k + Rs0 + 34; } const W = ropeU * k; const hw = W / 2; const Rs = spoolU * k; const fine = layoutWord(WORD, H / k); const word = fine.pts.map((p) => ({ x: ox + p.x * k, y: baseY + p.y * k })); const Lw = (word.length - 1) * H; /* the tail: on from the last letter, then hanging down. Kept as the direction of every step, so that it can bend */ const e = word[word.length - 1]; const p3 = word[word.length - 4] || word[0]; const tE = unit(e.x - p3.x, e.y - p3.y); const tailPts = resampleCubic([e.x, e.y, e.x + tE.x * 40 * k, e.y + tE.y * 40 * k, e.x + 62 * k, e.y + 30 * k, e.x + 52 * k, e.y + 118 * k]); const tailDir = []; for (let i = 1; i < tailPts.length; i++) tailDir.push(Math.atan2(tailPts[i].y - tailPts[i - 1].y, tailPts[i].x - tailPts[i - 1].x)); const Lt = tailDir.length * H; const knots = KNOTS ? coarse.cross.map((c) => ({ x: ox + c.x * k, y: baseY + c.y * k, s: c.s * k })) : []; const dots = coarse.dots.map((d) => ({ x: ox + d.x * k, y: baseY + d.y * k, s: d.s * k })); const rHub = Rs * 0.3; const subY = narrow ? cy + Rs + 30 : baseY + (box.y + box.h) * k + Math.max(26, 30 * k); G = { vw, vh, narrow, k, W, hw, Rs, rHub, cx, cy, word, Lw, e, tailDir, Lt, knots, dots, subY, xh: 100 * k }; /* where the rope leaves the spool, with the spool full: the start of the lead, and the whole length of rope */ const lead0 = leadPoints(G.rHub + RINGS * W - hw); G.sStart0 = -(lead0.length - 1) * H; G.tailEnd = Lw + Lt; G.Lrope = (G.tailEnd - G.sStart0) * 1.32; el.blur.setAttribute('stdDeviation', f1(Math.max(1.5, W * 0.32))); el.ropeShadow.setAttribute('stroke-width', f1(W)); el.ropeBase.setAttribute('stroke-width', f1(W)); el.fray.setAttribute('stroke-width', f1(Math.max(0.8, W * 0.075))); el.whip.setAttribute('stroke-width', f1(W * 0.16)); el.coilBase.setAttribute('stroke-width', f1(W)); /* the spool: the flange with its grain and its holes, the hub with its slot */ el.flange.setAttribute('r', f1(Rs)); el.flange.setAttribute('stroke-width', f1(Rs * 0.025)); el.spoolShadow.setAttribute('r', f1(Rs)); el.grain.replaceChildren(); el.grain.setAttribute('stroke-width', f1(Math.max(0.7, Rs * 0.012))); for (const r of [0.95, 0.88, 0.74]) make('circle', { r: f1(Rs * r) }, el.grain); el.holes.replaceChildren(); for (let i = 0; i < 5; i++) { const a = (i / 5) * TAU; make('circle', { class: 'foro', cx: f1(Math.cos(a) * Rs * 0.62), cy: f1(Math.sin(a) * Rs * 0.62), r: f1(Rs * 0.085) }, el.holes); } el.hub.setAttribute('r', f1(rHub * 0.94)); el.hub.setAttribute('stroke-width', f1(Rs * 0.02)); const sl = rHub * 0.42; el.hubSlot.setAttribute('d', `M ${f1(-sl)} 0 L ${f1(sl)} 0 M 0 ${f1(-sl)} L 0 ${f1(sl)}`); el.hubSlot.setAttribute('stroke-width', f1(Math.max(1.2, rHub * 0.12))); /* a group for every knot (and every dot), with its shadow */ el.knots.replaceChildren(); el.knotShadows.replaceChildren(); for (const n of knots.concat(dots)) { n.g = make('g', {}, el.knots); n.base = make('path', { class: 'corda-fondo', 'stroke-width': f1(hw * 1.44) }, n.g); n.strands = make('path', { class: 'corda-trefoli' }, n.g); n.light = make('path', { class: 'corda-luce' }, n.g); n.puff = make('path', { class: 'ciuffo', 'stroke-width': f1(Math.max(0.8, W * 0.07)) }, n.g); n.shadow = make('circle', {}, el.knotShadows); } sub.style.top = `${f1(subY)}px`; } /* the lead: from the top of the coils (r from the hub) to the first letter */ function leadPoints(rTop) { const sx = G.cx + (S ? S.spoolX : 0); const sy = G.cy + (S ? S.spoolY : 0) - rTop; const w0 = G.word[0]; const w1 = G.word[Math.min(3, G.word.length - 1)]; const tA = unit(w1.x - w0.x, w1.y - w0.y); const d = Math.hypot(w0.x - sx, w0.y - sy); return resampleCubic([sx, sy, sx + d * 0.5, sy, w0.x - tA.x * d * 0.4, w0.y - tA.y * d * 0.4, w0.x, w0.y]); } /* ------------------------------------------------------------------ the path of this frame */ /* lead, word, tail (bent by the swing or pulled straight) and the straight run off the screen, as one list of points H pixels apart; s = 0 is the start of the first letter */ const P = { x: [], y: [], s0: 0, n: 0, ex: 1, ey: 0, sEnd: 0 }; let lastLead = null; function assemble(rTop) { /* once the spool is empty the lead keeps its last shape: the spool can roll away without dragging the rope */ const lead = S.freeze && lastLead ? lastLead : leadPoints(rTop); lastLead = lead; P.x.length = 0; P.y.length = 0; for (let i = 0; i < lead.length - 1; i++) { P.x.push(lead[i].x); P.y.push(lead[i].y); } for (const p of G.word) { P.x.push(p.x); P.y.push(p.y); } P.s0 = -(lead.length - 1) * H; /* the tail */ let x = G.e.x, y = G.e.y; const n = G.tailDir.length; const swing = S.theta + S.sway; let last = 0; for (let i = 0; i < n; i++) { const u = (i + 1) / n; let a = G.tailDir[i] + swing * u * u * 1.4; /* pulled: the tail turns towards the right, a little up */ const want = -0.12; a += (want - a) * S.straight * Math.min(1, u * 2.2); x += Math.cos(a) * H; y += Math.sin(a) * H; P.x.push(x); P.y.push(y); last = a; } P.n = P.x.length; P.ex = Math.cos(last); P.ey = Math.sin(last); P.sEnd = P.s0 + (P.n - 1) * H; } /* the point at s along the path, with its direction */ const Q = { x: 0, y: 0, tx: 1, ty: 0 }; function at(s) { const f = (s - P.s0) / H; const n = P.n; if (f >= n - 1) { const d = s - P.sEnd; Q.x = P.x[n - 1] + P.ex * d; Q.y = P.y[n - 1] + P.ey * d; Q.tx = P.ex; Q.ty = P.ey; return Q; } const i = Math.max(0, Math.floor(f)); const t = Math.max(0, f - i); Q.x = P.x[i] + (P.x[i + 1] - P.x[i]) * t; Q.y = P.y[i] + (P.y[i + 1] - P.y[i]) * t; const i0 = Math.max(0, i - 1), i1 = Math.min(n - 1, i + 2); const dx = P.x[i1] - P.x[i0], dy = P.y[i1] - P.y[i0]; const l = Math.hypot(dx, dy) || 1; Q.tx = dx / l; Q.ty = dy / l; return Q; } /* a circle as a path: s runs clockwise and ends (s = 0) at the top */ function circleAt(cx, cy, r) { return (s) => { const a = -Math.PI / 2 + s / r; Q.x = cx + Math.cos(a) * r; Q.y = cy + Math.sin(a) * r; Q.tx = -Math.sin(a); Q.ty = Math.cos(a); return Q; }; } /* ------------------------------------------------------------------ drawing a rope */ /* a twisted rope along any path, from s = a to s = b: the line of its dark core, and every strand as a slanted lens with a thinner lens of light on it. The strands sit every `pitch` from `anchor`, so moving the anchor slides them */ function off(fn, s, o) { const q = fn(s); return `${f1(q.x - q.ty * o)} ${f1(q.y + q.tx * o)}`; } function rope(fn, a, b, anchor, hw, out) { if (b - a < 0.5) return; const pitch = hw * 1.15; const sl = hw * 1.25; const g = pitch * 0.74; const cl = (s) => clamp(s, a, b); /* the core */ let d = ''; const step = 3; for (let s = a; s < b; s += step) { const q = fn(s); d += (d ? 'L' : 'M') + f1(q.x) + ' ' + f1(q.y) + ' '; } const q = fn(b); d += (d ? 'L' : 'M') + f1(q.x) + ' ' + f1(q.y) + ' '; out.base += d; /* the strands */ const k0 = Math.ceil((anchor - b - pitch * 2) / pitch); const k1 = Math.floor((anchor - a + pitch * 2) / pitch); const r = hw * 0.97; for (let kk = k0; kk <= k1; kk++) { const c = anchor - kk * pitch; if (c + sl / 2 + g < a || c - sl / 2 - g > b) continue; out.strands += `M${off(fn, cl(c - sl / 2 - g / 2), -r)} L${off(fn, cl(c - sl / 2 + g / 2), -r)} Q${off(fn, cl(c + g * 0.95), 0)} ${off(fn, cl(c + sl / 2 + g / 2), r)} L${off(fn, cl(c + sl / 2 - g / 2), r)} Q${off(fn, cl(c - g * 0.95), 0)} ${off(fn, cl(c - sl / 2 - g / 2), -r)}Z `; out.light += `M${off(fn, cl(c - sl * 0.36), -r * 0.7)} Q${off(fn, cl(c - sl * 0.17 + g * 0.32), -r * 0.32)} ${off(fn, cl(c + sl * 0.02), r * 0.08)} Q${off(fn, cl(c - sl * 0.17 - g * 0.1), -r * 0.32)} ${off(fn, cl(c - sl * 0.36), -r * 0.7)}Z `; } } const blank = () => ({ base: '', strands: '', light: '' }); /* ------------------------------------------------------------------ render */ function render() { if (!G || !S) return; const { W, hw, Rs, rHub } = G; /* how much rope is still on the spool */ const rTopFull = rHub + RINGS * W - hw; const left = clamp((G.Lrope - S.paid) / G.Lrope, 0, 1); const q = left * RINGS; const full = Math.floor(q); const frac = q - full; const rTop = frac > 0.002 ? rHub + full * W + hw : full > 0 ? rHub + (full - 1) * W + hw : rHub + hw * 0.2; assemble(Math.min(rTop, rTopFull)); /* the tip is as far from the spool as the rope paid out; the other end follows once the spool is empty */ const b = P.s0 + S.paid; const a = Math.max(P.s0, b - G.Lrope); const sx = G.cx + S.spoolX; const sy = G.cy + S.spoolY; const dxS = W * 0.28, dyS = W * 0.6; /* the spool */ const turn = (S.paid / (rHub + RINGS * W * 0.5)) * (180 / Math.PI) + S.roll; el.spool.setAttribute('transform', `translate(${f1(sx)} ${f1(sy)})`); el.spoolBody.setAttribute('transform', `scale(${(1 + S.squash).toFixed(3)} ${(1 - S.squash).toFixed(3)})`); el.spoolTurn.setAttribute('transform', `rotate(${f1(turn)})`); el.hubTurn.setAttribute('transform', `rotate(${f1(turn)})`); el.spoolShadow.setAttribute('cx', f1(sx + dxS)); el.spoolShadow.setAttribute('cy', f1(sy + dyS)); const coils = blank(); const spin = (turn * Math.PI) / 180; for (let i = 0; i < full; i++) { const r = rHub + i * W + hw; rope(circleAt(0, 0, r), -TAU * r, 0, spin * r + i * 3.1, hw, coils); } if (frac > 0.002) { const r = rHub + full * W + hw; /* the outer turn, partly unwound: it ends at the top, where the rope leaves the spool */ rope(circleAt(0, 0, r), -TAU * r * frac, 0, b - P.s0, hw, coils); } el.coilBase.setAttribute('d', coils.base); el.coilStrands.setAttribute('d', coils.strands); el.coilLight.setAttribute('d', coils.light); /* the rope, anchored to its tip */ const R = blank(); rope(at, a, b, b, hw, R); el.ropeBase.setAttribute('d', R.base); el.ropeStrands.setAttribute('d', R.strands); el.ropeLight.setAttribute('d', R.light); el.ropeShadow.setAttribute('d', R.base); el.ropeShadow.setAttribute('transform', `translate(${f1(dxS)} ${f1(dyS)})`); /* the frayed tip: loose fibres fanning out, swaying with the swing and the run of the rope */ let fr = ''; if (b - a > W) { const t = at(b); const x0 = t.x, y0 = t.y, tx = t.tx, ty = t.ty; const wob = S.theta * 0.9 + S.sway * 2.2 + Math.sin(b * 0.045) * 0.18; for (let i = 0; i < 9; i++) { const u = i / 8 - 0.5; const len = W * (0.7 + hash(i) * 0.8) * S.fray; const ang = Math.atan2(ty, tx) + u * 1.1 + wob * (0.4 + hash(i + 9)); const bx = x0 - ty * u * hw * 1.6, by = y0 + tx * u * hw * 1.6; const mx = bx + Math.cos(ang - wob * 0.3) * len * 0.5, my = by + Math.sin(ang - wob * 0.3) * len * 0.5; fr += `M${f1(bx)} ${f1(by)} Q${f1(mx)} ${f1(my)} ${f1(bx + Math.cos(ang) * len)} ${f1(by + Math.sin(ang) * len)} `; } } el.fray.setAttribute('d', fr); /* the other end, once it has left the spool: whipped with three turns of twine */ let wh = ''; if (a > P.s0 + 1 && b - a > W * 2) { for (const u of [0.15, 0.42, 0.69]) wh += `M${off(at, a + W * u, -hw * 1.08)} L${off(at, a + W * u, hw * 1.08)} `; } el.whip.setAttribute('d', wh); /* the knots */ for (const n of G.knots.concat(G.dots)) { const st = n.st; if (!st || st.on <= 0.001) { n.g.setAttribute('opacity', '0'); n.shadow.setAttribute('r', '0'); continue; } const y = n.y + st.drop; const K = blank(); const kh = hw * 0.72; rope(circleAt(n.x, y, st.r), -TAU * st.r, 0, st.spin * st.r, kh, K); n.base.setAttribute('d', K.base + 'Z'); n.strands.setAttribute('d', K.strands); n.light.setAttribute('d', K.light); n.g.setAttribute('opacity', st.on.toFixed(3)); let pf = ''; if (st.burst > 0.001 && st.burst < 0.999) { for (let i = 0; i < 7; i++) { const ang = (i / 7) * TAU + hash(i + n.x) * 0.8; const r0 = st.r + kh + W * 0.2 + st.burst * W * 1.3; const r1 = r0 + W * 0.45 * (1 - st.burst); pf += `M${f1(n.x + Math.cos(ang) * r0)} ${f1(y + Math.sin(ang) * r0)} L${f1(n.x + Math.cos(ang) * r1)} ${f1(y + Math.sin(ang) * r1)} `; } } n.puff.setAttribute('d', pf); n.puff.setAttribute('opacity', (1 - st.burst).toFixed(3)); n.shadow.setAttribute('cx', f1(n.x + dxS)); n.shadow.setAttribute('cy', f1(y + dyS)); n.shadow.setAttribute('r', f1((st.r + kh) * Math.min(1, st.on * 1.4))); } } /* ------------------------------------------------------------------ the story */ /* the time at which an eased tween reaches a given progress */ function timeAt(ease, p) { const e = gsap.parseEase(ease); let lo = 0, hi = 1; for (let i = 0; i < 30; i++) { const m = (lo + hi) / 2; if (e(m) < p) lo = m; else hi = m; } return (lo + hi) / 2; } function fresh() { S = { paid: 0, freeze: 0, theta: 0, sway: 0, straight: 0, fray: 1, spoolX: 0, spoolY: -(G.cy + G.Rs * 1.4 + 40), squash: 0, roll: 0 }; for (const n of G.knots.concat(G.dots)) n.st = { on: 0, r: G.hw * 4, spin: 0, burst: 0, drop: 0 }; gsap.set(letters, { y: 0, opacity: 0, fontStretch: '100%' }); gsap.set(hint, { opacity: 0 }); } function round() { if (tl) tl.kill(); hurry = false; fresh(); if (REDUCED) return roundReduced(); const { hw, W } = G; tl = gsap.timeline({ onComplete: round }); const sp = 1 / SPEED; /* the spool drops in, squashes and settles */ tl.to(S, { spoolY: 0, duration: 0.9, ease: 'bounce.out' }, 0); tl.to(S, { squash: 0.1, duration: 0.07, ease: 'power1.out', yoyo: true, repeat: 1 }, 0.33); tl.fromTo(S, { roll: -40 }, { roll: 0, duration: 1.1, ease: 'elastic.out(1, 0.45)' }, 0.3); /* the rope runs off it and writes */ const t0 = 0.85; const from = G.sStart0; const to = G.tailEnd; const D = clamp((to - from) / (G.xh * 7.5), 2.6, 10) * sp; const ease = 'power1.inOut'; const when = (s) => t0 + D * timeAt(ease, clamp((s - from) / (to - from), 0, 1)); tl.to(S, { paid: to - from, duration: D, ease }, t0); /* the tail is flung out as it is written, then drops and swings */ tl.fromTo(S, { theta: 0 }, { theta: -0.85, duration: D * 0.12, ease: 'power1.out' }, when(G.Lw) - D * 0.06); tl.to(S, { theta: 0, duration: 1.8, ease: 'elastic.out(1, 0.28)' }, t0 + D); /* every knot: it forms loose where the rope crosses itself, turns, and snaps tight with a puff of fibres */ G.knots.forEach((n) => { const t = when(n.s + W * 1.5); tl.to(n.st, { on: 1, duration: 0.14, ease: 'power1.out' }, t); tl.fromTo(n.st, { r: hw * 4.2, spin: 0 }, { r: hw * 3, spin: 2.4, duration: 0.32, ease: 'power2.out' }, t); tl.to(n.st, { r: hw * 1.1, spin: 5.4, duration: 0.34, ease: 'back.out(3.2)' }, t + 0.36); tl.fromTo(n.st, { burst: 0 }, { burst: 1, duration: 0.5, ease: 'power2.out' }, t + 0.42); }); /* the dot of the i: a small knot that drops onto its place */ G.dots.forEach((n) => { const t = when(n.s + G.xh * 0.6); tl.set(n.st, { r: hw * 1.1, spin: 0 }, t); tl.to(n.st, { on: 1, duration: 0.12 }, t); tl.fromTo(n.st, { drop: -G.xh * 1.3 }, { drop: 0, duration: 0.7, ease: 'bounce.out' }, t); tl.to(n.st, { spin: 4, duration: 0.7, ease: 'power2.out' }, t); tl.fromTo(n.st, { burst: 0 }, { burst: 1, duration: 0.45, ease: 'power2.out' }, t + 0.28); }); /* the line under the title */ if (letters.length) { tl.fromTo(letters, { y: G.xh * 0.22, opacity: 0, fontStretch: '62%' }, { y: 0, opacity: 1, fontStretch: '100%', duration: 0.7, ease: 'back.out(2.4)', stagger: 0.018 }, t0 + D - 0.4); } tl.addLabel('rest', t0 + D + 0.5); tl.call(() => { if (hurry) { hurry = false; tl.timeScale(1); tl.seek('pull'); } }, null, 'rest'); tl.to(hint, { opacity: 1, duration: 0.5 }, 'rest'); /* at rest the end keeps swinging a little */ const swings = Math.max(1, Math.round(REST / 1.4)); const sw = { t: 0 }; tl.to(sw, { t: 1, duration: REST, ease: 'none', onUpdate: () => { S.sway = Math.sin(sw.t * TAU * swings) * 0.1 * Math.sin(Math.PI * sw.t); }, }, 'rest'); tl.addLabel('pull', `rest+=${REST}`); /* someone pulls the end */ tl.to(hint, { opacity: 0, duration: 0.25 }, 'pull'); tl.to(S, { sway: 0, duration: 0.2 }, 'pull'); tl.to(S, { straight: 1, duration: 0.5, ease: 'back.out(1.7)' }, 'pull'); tl.to(S, { fray: 1.5, duration: 0.2, ease: 'power2.out', yoyo: true, repeat: 1 }, 'pull'); G.knots.forEach((n, i) => { tl.to(n.st, { r: hw * 4.4, spin: '-=3', on: 0, duration: 0.45, ease: 'power2.in' }, `pull+=${0.12 + i * 0.05}`); }); G.dots.forEach((n) => { tl.to(n.st, { drop: G.xh * 0.9, on: 0, spin: '+=3', duration: 0.55, ease: 'power2.in' }, 'pull+=0.1'); }); if (letters.length) { tl.to(letters, { y: G.xh * 0.3, opacity: 0, fontStretch: '62%', duration: 0.4, ease: 'power2.in', stagger: { each: 0.012, from: 'end' } }, 'pull'); } /* the rope runs out through its own letters and off the screen */ const outFar = G.Lrope + Math.hypot(G.vw, G.vh) + G.W * 4; const bEnd = G.tailEnd + outFar; const Dp = clamp(outFar / (G.xh * 16), 1.8, 4) * sp; const pe = 'power2.in'; tl.to(S, { paid: bEnd - G.sStart0, duration: Dp, ease: pe }, 'pull+=0.32'); /* the spool runs empty and rolls away */ const empty = (G.Lrope + G.sStart0 - G.tailEnd) / outFar; const tEmpty = tl.labels.pull + 0.32 + Dp * timeAt(pe, clamp(empty, 0, 1)); tl.set(S, { freeze: 1 }, tEmpty); tl.to(S, { spoolX: -(G.cx + G.Rs * 1.3), roll: '-=320', duration: 0.9, ease: 'power2.in' }, tEmpty + 0.1); tl.to(S, { spoolY: -G.Rs * 0.25, duration: 0.22, ease: 'power1.out', yoyo: true, repeat: 1 }, tEmpty + 0.1); tl.to({}, { duration: 0.3 }); } /* reduced motion: the finished title fades in, rests and fades out; nothing moves */ function roundReduced() { S.paid = G.tailEnd - G.sStart0; S.spoolY = 0; for (const n of G.knots.concat(G.dots)) Object.assign(n.st, { on: 1, r: G.hw * 1.1, burst: 1 }); gsap.set([svg, sub], { opacity: 0 }); gsap.set(letters, { opacity: 1 }); tl = gsap.timeline({ onComplete: round }); tl.to([svg, sub], { opacity: 1, duration: 0.8, ease: 'power1.inOut' }); tl.to(hint, { opacity: 1, duration: 0.5 }, '<'); tl.addLabel('pull', `+=${REST + 2}`); tl.to([svg, sub, hint], { opacity: 0, duration: 0.8, ease: 'power1.inOut' }, 'pull'); tl.to({}, { duration: 0.4 }); } /* a click pulls the end: at once if the title is finished, or as soon as the rope has written it */ scene.addEventListener('pointerdown', () => { if (!tl) return; const t = tl.time(); const lp = tl.labels.pull; if (t >= lp) return; if (REDUCED || t >= tl.labels.rest) { tl.seek(lp); return; } hurry = true; tl.timeScale(3.5); }); gsap.ticker.add(render); build(); round(); let resizeCall = null; let lastW = scene.clientWidth; let lastH = scene.clientHeight; addEventListener('resize', () => { if (scene.clientWidth === lastW && Math.abs(scene.clientHeight - lastH) < 80) return; lastW = scene.clientWidth; lastH = scene.clientHeight; if (resizeCall) resizeCall.kill(); resizeCall = gsap.delayedCall(0.2, () => { build(); round(); }); });