/* The sync braid The sync panel of a photo app with three devices (Laptop, Tablet, Phone). Every device is a coloured cord: the cords come out of a steel cap on the left and run loose to an open clamp on the right. Syncing, they are pulled taut with a twang and plaited into one braid from the left as the bytes arrive: the braid is the progress bar, and what still runs loose is what is left. If a device goes offline its cord comes out of the clamp, springs back and lies slack and grey until Retry plugs it in again; paused, all three go slack. When everything has arrived the clamp shuts on the end of the braid with a crimp, a tightening runs back along the braid and a glint runs forward. The cords are painted by a fragment shader on a WebGL canvas, like tubes in a ray tracer. The script lays every cord out as one point per column of pixels (its height on the page and its depth in the braid), in a small data texture; for every pixel the shader finds the nearest point of each cord, gives each tube its height there (its depth plus the round of the tube), keeps the highest and lights it, so the crossings of the braid are exact to the pixel. The shadows fall on the panel and on the cord underneath, and a fine twist of plies runs round every cord. The braid is the classic three strand plait: strand k follows y = A sin(θ + 2πk/3) and z = sin 2(θ + 2πk/3), a figure of eight seen end on. The loose cords are strings: their sideways sway follows the wave equation, with the tension setting how fast the waves run and how hard the cord is pulled straight, so a cord pulled taut rings and a slack one lazes back to the curve it remembers. */ /* ---- values to change ---- */ const SECONDS = 5.5; /* how long a sync takes in the demo, in seconds (a real one follows its bytes) */ const SIZE = 2.4; /* the gigabytes to sync */ const DEVICES = ['Laptop', 'Tablet', 'Phone']; /* the three devices, one per cord, from the top */ const FAIL_EVERY = 2; /* in the demo, one sync in how many goes wrong (0 never) */ const FAIL_AT = 0.58; /* how far the sync that goes wrong gets, from 0 to 1 */ const OFFLINE = 2; /* which device goes offline then (0 the top one, 2 the bottom one) */ const CORD = 9; /* how thick a cord is, in pixels */ const PITCH = 4.2; /* how long one turn of the braid is, in cord thicknesses */ const SPREAD = 1.65; /* how far apart the loose cords run, in cord thicknesses */ const TWANG = 1; /* how long a cord rings when it is pulled taut: 0 not at all, 1 a lot */ const FOLLOW = 0.35; /* how long the braid takes to catch up with the bytes, in seconds */ const SHEEN = 0.8; /* the glint that runs along the finished braid: 0 none, 1 bright */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const card = document.querySelector('[data-sync]'); const bar = card.querySelector('[data-bar]'); const canvas = card.querySelector('[data-paint]'); const startCap = card.querySelector('.sync__cap--start'); const clampEl = card.querySelector('[data-clamp]'); const titleEl = card.querySelector('[data-title]'); const metaEl = card.querySelector('[data-meta]'); const pctEl = card.querySelector('[data-pct]'); const tickEl = card.querySelector('[data-tick]'); const tickPath = tickEl.querySelector('path'); const devicesEl = card.querySelector('[data-devices]'); const btn = card.querySelector('[data-action]'); const labelEl = card.querySelector('[data-label]'); const live = card.querySelector('[data-live]'); const TAU = Math.PI * 2; const clamp = (v, a, z) => Math.min(z, Math.max(a, v)); const smooth = (t) => { const s = clamp(t, 0, 1); return s * s * s * (s * (6 * s - 15) + 10); }; /* ---------------------------------------------------------------- the shape of the cords */ const R = clamp(CORD, 4, 16) / 2; /* a cord's radius */ const D = 2 * R; const A = 0.6 * D; /* how far a strand swings across the braid */ const ZA = 1.2 * R; /* and in depth: the strands just touch where they cross */ const P = clamp(PITCH, 2.6, 8) * D; /* one turn of the braid, in pixels */ const LANE = clamp(SPREAD, 1.12, 3) * D; /* between two loose cords */ const FAN = 1.15 * P; /* how long the strands take to fan out of the braid */ const PHASE = 0.35; const OFF = clamp(Math.round(OFFLINE), 0, 2); const NAMES = [0, 1, 2].map((k) => String(DEVICES[k] || ['Laptop', 'Tablet', 'Phone'][k])); const NW = 48; /* points along each loose cord */ const RW = Math.ceil(R) + 3; /* how many columns either side the shader looks for a cord */ /* the strings: how fast their waves run (pixels a second) and how hard they are pulled straight, slack and taut */ const C_SLACK = 240; const C_TAUT = 760; const K_SLACK = 40; const K_TAUT = 900; const G_SLACK = 4.5; const G_TAUT = 5 + (2 * Math.sqrt(K_TAUT) - 5) * (1 - clamp(TWANG, 0, 1)); let W = 340; /* the braid's place, as the CSS lays it out */ let HS = 48; let MX = 6; /* the room the canvas leaves round it */ let MY = 16; let CW = 0; let CH = 0; let NC = 0; /* columns of the data texture: one per pixel of the canvas */ let DPR = 1; let cy = 0; /* the braid's middle line, in the canvas */ let xS = 0; /* where the braid starts, under the cap on the left */ let xEnd = 0; /* where it ends when everything has arrived, under the clamp */ let xAnchor = 0; /* where the loose cords are held by the clamp */ let capH = 26; let openH = 46; let data = new Uint8Array(4); const strands = [0, 1, 2].map((k) => ({ k, T: 0, /* its tension: 0 slack, 1 taut */ grey: 0, /* 0 its colour, 1 the grey of a device that went offline */ plug: 1, /* 1 held by the clamp, 0 sprung back out of it */ side: k === 0 ? -1 : k === 2 ? 1 : 0, /* which way it bows when slack: the outer ones outwards */ w: new Float32Array(NW), /* its sideways sway along its loose length */ v: new Float32Array(NW), goal: new Float32Array(NW), })); const prog = { loaded: 0, shown: 0, vel: 0, follow: true }; const cinch = { x: -999, v: 0 }; const grip = { open: 1 }; /* the clamp: 1 open on the three loose cords, 0 shut on the braid */ const sheen = { x: -999, s: 0 }; let state = 'rest'; let run = 0; let plan = null; /* the timeline of arriving bytes (the demo's network) */ let pings = null; /* the pulses that run along the cords while the devices are compared */ let busyTl = null; /* the sequence of a change of state */ let lastTip = 0; let lastPct = -1; let startAt = 0; /* when the bytes started (or restarted), and how many there were */ let lastLoaded = 0; let rateAt = 0; let awake = true; let keyed = false; /* ---------------------------------------------------------------- the painter */ const VERT = 'attribute vec2 a; void main() { gl_Position = vec4(a, 0.0, 1.0); }'; const FRAG = ` #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif #define RW ${RW} uniform sampler2D uData; uniform vec2 uSize; uniform float uDpr; uniform float uCols; uniform float uR; uniform float uPly; uniform vec3 uC0; uniform vec3 uC1; uniform vec3 uC2; uniform vec3 uGrey; uniform vec3 uOff; uniform vec3 uShade; uniform vec3 uSheen; uniform float uTip; /* one column of a cord: its height on the page, its depth, whether it is there */ vec4 col(float c, float k) { if (c < 0.0 || c > uCols - 1.0) return vec4(0.0); vec4 t = texture2D(uData, vec2((c + 0.5) / uCols, (k + 0.5) / 3.0)); return vec4((t.r * 65280.0 + t.g * 255.0) / 256.0 - 32.0, (t.b * 4.0 - 2.0) * uR, step(0.5, t.a), 0.0); } /* the nearest point of cord k to p, over the columns round it: distance, depth there, and the way from it to p */ vec4 nearest(float k, vec2 p) { float c0 = floor(p.x - 0.5); vec4 m = col(c0, k); if (m.z > 0.5 && abs(p.y - m.x) > uR + float(RW) * 1.8 + 1.0) return vec4(1e4, 0.0, 0.0, 1.0); vec4 best = vec4(1e4, 0.0, 0.0, 1.0); vec4 a = col(c0 - float(RW), k); for (int j = 1 - RW; j <= RW; j++) { float c = c0 + float(j); vec4 b = col(c, k); if (a.z > 0.5 && b.z > 0.5) { vec2 pa = vec2(c - 0.5, a.x); vec2 ab = vec2(1.0, b.x - a.x); float t = clamp(dot(p - pa, ab) / dot(ab, ab), 0.0, 1.0); vec2 dq = p - (pa + ab * t); float d = length(dq); if (d < best.x) best = vec4(d, mix(a.y, b.y, t), dq); } a = b; } return best; } /* how much of p lies in the soft shadow of cord k, for a surface at height lift: the light is up and to the left, so the shadow falls down and to the right, further the higher the cord is above the surface */ float shadowOf(float k, vec2 p, float lift) { /* past the free end of a cord its shadow still rounds off: look a little further back for the cord */ vec4 m = col(floor(p.x - 0.5), k); if (m.z < 0.5) m = col(floor(p.x - 0.5) - 4.0, k); if (m.z < 0.5) m = col(floor(p.x - 0.5) - 9.0, k); if (m.z < 0.5) return 0.0; float rise = m.y + uR - lift; if (rise < 0.2) return 0.0; vec2 ps = p - vec2(0.42, 0.78) * (rise * 0.42 + 0.6); /* the distance to the cord's two nearest segments (a steep one is long: a straight line would reach too far) */ float c = floor(ps.x - 0.5); float d = 1e4; vec4 a = col(c - 6.0, k); for (int j = -5; j < 3; j++) { vec4 b = col(c + float(j), k); if (a.z > 0.5 && b.z > 0.5) { vec2 pa = vec2(c + float(j) - 0.5, a.x); vec2 ab = vec2(1.0, b.x - a.x); float t = clamp(dot(ps - pa, ab) / dot(ab, ab), 0.0, 1.0); d = min(d, length(ps - pa - ab * t)); } a = b; } return (1.0 - smoothstep(uR * 0.25, uR + 2.6, d)) * clamp(rise / uR, 0.0, 1.0); } /* the tube of cord k at p, lit; its height comes back in h */ vec4 tube(vec2 p, vec4 n, vec3 tint, float grey, out float h) { float aa = 0.75 / uDpr; h = -1e4; if (n.x > uR + aa) return vec4(0.0); float e = clamp(n.x / uR, 0.0, 1.0); float nz = sqrt(max(1.0 - e * e, 0.0)); vec2 dir = n.x > 1e-4 ? n.zw / n.x : vec2(0.0, 1.0); vec3 N = vec3(dir * e, nz); vec3 L = normalize(vec3(-0.45, -0.72, 1.0)); float dif = max(dot(N, L), 0.0); float sp = pow(max(dot(N, normalize(L + vec3(0.0, 0.0, 1.0))), 0.0), 34.0); /* the plies twist round the cord: grooves that lean across it */ float across = (dir.y >= 0.0 ? 1.0 : -1.0) * e; float xq = p.x - n.z; float ply = sin(6.2831853 * (xq / uPly + across * 0.62)); float groove = smoothstep(0.35, 1.0, ply); /* a device that went offline greys its loose cord, not what it has already plaited */ grey *= smoothstep(uTip - 4.0, uTip + 14.0, xq); vec3 base = mix(tint, uOff, grey); vec3 c = base * (0.46 + 0.66 * dif) * mix(0.58, 1.0, nz) * (1.0 - 0.17 * groove * nz); c += sp * (0.3 - 0.12 * grey) * (1.0 - 0.5 * groove); float g = exp(-pow((xq - uSheen.x) / uSheen.y, 2.0)) * uSheen.z; c += g * (0.2 + 0.9 * sp) * nz; float cover = clamp((uR - n.x) / (2.0 * aa) + 0.5, 0.0, 1.0); h = n.y + nz * uR; return vec4(c * cover, cover); } void main() { vec2 p = vec2(gl_FragCoord.x, uSize.y * uDpr - gl_FragCoord.y) / uDpr; vec4 n0 = nearest(0.0, p); vec4 n1 = nearest(1.0, p); vec4 n2 = nearest(2.0, p); float h0; float h1; float h2; vec4 t0 = tube(p, n0, uC0, uGrey.x, h0); vec4 t1 = tube(p, n1, uC1, uGrey.y, h1); vec4 t2 = tube(p, n2, uC2, uGrey.z, h2); /* the cords' shadows on each other */ if (t0.a > 0.0) t0.rgb *= 1.0 - 0.42 * max(shadowOf(1.0, p, h0), shadowOf(2.0, p, h0)); if (t1.a > 0.0) t1.rgb *= 1.0 - 0.42 * max(shadowOf(0.0, p, h1), shadowOf(2.0, p, h1)); if (t2.a > 0.0) t2.rgb *= 1.0 - 0.42 * max(shadowOf(0.0, p, h2), shadowOf(1.0, p, h2)); /* and on the panel, which lies just under the lowest strand */ float lift = -1.25 * uR - uR; float s = max(max(shadowOf(0.0, p, lift), shadowOf(1.0, p, lift)), shadowOf(2.0, p, lift)) * 0.3; vec4 acc = vec4(uShade * s, s); /* lowest first */ vec4 ta = t0; float ha = h0; vec4 tb = t1; float hb = h1; vec4 tc = t2; float hc = h2; vec4 tt; float hh; if (ha > hb) { tt = ta; ta = tb; tb = tt; hh = ha; ha = hb; hb = hh; } if (hb > hc) { tt = tb; tb = tc; tc = tt; hh = hb; hb = hc; hc = hh; } if (ha > hb) { tt = ta; ta = tb; tb = tt; hh = ha; ha = hb; hb = hh; } acc = ta + acc * (1.0 - ta.a); acc = tb + acc * (1.0 - tb.a); acc = tc + acc * (1.0 - tc.a); gl_FragColor = acc; }`; let gl = null; let tex = null; const U = {}; try { gl = canvas.getContext('webgl', { alpha: true, premultipliedAlpha: true, antialias: false }); } catch (e) { gl = null; } /* the colours come from the CSS, with the rest of the palette */ function rgb(name, fallback) { let h = getComputedStyle(document.documentElement).getPropertyValue(name).trim().replace('#', '') || fallback; if (h.length === 3) h = [...h].map((c) => c + c).join(''); const n = parseInt(h.slice(0, 6), 16) || 0; return [(n >> 16) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; } function compile(type, src) { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s)); return s; } function build() { const program = gl.createProgram(); gl.attachShader(program, compile(gl.VERTEX_SHADER, VERT)); gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAG)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program)); gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW); const at = gl.getAttribLocation(program, 'a'); gl.enableVertexAttribArray(at); gl.vertexAttribPointer(at, 2, gl.FLOAT, false, 0, 0); ['uData', 'uSize', 'uDpr', 'uCols', 'uR', 'uPly', 'uC0', 'uC1', 'uC2', 'uGrey', 'uOff', 'uShade', 'uSheen', 'uTip'] .forEach((n) => { U[n] = gl.getUniformLocation(program, n); }); tex = gl.createTexture(); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); gl.uniform1i(U.uData, 0); gl.uniform3fv(U.uC0, rgb('--cord-1', '3a4bd6')); gl.uniform3fv(U.uC1, rgb('--cord-2', '0e8c79')); gl.uniform3fv(U.uC2, rgb('--cord-3', 'ee5536')); gl.uniform3fv(U.uOff, rgb('--offline', 'b4b7be')); gl.uniform3fv(U.uShade, rgb('--shadow', '23262f')); gl.clearColor(0, 0, 0, 0); NC = 0; } if (gl) { try { build(); } catch (e) { console.warn(e); gl = null; } } /* without WebGL the cords are three plain stripes drawn by the CSS, and everything else still works */ if (!gl) card.classList.add('is-flat'); /* ---------------------------------------------------------------- the cords, column by column */ const tipX = () => xS + clamp(prog.shown, 0, 1) * (xEnd - xS); /* where a cord's loose length ends: in the clamp, or sprung back out of it */ function endOf(st, x0) { const back = clamp(0.4 * (xAnchor - x0), 0, 130); const end = xAnchor - (1 - st.plug) * back; return xEnd + 1 + (end - xEnd - 1) * grip.open; } /* the curve a slack cord lies in (u from 0 at the braid to 1 at its end), in pixels: the outer ones bow outwards, the middle one in a soft S; sprung out of the clamp, its free end lifts away */ function curl(st, u, len) { const amp = Math.min(1, len / 220); let held; let free; if (st.side) { held = st.side * 8.5 * amp * (0.8 * Math.sin(Math.PI * u) + 0.2 * Math.sin(3 * Math.PI * u)); free = st.side * amp * (9 * Math.pow(u, 1.7) + 3 * Math.sin(Math.PI * u)); } else { held = 2.8 * amp * Math.sin(TAU * u); free = 3.2 * amp * Math.sin(1.4 * Math.PI * u); } return free + (held - free) * st.plug; } function sampleW(w, u) { const f = clamp(u, 0, 1) * (NW - 1); const i = Math.min(NW - 2, Math.floor(f)); return w[i] + (w[i + 1] - w[i]) * (f - i); } /* one step of the strings: the wave equation, a pull towards the curve each one should lie in, and damping; the end at the braid is held, the far end too while it is in the clamp */ function waves(dt) { const tip = tipX(); const x0 = tip + Math.max(1, Math.min(FAN, xAnchor - tip)); for (const st of strands) { const len = Math.max(8, endOf(st, x0) - x0); for (let i = 0; i < NW; i++) st.goal[i] = (1 - st.T) * curl(st, i / (NW - 1), len); if (REDUCED) { st.w.set(st.goal); st.v.fill(0); continue; } const du = Math.max(5, len / (NW - 1)); const c = C_SLACK + (C_TAUT - C_SLACK) * st.T; const c2 = (c * c) / (du * du); const kap = K_SLACK + (K_TAUT - K_SLACK) * st.T; const gam = G_SLACK + (G_TAUT - G_SLACK) * st.T; const free = st.plug < 0.999; const last = free ? NW - 1 : NW - 2; const sub = Math.max(1, Math.ceil(dt * 480)); const h = dt / sub; const { w, v, goal } = st; for (let s = 0; s < sub; s++) { for (let i = 1; i <= last; i++) { const right = i < NW - 1 ? w[i + 1] : w[i - 1]; v[i] += (c2 * (w[i - 1] - 2 * w[i] + right) - kap * (w[i] - goal[i]) - gam * v[i]) * h; } for (let i = 1; i <= last; i++) w[i] += v[i] * h; } w[0] = 0; v[0] = 0; if (!free) { w[NW - 1] = 0; v[NW - 1] = 0; } } } /* lay every cord out, one point per column: the braid up to the tip, then the strands fanning out to their lanes, then the loose cords with their sway */ function lay() { const tip = tipX(); const fan = Math.max(1, Math.min(FAN, xAnchor - tip)); const x0 = tip + fan; for (const st of strands) { const k = st.k; const x1 = endOf(st, x0); const len = Math.max(8, x1 - x0); const lane = cy + (k - 1) * LANE * grip.open; const row = k * NC * 4; for (let c = 0; c < NC; c++) { const o = row + c * 4; const x = c + 0.5; if (x < xS - 4 || x > x1) { data[o + 3] = 0; continue; } const th = TAU * ((x - xS) / P + k / 3) + PHASE; const amp = A * (1 - cinch.v * Math.exp(-(((x - cinch.x) / 34) ** 2))); let y = cy + amp * Math.sin(th); let z = ZA * Math.sin(2 * th); if (x > tip) { const s = smooth((x - tip) / fan); const yl = x > x0 ? lane + sampleW(st.w, (x - x0) / len) : lane; y += (yl - y) * s; z -= z * s; } const Y = Math.round(clamp((y + 32) * 256, 0, 65535)); data[o] = Y >> 8; data[o + 1] = Y & 255; data[o + 2] = Math.round(clamp((z / R + 2) / 4, 0, 1) * 255); data[o + 3] = 255; } } } function draw() { if (!gl) { card.style.setProperty('--done', prog.shown.toFixed(4)); return; } lay(); gl.viewport(0, 0, canvas.width, canvas.height); gl.bindTexture(gl.TEXTURE_2D, tex); if (NC !== data.length / 12) return; gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, NC, 3, gl.RGBA, gl.UNSIGNED_BYTE, data); gl.uniform3f(U.uGrey, strands[0].grey, strands[1].grey, strands[2].grey); gl.uniform3f(U.uSheen, sheen.x, 46, sheen.s * clamp(SHEEN, 0, 1.5)); gl.uniform1f(U.uTip, tipX()); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); } /* ---------------------------------------------------------------- every frame, while something moves */ function wake() { awake = true; } function settled() { if (state === 'preparing' || state === 'syncing' || state === 'finishing' || state === 'resetting' || state === 'resuming') return false; if (gsap.isTweening(prog) || gsap.isTweening(cinch) || gsap.isTweening(sheen) || gsap.isTweening(grip)) return false; /* the strings rest where the pull of their tension and the pull to their curve balance, not on the curve itself: still means no point moves any more */ for (const st of strands) { if (gsap.isTweening(st)) return false; for (let i = 0; i < NW; i++) if (Math.abs(st.v[i]) > 0.03) return false; } return true; } gsap.ticker.add((time, deltaMs) => { if (!awake) return; const dt = Math.min(1 / 30, Math.max(0, deltaMs) / 1000); /* the braid follows the bytes on a critically damped spring, and never goes back */ if (prog.follow) { const om = 4.2 / Math.max(0.05, FOLLOW); if (REDUCED) prog.shown = prog.loaded; else { prog.vel += (om * om * (prog.loaded - prog.shown) - 2 * om * prog.vel) * dt; prog.vel = Math.max(0, prog.vel); prog.shown = Math.min(prog.loaded, prog.shown + prog.vel * dt); } } /* the braiding tugs at the loose cords: a little ripple runs along them at every crossing */ const tip = tipX(); if (!REDUCED && tip > lastTip + 0.01 && state !== 'resetting') { const d = Math.min(6, tip - lastTip); for (const st of strands) { const th = TAU * ((tip - xS) / P + st.k / 3) + PHASE; st.v[1] += 26 * d * Math.cos(th) * st.T; st.v[2] += 14 * d * Math.cos(th) * st.T; } } lastTip = tip; waves(dt); draw(); words(time); /* the last stretch of the braid is already under the clamp: it shuts as soon as the braid gets there */ if (state === 'syncing' && prog.loaded >= 1 && tipX() > xAnchor - 16) shut(); if (settled()) awake = false; }); /* ---------------------------------------------------------------- the words */ const gb = (f) => (clamp(f, 0, 1) * SIZE).toFixed(1); /* a change of words slides the old ones up and out and the new ones up and in; the numbers that tick along while the bytes arrive are written straight in */ function setText(el, html, animate = true) { if (el.dataset.now === html) return; el.dataset.now = html; if (!animate || !el.dataset.shown) { el.dataset.shown = '1'; if (!el.swapping) el.innerHTML = html; return; } if (el.swapTl) el.swapTl.kill(); el.swapping = true; const out = REDUCED ? { opacity: 0 } : { opacity: 0, y: -6, filter: 'blur(2px)' }; const from = REDUCED ? { opacity: 0 } : { opacity: 0, y: 7, filter: 'blur(2px)' }; const to = REDUCED ? { opacity: 1 } : { opacity: 1, y: 0, filter: 'blur(0px)' }; el.swapTl = gsap.timeline() .to(el, { ...out, duration: 0.14, ease: 'power2.in' }) .add(() => { el.innerHTML = el.dataset.now; el.swapping = false; }) .fromTo(el, from, { ...to, duration: 0.34, ease: 'power3.out', clearProps: 'filter' }); } function setFigure(text, quiet) { pctEl.textContent = text; pctEl.classList.toggle('is-quiet', !!quiet); } function showTick(on) { if (on) { gsap.to(pctEl, { opacity: 0, duration: 0.15 }); gsap.set(tickEl, { visibility: 'visible' }); if (REDUCED) { gsap.set(tickPath, { strokeDashoffset: 0 }); gsap.fromTo(tickEl, { opacity: 0 }, { opacity: 1, duration: 0.3 }); } else { gsap.fromTo(tickPath, { strokeDashoffset: 1 }, { strokeDashoffset: 0, duration: 0.42, ease: 'power2.out', delay: 0.05 }); gsap.fromTo(tickEl, { scale: 0.6, transformOrigin: '50% 50%' }, { scale: 1, duration: 0.7, ease: 'elastic.out(1.2, 0.4)' }); } } else { gsap.killTweensOf([tickEl, tickPath]); gsap.set(tickEl, { visibility: 'hidden', opacity: 1, scale: 1 }); gsap.set(tickPath, { strokeDashoffset: 1 }); gsap.to(pctEl, { opacity: 1, duration: 0.2 }); } } /* the button's words change and its pill stretches to the new width with a little give */ function setLabel(text, quiet) { if (labelEl.textContent === text && btn.classList.contains('is-quiet') === quiet) return; const w0 = btn.getBoundingClientRect().width; gsap.killTweensOf(btn, 'width'); btn.style.width = ''; labelEl.textContent = text; btn.classList.toggle('is-quiet', quiet); const w1 = btn.getBoundingClientRect().width; if (REDUCED || !w0) return; gsap.fromTo(btn, { width: w0 }, { width: w1, duration: 0.55, ease: 'elastic.out(1, 0.65)', clearProps: 'width' }); gsap.fromTo(labelEl, { y: 8, opacity: 0 }, { y: 0, opacity: 1, duration: 0.32, ease: 'power3.out', clearProps: 'transform' }); } function say(text) { live.textContent = ''; gsap.delayedCall(0.05, () => { live.textContent = text; }); } /* the figures that follow the bytes */ function words(time) { const pct = Math.floor(prog.shown * 100 + 1e-6); if (state === 'syncing') { /* the time left, from the average speed since the bytes started (or restarted), twice a second */ if (time - rateAt > 0.5) { rateAt = time; const got = prog.loaded - lastLoaded; const r = got / Math.max(0.1, time - startAt); const left = r > 1e-4 ? Math.max(1, Math.round((1 - prog.loaded) / r)) : 0; card.dataset.left = got > 0.08 && left ? `about ${left} s left` : ''; } { const left = card.dataset.left ? ` · ${card.dataset.left}` : ''; setText(metaEl, `${gb(prog.shown)} of ${SIZE.toFixed(1)} GB${left}`, false); setFigure(`${Math.min(99, pct)}%`); } } if (pct !== lastPct) { lastPct = pct; bar.setAttribute('aria-valuenow', String(clamp(pct, 0, 100))); bar.setAttribute('aria-valuetext', `${gb(prog.shown)} of ${SIZE.toFixed(1)} GB`); } } function legend() { devicesEl.innerHTML = NAMES.map((n, k) => `${n}`) .join(' · '); } /* ---------------------------------------------------------------- tension */ function tighten(st, delay = 0) { gsap.killTweensOf(st, 'T'); wake(); if (REDUCED) { gsap.delayedCall(delay, () => { st.T = 1; wake(); }); return; } gsap.to(st, { T: 1, duration: 0.08, delay, ease: 'power2.in', onStart: wake }); } function slacken(st, delay = 0) { gsap.killTweensOf(st, 'T'); wake(); if (REDUCED) st.T = 0; else gsap.to(st, { T: 0, duration: 0.2, delay, ease: 'power1.out', onStart: wake }); } /* while the devices are compared, pulses run along the cords from the clamp towards the braid: a bump with the speed of a wave going left, w = g(x + ct), so it sets off one way only */ function ping(st) { if (REDUCED) return; const tip = tipX(); const x0 = tip + Math.max(1, Math.min(FAN, xAnchor - tip)); const len = Math.max(8, endOf(st, x0) - x0); const c = C_SLACK + (C_TAUT - C_SLACK) * st.T; const at = 0.86 * len; const sig = 13; for (let i = 1; i < NW - 1; i++) { const x = (i / (NW - 1)) * len - at; const g = 2.6 * Math.exp(-((x / sig) ** 2)) * (st.side || 1); st.w[i] += g; st.v[i] += c * (-2 * x / (sig * sig)) * g; } wake(); } /* ---------------------------------------------------------------- the demo's network */ let seed = 1; const rnd = () => { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; }; /* bytes arrive in chunks of every size, now and then after a stall; the whole run lasts about SECONDS */ function schedule(from, failAt) { seed = 1013 + run * 7919 + Math.round(from * 1000); const pts = []; let t = 0; let b = from; while (b < 1) { const gap = 0.06 + rnd() * 0.16; t += gap; if (rnd() < 0.06) t += 0.3 + rnd() * 0.35; b = Math.min(1, b + (gap * (0.35 + rnd() * 1.3)) / Math.max(0.5, SECONDS)); pts.push([t, b]); } const k = (Math.max(0.5, SECONDS) * (1 - from)) / (t || 1); const tl = gsap.timeline(); for (const [tt, bb] of pts) { if (failAt !== null && bb > failAt) { tl.call(fail, null, tt * k); return tl; } tl.call(arrive, [bb], tt * k); } return tl; } function arrive(b) { if (state === 'preparing') begin(); prog.loaded = Math.max(prog.loaded, b); wake(); } /* ---------------------------------------------------------------- the states */ function stopAll() { if (plan) plan.kill(); if (pings) pings.kill(); if (busyTl) busyTl.kill(); plan = null; pings = null; busyTl = null; } /* Sync now: the cords are pulled taut one after another, and the devices are compared while pulses run along them */ function start() { stopAll(); run += 1; const failing = FAIL_EVERY > 0 && run % Math.max(1, Math.round(FAIL_EVERY)) === 0; state = 'preparing'; prog.follow = true; prog.loaded = 0; prog.shown = 0; prog.vel = 0; lastLoaded = 0; card.dataset.left = ''; card.setAttribute('aria-busy', 'true'); strands.forEach((st, i) => tighten(st, i * 0.07)); setText(titleEl, 'Syncing photos'); setText(metaEl, 'Comparing 3 devices…'); showTick(false); setFigure('0%'); setLabel('Pause', true); say('Syncing photos across 3 devices'); if (!REDUCED) { pings = gsap.timeline({ repeat: -1, delay: 0.3 }); strands.forEach((st, i) => pings.call(ping, [st], i * 0.16)); pings.to({}, { duration: 0.2 }); } plan = gsap.timeline({ delay: 0.75 }); plan.add(schedule(0, failing ? clamp(FAIL_AT, 0.05, 0.95) : null)); wake(); } /* the first bytes: the comparing is over */ function begin() { state = 'syncing'; startAt = gsap.ticker.time; lastLoaded = prog.loaded; if (pings) pings.kill(); pings = null; } function pause() { if (plan) plan.pause(); if (pings) pings.pause(); const was = state; state = 'paused'; card.dataset.was = was; card.removeAttribute('aria-busy'); strands.forEach((st, i) => slacken(st, i * 0.05)); setText(titleEl, 'Sync paused'); setText(metaEl, `${gb(prog.shown)} of ${SIZE.toFixed(1)} GB synced`); setFigure(`${Math.floor(prog.shown * 100)}%`, true); setLabel('Resume', false); say(`Sync paused at ${Math.floor(prog.shown * 100)} percent`); } function resume() { state = card.dataset.was === 'preparing' ? 'preparing' : 'syncing'; card.setAttribute('aria-busy', 'true'); strands.forEach((st, i) => tighten(st, i * 0.07)); setText(titleEl, 'Syncing photos'); if (state === 'preparing') setText(metaEl, 'Comparing 3 devices…'); setFigure(`${Math.floor(prog.shown * 100)}%`); setLabel('Pause', true); say('Sync resumed'); startAt = gsap.ticker.time; lastLoaded = prog.loaded; card.dataset.left = ''; if (plan) plan.resume(); if (pings) pings.resume(); wake(); } /* a device goes offline: its cord comes out of the clamp, springs back, goes slack and grey; the others shudder */ function fail() { stopAll(); state = 'failed'; prog.loaded = prog.shown = Math.min(prog.loaded, Math.max(prog.shown, prog.loaded)); prog.vel = 0; card.removeAttribute('aria-busy'); const st = strands[OFF]; gsap.killTweensOf(st); if (REDUCED) { st.T = 0; st.plug = 0; gsap.to(st, { grey: 1, duration: 0.3, onUpdate: wake }); } else { st.T = 0; gsap.to(st, { plug: 0, duration: 0.55, ease: 'back.out(2.4)', onUpdate: wake }); gsap.to(st, { grey: 1, duration: 0.5, delay: 0.08, ease: 'power1.out' }); strands.forEach((o) => { if (o !== st) for (let i = 1; i < 6; i++) o.v[i] += (o.side || 1) * -40 * (6 - i); }); } const pct = Math.floor(prog.shown * 100); const name = NAMES[OFF]; setText(titleEl, `${name} went offline`); setText(metaEl, `Reconnect it to finish · ${gb(prog.shown)} of ${SIZE.toFixed(1)} GB`); setFigure(`${pct}%`, true); setLabel('Retry', false); const off = devicesEl.querySelector(`[data-dev="${OFF}"]`); if (off) off.classList.add('is-off'); say(`${name} went offline. The sync stopped at ${pct} percent. Reconnect it and choose Retry.`); wake(); } /* Retry: the cord reaches back into the clamp, takes its colour back and is pulled taut, and the bytes start again */ function retry() { stopAll(); state = 'resuming'; card.setAttribute('aria-busy', 'true'); const st = strands[OFF]; const off = devicesEl.querySelector(`[data-dev="${OFF}"]`); if (off) off.classList.remove('is-off'); setText(titleEl, 'Syncing photos'); setText(metaEl, `Reconnecting ${NAMES[OFF]}…`); setFigure(`${Math.floor(prog.shown * 100)}%`); setLabel('Pause', true); say(`Reconnecting ${NAMES[OFF]}`); busyTl = gsap.timeline({ onUpdate: wake }); busyTl.to(st, { plug: 1, duration: REDUCED ? 0.01 : 0.5, ease: 'power2.inOut' }) .to(st, { grey: 0, duration: 0.4 }, 0.1) .add(() => tighten(st)) .add(() => { state = 'syncing'; startAt = gsap.ticker.time; lastLoaded = prog.loaded; card.dataset.left = ''; plan = schedule(prog.loaded, null); }, '+=0.25'); wake(); } /* everything has arrived: the clamp shuts on the end of the braid and crimps it, a tightening runs back along the braid, a glint runs forward, and the tick is drawn */ function shut() { stopAll(); state = 'finishing'; prog.loaded = 1; prog.shown = 1; prog.vel = 0; bar.setAttribute('aria-valuenow', '100'); card.removeAttribute('aria-busy'); setText(titleEl, 'Photos up to date'); setText(metaEl, `${SIZE.toFixed(1)} GB · synced just now`); showTick(true); setLabel('Sync again', false); say('Sync complete. Your photos are up to date on all 3 devices.'); busyTl = gsap.timeline({ onUpdate: wake, onComplete: () => { state = 'done'; wake(); } }); if (REDUCED) { busyTl.add(() => { shape(true); grip.open = 0; }).to({}, { duration: 0.3 }); return; } busyTl.to(clampEl, { height: capH, marginTop: -capH / 2, duration: 0.2, ease: 'power3.in' }) .to(grip, { open: 0, duration: 0.2, ease: 'power3.in' }, '<') .add(() => clampEl.classList.add('is-shut')) .fromTo(clampEl, { scaleY: 0.84, scaleX: 1.12 }, { scaleY: 1, scaleX: 1, duration: 0.7, ease: 'elastic.out(1.1, 0.32)' }) .fromTo(cinch, { x: xEnd, v: 0.3 }, { x: xS - 40, duration: 0.62, ease: 'power2.inOut' }, '<') .to(cinch, { v: 0, duration: 0.18 }, '>-0.18') .fromTo(sheen, { x: xS - 60, s: 1 }, { x: xEnd + 60, duration: 1, ease: 'power2.inOut' }, '<-0.2') .to(sheen, { s: 0, duration: 0.25 }, '>-0.25'); } /* the clamp, open for three loose cords or shut on the braid */ function shape(shutNow) { const h = shutNow ? capH : openH; gsap.set(clampEl, { height: h, marginTop: -h / 2, scaleX: 1, scaleY: 1 }); clampEl.classList.toggle('is-shut', shutNow); } /* Sync again: the clamp opens, the braid comes undone back to the left, and a new sync starts */ function again() { stopAll(); state = 'resetting'; showTick(false); setFigure('0%'); setText(titleEl, 'Syncing photos'); setText(metaEl, 'Comparing 3 devices…'); setLabel('Pause', true); prog.follow = false; busyTl = gsap.timeline({ onUpdate: wake, onComplete: () => { prog.follow = true; start(); }, }); if (REDUCED) { busyTl.add(() => { shape(false); grip.open = 1; prog.shown = prog.loaded = 0; }); return; } busyTl.add(() => clampEl.classList.remove('is-shut')) .to(clampEl, { height: openH, marginTop: -openH / 2, duration: 0.45, ease: 'back.out(2)' }) .to(grip, { open: 1, duration: 0.45, ease: 'back.out(2)' }, '<') .to(prog, { shown: 0, duration: 0.85, ease: 'power3.inOut' }, 0.05) .add(() => { prog.loaded = 0; }); } btn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') keyed = true; }); btn.addEventListener('click', (e) => { /* the library's preview clicks by itself and never pauses; the keyboard and the hand can */ const byHand = e.detail > 0 || keyed; keyed = false; if (state === 'rest') start(); else if (state === 'preparing' || state === 'syncing') { if (byHand) pause(); } else if (state === 'paused') resume(); else if (state === 'failed') retry(); else if (state === 'done') again(); }); /* pressed, the pill squashes a little and springs back */ btn.addEventListener('pointerdown', () => { if (!REDUCED) gsap.to(btn, { scale: 0.95, duration: 0.1, ease: 'power2.out' }); }); const release = () => { if (!REDUCED) gsap.to(btn, { scale: 1, duration: 0.5, ease: 'elastic.out(1.2, 0.4)' }); }; btn.addEventListener('pointerup', release); btn.addEventListener('pointerleave', release); btn.addEventListener('pointercancel', release); /* ---------------------------------------------------------------- size */ function measure() { W = bar.clientWidth || 340; capH = Math.round(2 * A + D + 6); openH = Math.round(2 * LANE + D + 7); HS = Math.max(40, openH + 2); bar.style.height = `${HS}px`; gsap.set(startCap, { height: capH, marginTop: -capH / 2 }); shape(state === 'done' || state === 'finishing'); MX = 6; MY = 16; CW = W + 2 * MX; CH = HS + 2 * MY; DPR = Math.min(2, Math.max(1, devicePixelRatio || 1)); canvas.style.left = `${-MX}px`; canvas.style.top = `${-MY}px`; canvas.style.width = `${CW}px`; canvas.style.height = `${CH}px`; canvas.width = Math.round(CW * DPR); canvas.height = Math.round(CH * DPR); cy = MY + HS / 2; xS = MX + 10; xEnd = MX + W - 11; xAnchor = MX + W - 12; lastTip = tipX(); const nc = Math.round(CW); if (gl) { if (nc !== NC) { NC = nc; data = new Uint8Array(NC * 3 * 4); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, NC, 3, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); } gl.uniform2f(U.uSize, CW, CH); gl.uniform1f(U.uDpr, canvas.width / CW); gl.uniform1f(U.uCols, NC); gl.uniform1f(U.uR, R); gl.uniform1f(U.uPly, Math.max(3, D * 0.62)); } wake(); } let resizing = null; addEventListener('resize', () => { if (resizing) resizing.kill(); resizing = gsap.delayedCall(0.1, measure); }); if (gl) { canvas.addEventListener('webglcontextlost', (e) => e.preventDefault()); canvas.addEventListener('webglcontextrestored', () => { build(); measure(); }); } /* ---------------------------------------------------------------- it starts */ legend(); /* the words at rest are the page's own */ [titleEl, metaEl].forEach((el) => { el.dataset.now = el.innerHTML; el.dataset.shown = '1'; }); setFigure(`${SIZE.toFixed(1)} GB`, true); bar.setAttribute('aria-valuetext', 'Not syncing'); measure(); /* the slack cords already lie in their curves */ { const x0 = tipX() + Math.min(FAN, xAnchor - tipX()); for (const st of strands) { const len = Math.max(8, endOf(st, x0) - x0); for (let i = 0; i < NW; i++) st.w[i] = st.goal[i] = curl(st, i / (NW - 1), len); } } draw(); document.fonts.ready.then(() => { measure(); if (REDUCED) gsap.from(card, { opacity: 0, duration: 0.5 }); else gsap.from(card, { y: 14, opacity: 0, duration: 0.8, ease: 'power3.out', clearProps: 'transform,opacity' }); }); })();