/* Seen from here An anamorphosis. Every word is cut into thin horizontal hatch lines, the hatch lines into short threads, and each thread is pushed nearer or further along its own line of sight from one point in space: from that point nothing has changed, from anywhere else the threads are a cloud of rain. Three words, three points of view round the cloud. The camera travels round it, climbs a little between two points, goes a hair past the next one and settles: the rain clicks into a word, the word fills with ink from left to right, holds, lets go, and the camera moves on. The threads breathe along their lines of sight, so the cloud is alive while the word, seen from its point, stays perfectly still. Drag to look round it yourself: let go and the camera settles on the nearest word. The threads are one Three.js instanced mesh with a shader that places them and draws them a pixel and a half thick. */ import * as THREE from 'three'; /* ---- values to change ---- */ const WORDS = ['Seen', 'from', 'here']; /* one word for each point of view, from 1 to 4 */ const SPREAD = 0.45; /* how deep the cloud is: 0 is a flat page, 0.7 a deep cloud */ const ROWS = 44; /* hatch lines across the height of a capital */ const TRAVEL = 3.0; /* seconds from one point of view to the next */ const HOLD = 1.6; /* seconds the camera stays on a word */ const RISE = 16; /* degrees the camera climbs halfway between two points */ const OVERSHOOT = 1.4; /* degrees the camera goes past a point before it settles on it */ const BREATH = 0.05; /* how far the threads drift along their line of sight (invisible from the point) */ const WIDTH = 1.4; /* how thick a thread is, in pixels */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const HOVER = matchMedia('(hover: hover)').matches; const FONT = '"Archivo Variable", "Archivo", system-ui, sans-serif'; const D = 4; /* how far each point of view is from the middle of the cloud */ const PLANE = 2.2; /* the width of the widest word, in scene units, on the plane through the middle */ const MAX = 4; /* words the shader can hold */ const FONT_PX = 300; /* the size the words are drawn at to be cut into threads */ const CHUNK = 0.2; /* the average length of a thread, as a share of the height of a capital */ const TAU = Math.PI * 2; const RAD = Math.PI / 180; const clamp = (v, a, b) => Math.min(b, Math.max(a, v)); const $ = (s) => document.querySelector(s); const stage = $('[data-stage]'); const canvas = $('[data-canvas]'); const needle = $('[data-needle]'); const ticksEl = $('[data-ticks]'); const angleEl = $('[data-angle]'); const css = getComputedStyle(document.documentElement); const colour = (name, fallback) => css.getPropertyValue(name).trim() || fallback; const words = (Array.isArray(WORDS) ? WORDS : [WORDS]).map((w) => String(w).trim()).filter(Boolean).slice(0, MAX); if (!words.length) words.push('here'); const n = words.length; const STEP = 360 / n; $('[data-sr]').textContent = words.join(' '); /* a seeded random, so the cloud is the same every time the page opens */ let seed = 7; const rand = () => { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; }; /* ---------------------------------------------------------------- the renderer */ let renderer = null; try { renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); } catch (e) { renderer = null; } if (!renderer) { /* without WebGL the words, flat */ const flat = document.createElement('p'); flat.className = 'fallback'; flat.setAttribute('aria-hidden', 'true'); words.forEach((w) => { const s = document.createElement('span'); s.textContent = w; flat.appendChild(s); }); stage.appendChild(flat); canvas.remove(); } else { start(); } /* ---------------------------------------------------------------- the words, cut into threads */ function cut(word) { const c = document.createElement('canvas'); const g = c.getContext('2d', { willReadFrequently: true }); const font = `800 ${FONT_PX}px ${FONT}`; g.font = font; const m = g.measureText(word); const cap = g.measureText('H').actualBoundingBoxAscent || FONT_PX * 0.7; const pad = 8; const left = Math.ceil(m.actualBoundingBoxLeft); const w = Math.ceil(left + m.actualBoundingBoxRight) + pad * 2; const asc = Math.ceil(Math.max(m.actualBoundingBoxAscent, cap)); const h = asc + Math.ceil(m.actualBoundingBoxDescent) + pad * 2; c.width = w; c.height = h; g.font = font; g.fillStyle = '#000'; g.fillText(word, pad + left, pad + asc); const data = g.getImageData(0, 0, w, h).data; const base = pad + asc; const runs = []; const step = cap / ROWS; /* the rows start from the baseline and go up and down, so every word has its hatch lines in the same places */ for (let y = base - step / 2; y > 0; y -= step) scan(Math.round(y)); for (let y = base + step / 2; y < h; y += step) scan(Math.round(y)); function scan(row) { let x0 = -1; for (let x = 0; x <= w; x++) { const inside = x < w && data[(row * w + x) * 4 + 3] > 127; if (inside && x0 < 0) x0 = x; if (!inside && x0 >= 0) { runs.push({ y: row, x0, x1: x }); x0 = -1; } } } return { runs, width: w - pad * 2, left: pad, base, cap }; } function threads() { const cuts = words.map(cut); const widest = Math.max(...cuts.map((c) => c.width)); const k = PLANE / widest; const list = []; cuts.forEach((c, wi) => { const cx = c.left + c.width / 2; const cy = c.base - c.cap / 2; const piece = c.cap * CHUNK; for (const r of c.runs) { let x = r.x0; while (x < r.x1) { let len = piece * (0.5 + rand()); if (r.x1 - (x + len) < piece * 0.35) len = r.x1 - x; const xb = Math.min(r.x1, x + len); list.push({ ax: (x - cx) * k, ay: -(r.y - cy) * k, bx: (xb - cx) * k, by: -(r.y - cy) * k, s: 1 + SPREAD * (rand() * 2 - 1), phase: rand(), word: wi, u: ((x + xb) / 2 - c.left) / c.width, }); x = xb; } } }); return { list, capWorld: Math.max(...cuts.map((c) => c.cap)) * k }; } /* ---------------------------------------------------------------- the shader */ const VERT = ` attribute vec4 aSeg; attribute vec4 aMore; uniform vec3 uRight[${MAX}]; uniform vec3 uCam[${MAX}]; uniform float uSweep[${MAX}]; uniform float uAlpha[${MAX}]; uniform float uWidth[${MAX}]; uniform float uTime; uniform float uBreath; uniform float uGrow; uniform float uPx; uniform vec2 uRes; uniform vec2 uFade; varying float vSide; varying float vHalf; varying float vAlpha; void main() { int w = int(aMore.z + 0.5); float u = aMore.w; vec3 r = uRight[w]; vec3 c = uCam[w]; float s = aMore.x + uBreath * sin(uTime * 0.8 + aMore.y * 6.2832); float grow = clamp(uGrow * 1.7 - aMore.y * 0.7, 0.0, 1.0); vec2 mid = (aSeg.xy + aSeg.zw) * 0.5; vec2 A = mix(mid, aSeg.xy, grow); vec2 B = mix(mid, aSeg.zw, grow); vec3 pa = c + s * (A.x * r + vec3(0.0, A.y, 0.0) - c); vec3 pb = c + s * (B.x * r + vec3(0.0, B.y, 0.0) - c); vec4 va = modelViewMatrix * vec4(pa, 1.0); vec4 vb = modelViewMatrix * vec4(pb, 1.0); vec4 ca = projectionMatrix * va; vec4 cb = projectionMatrix * vb; vec2 d = cb.xy / cb.w * uRes - ca.xy / ca.w * uRes; float len = length(d); vec2 dir = len > 0.0001 ? d / len : vec2(1.0, 0.0); vec2 nrm = vec2(-dir.y, dir.x); float lock = smoothstep(u - 0.08, u, uSweep[w]); float width = uWidth[w] * uPx * mix(1.0, 1.4, lock) * grow; vec4 p = mix(ca, cb, position.x); float side = width + 1.5; p.xy += nrm * position.y * side / uRes * p.w; p.xy += dir * (position.x * 2.0 - 1.0) * 0.6 / uRes * p.w; gl_Position = p; vSide = position.y * side * 0.5; vHalf = width * 0.5; float depth = -mix(va.z, vb.z, 0.5); float far = smoothstep(uFade.x, uFade.y, depth); vAlpha = uAlpha[w] * mix(mix(1.0, 0.28, far), 1.0, lock) * min(1.0, grow * 3.0); } `; const FRAG = ` uniform vec3 uColor; varying float vSide; varying float vHalf; varying float vAlpha; void main() { float cover = clamp(vHalf - abs(vSide) + 0.5, 0.0, 1.0); gl_FragColor = vec4(uColor, vAlpha * cover); } `; /* ---------------------------------------------------------------- the scene */ async function start() { try { await document.fonts.load(`800 ${FONT_PX}px "Archivo Variable"`); } catch (e) { /* the fallback face will do */ } await document.fonts.ready; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(30, 1, 0.05, 60); const { list, capWorld } = threads(); const geo = new THREE.InstancedBufferGeometry(); geo.setAttribute('position', new THREE.Float32BufferAttribute([0, -1, 0, 1, -1, 0, 0, 1, 0, 1, 1, 0], 3)); geo.setIndex([0, 1, 2, 2, 1, 3]); const seg = new Float32Array(list.length * 4); const more = new Float32Array(list.length * 4); list.forEach((t, i) => { seg.set([t.ax, t.ay, t.bx, t.by], i * 4); more.set([t.s, t.phase, t.word, t.u], i * 4); }); geo.setAttribute('aSeg', new THREE.InstancedBufferAttribute(seg, 4)); geo.setAttribute('aMore', new THREE.InstancedBufferAttribute(more, 4)); geo.instanceCount = list.length; /* every word looks at the middle from its own point, round the cloud */ const right = []; const cams = []; for (let i = 0; i < MAX; i++) { const a = (i % n) * STEP * RAD; right.push(new THREE.Vector3(Math.cos(a), 0, -Math.sin(a))); cams.push(new THREE.Vector3(Math.sin(a), 0, Math.cos(a)).multiplyScalar(D)); } const look = Array.from({ length: MAX }, () => ({ sweep: 0, alpha: 0.6, width: 1 })); const uniforms = { uRight: { value: right }, uCam: { value: cams }, uSweep: { value: new Array(MAX).fill(0) }, uAlpha: { value: new Array(MAX).fill(0.6) }, uWidth: { value: new Array(MAX).fill(1) }, uTime: { value: 0 }, uBreath: { value: REDUCED ? 0 : BREATH }, uGrow: { value: 0 }, uPx: { value: 1 }, uRes: { value: new THREE.Vector2(1, 1) }, uFade: { value: new THREE.Vector2(D * (1 - SPREAD), D * (1 + SPREAD) + 0.6) }, uColor: { value: new THREE.Color(colour('--ink', '#151515')) }, }; const material = new THREE.ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms, transparent: true, depthTest: false, depthWrite: false }); const mesh = new THREE.Mesh(geo, material); mesh.frustumCulled = false; scene.add(mesh); /* the dial: a tick for every point of view */ const ticks = []; for (let i = 0; i < n; i++) { const a = i * STEP * RAD; const l = document.createElementNS('http://www.w3.org/2000/svg', 'line'); l.setAttribute('class', 'dial__tick'); l.setAttribute('x1', (Math.sin(a) * 15).toFixed(2)); l.setAttribute('y1', (-Math.cos(a) * 15).toFixed(2)); l.setAttribute('x2', (Math.sin(a) * 19).toFixed(2)); l.setAttribute('y2', (-Math.cos(a) * 19).toFixed(2)); ticksEl.appendChild(l); ticks.push(l); } const accent = colour('--accent', '#e8452c'); const muted = colour('--muted', '#9a958c'); /* ---------------------------------------------------------------- size */ let px = 1; function resize() { const w = stage.clientWidth; const h = stage.clientHeight; const dpr = Math.min(window.devicePixelRatio || 1, 2); renderer.setPixelRatio(dpr); renderer.setSize(w, h, false); const aspect = w / h; /* the widest word takes a fixed share of the width; on a tall phone a bigger one */ const fill = aspect < 1 ? 0.8 : 0.56; let tan = PLANE / (fill * 2 * D * aspect); /* and it never gets taller than a third of the screen */ tan = Math.max(tan, (capWorld * 2.2) / (2 * D * 0.62)); camera.fov = clamp(2 * Math.atan(tan) / RAD, 8, 80); camera.aspect = aspect; camera.updateProjectionMatrix(); /* the threads get thinner when the hatch lines get close together */ const capPx = (capWorld / (2 * D * Math.tan((camera.fov * RAD) / 2))) * h; px = clamp(capPx / ROWS / 6, 0.55, 1.15); uniforms.uPx.value = WIDTH * px * dpr; uniforms.uRes.value.set(w * dpr, h * dpr); } resize(); window.addEventListener('resize', resize); /* ---------------------------------------------------------------- where the camera is */ const view = { theta: -STEP / 2, phi: RISE * 1.3 }; const tilt = { theta: 0, phi: 0, tx: 0, ty: 0 }; const grow = { v: 0 }; function render() { uniforms.uTime.value = gsap.ticker.time; uniforms.uGrow.value = grow.v; look.forEach((l, i) => { uniforms.uSweep.value[i] = l.sweep; uniforms.uAlpha.value[i] = l.alpha; uniforms.uWidth.value[i] = l.width; }); tilt.theta += (tilt.tx - tilt.theta) * 0.06; tilt.phi += (tilt.ty - tilt.phi) * 0.06; const th = (view.theta + tilt.theta) * RAD; const ph = (view.phi + tilt.phi) * RAD; camera.position.set(Math.sin(th) * Math.cos(ph), Math.sin(ph), Math.cos(th) * Math.cos(ph)).multiplyScalar(D); camera.lookAt(0, 0, 0); renderer.render(scene, camera); const deg = ((view.theta % 360) + 360) % 360; needle.setAttribute('transform', `rotate(${deg.toFixed(2)})`); angleEl.textContent = `${Math.round(deg) % 360}°`; ticks.forEach((t, i) => { t.style.stroke = look[i].sweep > 0.5 && look[i].alpha > 0.5 ? accent : muted; }); } gsap.ticker.add(render); /* ---------------------------------------------------------------- the round */ const others = (k) => look.filter((_, i) => i !== k && i < n); const lockAt = []; function settle(t, k, at) { lockAt[k] = at; t.to(look[k], { sweep: 1.1, duration: 0.85, ease: 'power2.inOut' }, at); t.to(look[k], { alpha: 1, duration: 0.4, ease: 'power1.out' }, at); t.to(look[k], { width: 1.25, duration: 0.6, ease: 'back.out(3)' }, at + 0.2); if (n > 1) t.to(others(k), { alpha: 0.1, duration: 0.6, ease: 'power2.out' }, at); return at + 0.85 + HOLD; } function release(t, k, at) { t.to(look[k], { sweep: 0, duration: 0.55, ease: 'power2.in' }, at); t.to(look[k], { width: 1, duration: 0.5, ease: 'power2.out' }, at); t.to(look.slice(0, n), { alpha: 0.6, duration: 0.7, ease: 'power1.inOut' }, at + 0.15); return at + 0.3; } function travel(t, to, at, rise = RISE) { t.to(view, { theta: to + OVERSHOOT, duration: TRAVEL, ease: 'power3.inOut' }, at); t.to(view, { phi: rise, duration: TRAVEL * 0.5, ease: 'sine.inOut' }, at); t.to(view, { phi: 0, duration: TRAVEL * 0.5, ease: 'sine.inOut' }, at + TRAVEL * 0.5); t.to(view, { theta: to, duration: 0.7, ease: 'power2.inOut' }, at + TRAVEL); /* the word clicks in a moment before the camera has finished settling */ return at + TRAVEL + 0.15; } function round() { const t = gsap.timeline({ repeat: -1, paused: true }); t.set(view, { theta: -STEP / 2, phi: RISE * 1.3 }, 0); t.set(look, { sweep: 0, alpha: 0.6, width: 1 }, 0); t.set(grow, { v: 0 }, 0); /* the threads grow out of nothing while the camera comes down to the first point */ t.to(grow, { v: 1, duration: 2.2, ease: 'power2.out' }, 0.05); let at = travel(t, 0, 0.3, RISE * 1.3); for (let k = 0; k < n; k++) { at = settle(t, k, at); at = release(t, k, at); const next = k + 1 < n ? (k + 1) * STEP : 360 - STEP / 2; if (k + 1 < n) { at = travel(t, next, at); } else { /* the last word lets go, the camera rises back where it started and the threads go back to nothing */ t.to(view, { theta: next, phi: RISE * 1.3, duration: TRAVEL * 0.9, ease: 'power2.inOut' }, at); t.to(grow, { v: 0, duration: 1.4, ease: 'power2.in' }, at + TRAVEL * 0.9 - 1.4); at += TRAVEL * 0.9 + 0.1; } } t.to({}, { duration: 0.01 }, at); return t; } /* nothing moves: the camera stands on one point, the word fades out and the next one fades in */ function still() { const t = gsap.timeline({ repeat: -1, paused: true }); t.set(grow, { v: 1 }, 0); t.set(view, { theta: 0, phi: 0 }, 0); t.set(look, { sweep: 1.1, alpha: 0, width: 1.25 }, 0); let at = 0.1; for (let k = 0; k < n; k++) { t.set(view, { theta: k * STEP }, at); t.to(look[k], { alpha: 1, duration: 0.6, ease: 'power1.inOut' }, at); t.to(look[k], { alpha: 0, duration: 0.5, ease: 'power1.inOut' }, at + 0.6 + HOLD + 0.8); at += 0.6 + HOLD + 1.4; } return t; } const tl = REDUCED ? still() : round(); tl.play(0); /* ---------------------------------------------------------------- the hand */ if (REDUCED) { stage.addEventListener('click', () => tl.restart()); return; } if (HOVER) { stage.addEventListener('pointermove', (e) => { if (drag) return; const r = stage.getBoundingClientRect(); tilt.tx = ((e.clientX - r.left) / r.width - 0.5) * 2 * 2.4; tilt.ty = ((e.clientY - r.top) / r.height - 0.5) * 2 * 1.6; }); stage.addEventListener('pointerleave', () => { tilt.tx = 0; tilt.ty = 0; }); } let drag = null; let snap = null; stage.addEventListener('pointerdown', (e) => { if (e.button !== 0) return; if (snap) snap.kill(); tl.pause(); gsap.killTweensOf(look); gsap.to(look.slice(0, n), { sweep: 0, alpha: 0.6, width: 1, duration: 0.4, ease: 'power2.out' }); gsap.to(grow, { v: 1, duration: 0.4, ease: 'power2.out' }); drag = { x: e.clientX, y: e.clientY, theta: view.theta, phi: view.phi, v: 0, last: e.clientX, time: performance.now() }; tilt.tx = 0; tilt.ty = 0; stage.classList.add('is-dragging'); stage.setPointerCapture(e.pointerId); }); stage.addEventListener('pointermove', (e) => { if (!drag) return; const r = stage.getBoundingClientRect(); const per = 300 / Math.max(320, r.width); view.theta = drag.theta - (e.clientX - drag.x) * per; view.phi = clamp(drag.phi + (e.clientY - drag.y) * per * 0.6, -28, 28); const now = performance.now(); const dt = Math.max(1, now - drag.time); drag.v = (-(e.clientX - drag.last) * per) / dt; drag.last = e.clientX; drag.time = now; }); const letGo = () => { if (!drag) return; stage.classList.remove('is-dragging'); /* where the throw would take the camera, then the nearest point of view from there */ const thrown = view.theta + clamp(drag.v * 260, -140, 140); drag = null; const k = Math.round(thrown / STEP); const target = k * STEP; const word = ((k % n) + n) % n; snap = gsap.timeline(); snap.to(view, { theta: target, duration: 1.1, ease: 'back.out(1.3)' }, 0); snap.to(view, { phi: 0, duration: 0.9, ease: 'power2.out' }, 0); /* the word clicks in as it does in the round, then the round goes on from the moment it is full of ink */ snap.to(look[word], { sweep: 1.1, duration: 0.85, ease: 'power2.inOut' }, 0.95); snap.to(look[word], { alpha: 1, duration: 0.4, ease: 'power1.out' }, 0.95); snap.to(look[word], { width: 1.25, duration: 0.6, ease: 'back.out(3)' }, 1.15); if (n > 1) snap.to(others(word), { alpha: 0.1, duration: 0.6, ease: 'power2.out' }, 0.95); snap.call(() => { view.theta = word * STEP; tl.seek(lockAt[word] + 0.86); tl.play(); }, null, 1.85); }; stage.addEventListener('pointerup', letGo); stage.addEventListener('pointercancel', letGo); }