"use client"; import { useEffect, useRef } from "react"; import * as THREE from "three"; /** * A swarm of metallic dots that settles into a human face, a robot head, and a * sprouting plant, scattering apart between each. * * The face and robot are built as front-facing reliefs on a hex lattice rather * than closed shells: at this dot size a shell reads as a featureless egg, * because the silhouette carries nothing and the sculpted relief is hidden. * * All three point clouds are generated once and uploaded as instanced * attributes. The morph runs entirely in the vertex shader — a pair of selector * masks picks which two clouds are active, so cycling shapes costs nothing per * frame and never re-uploads a buffer. */ const SHAPES = 3; /* ------------------------------------------------------------------ */ /* Helpers */ /* ------------------------------------------------------------------ */ function gauss(x: number, sigma: number) { const t = x / sigma; return Math.exp(-t * t); } function smoothstep(edge0: number, edge1: number, x: number) { const t = Math.min(1, Math.max(0, (x - edge0) / (edge1 - edge0))); return t * t * (3 - 2 * t); } /** * A cloud carries a normal per point as well as a position. Each dot is a * sphere, so it would otherwise shade identically wherever it sits — the relief * is invisible unless every dot is lit as a facet of the surface beneath it. */ type Cloud = { positions: number[]; normals: number[] }; function pushPoint(cloud: Cloud, p: THREE.Vector3Like, n: THREE.Vector3Like) { cloud.positions.push(p.x, p.y, p.z); const length = Math.hypot(n.x, n.y, n.z) || 1; cloud.normals.push(n.x / length, n.y / length, n.z / length); } /** * Fills a 2D outline with a hex-packed lattice and lifts each point off a depth * function. Spacing is solved iteratively so the result lands close to `target` * without the caller having to know the outline's area. */ function relief( target: number, halfW: number, halfH: number, inside: (x: number, y: number) => boolean, depth: (x: number, y: number) => number, ): Cloud { let spacing = Math.sqrt((4 * halfW * halfH) / target); let cloud: Cloud = { positions: [], normals: [] }; for (let pass = 0; pass < 4; pass++) { cloud = { positions: [], normals: [] }; const rowStep = spacing * 0.866; // hex packing const e = spacing * 0.5; let row = 0; for (let y = -halfH; y <= halfH; y += rowStep, row++) { const offset = row % 2 === 0 ? 0 : spacing * 0.5; for (let x = -halfW + offset; x <= halfW; x += spacing) { if (!inside(x, y)) continue; const z = depth(x, y); // Surface normal by central difference on the depth field. const dx = (depth(x + e, y) - depth(x - e, y)) / (2 * e); const dy = (depth(x, y + e) - depth(x, y - e)) / (2 * e); pushPoint(cloud, { x, y, z }, { x: -dx, y: -dy, z: 1 }); } } const have = cloud.positions.length / 3; if (have >= target && have <= target * 1.06) break; spacing *= Math.sqrt(have / target); } return cloud; } /** Resamples an arbitrary-length cloud to exactly `count` points. */ function fit(src: Cloud, count: number, outPos: Float32Array, outNor: Float32Array) { const have = src.positions.length / 3; for (let i = 0; i < count; i++) { // Short clouds cycle with a touch of jitter so duplicates do not stack into // one brighter dot; long clouds are evenly subsampled. const short = have < count; const j = short ? i % have : Math.floor((i * have) / count); const jitter = short ? 0.012 : 0; for (let k = 0; k < 3; k++) { outPos[i * 3 + k] = src.positions[j * 3 + k] + (Math.random() - 0.5) * jitter; outNor[i * 3 + k] = src.normals[j * 3 + k]; } } } /* ------------------------------------------------------------------ */ /* Shape 1 — human face */ /* ------------------------------------------------------------------ */ function faceHalfWidth(y: number) { const ny = (y - 0.04) / 1.0; if (Math.abs(ny) >= 1) return 0; let w = 0.63 * Math.sqrt(1 - ny * ny); // Square off the temples and narrow the jaw into a chin. w *= 1 + 0.22 * gauss(y - 0.35, 0.30); w *= 1 - 0.30 * smoothstep(-0.20, -0.85, y); return w; } function faceDepth(x: number, y: number) { const ax = Math.abs(x); // Underlying dome. const r2 = (x / 0.66) ** 2 + ((y - 0.04) / 1.02) ** 2; let z = 0.60 * Math.sqrt(Math.max(0, 1 - r2 * 0.94)); // Brow ridge, then the sockets recessed beneath it. z += 0.10 * gauss(y - 0.26, 0.085) * gauss(ax - 0.20, 0.23); z -= 0.14 * gauss(ax - 0.235, 0.105) * gauss(y - 0.10, 0.080); z += 0.060 * gauss(ax - 0.235, 0.062) * gauss(y - 0.095, 0.048); // Nose: a bridge down the centreline, a ball at the tip, creases beside it. const bridge = smoothstep(0.24, 0.08, y) * smoothstep(-0.32, -0.20, y); z += 0.20 * gauss(x, 0.052) * bridge; z += 0.17 * gauss(x, 0.080) * gauss(y + 0.21, 0.052); z -= 0.055 * gauss(ax - 0.115, 0.032) * gauss(y + 0.215, 0.042); // Mouth: upper and lower lip with the crease between them. z += 0.095 * gauss(x, 0.155) * gauss(y + 0.41, 0.058); z -= 0.040 * gauss(x, 0.185) * gauss(y + 0.41, 0.013); z -= 0.022 * gauss(x, 0.030) * gauss(y + 0.32, 0.038); // Cheekbones, jaw and chin. z += 0.055 * gauss(ax - 0.35, 0.115) * gauss(y + 0.02, 0.14); z += 0.070 * gauss(x, 0.145) * gauss(y + 0.68, 0.095); z -= 0.030 * gauss(ax - 0.30, 0.10) * gauss(y + 0.45, 0.12); return z; } function buildFace(count: number, outPos: Float32Array, outNor: Float32Array) { const cloud = relief( count, 0.85, 1.05, (x, y) => Math.abs(x) <= faceHalfWidth(y), faceDepth, ); fit(cloud, count, outPos, outNor); } /* ------------------------------------------------------------------ */ /* Shape 2 — robot head */ /* ------------------------------------------------------------------ */ function robotInside(x: number, y: number) { const nx = x / 0.66; const ny = (y - 0.02) / 0.86; return Math.pow(Math.abs(nx), 3.2) + Math.pow(Math.abs(ny), 3.2) <= 1; } function robotDepth(x: number, y: number) { const ax = Math.abs(x); // Faceplate: mostly flat with a slight crown. let z = 0.34 * Math.pow(Math.max(0, 1 - Math.pow(ax / 0.72, 4) - Math.pow((y - 0.02) / 0.92, 4)), 0.4); // Recessed visor band holding two eyes. const visor = smoothstep(0.20, 0.16, Math.abs(y - 0.20)) * smoothstep(0.50, 0.45, ax); z -= 0.10 * visor; const eye = gauss(ax - 0.27, 0.070) * gauss(y - 0.20, 0.062); z += 0.15 * eye; // Mouth grille: horizontal bars inside a shallow recess. const grilleArea = smoothstep(0.34, 0.30, ax) * smoothstep(0.17, 0.13, Math.abs(y + 0.44)); z -= 0.055 * grilleArea; z += 0.030 * grilleArea * (Math.cos((y + 0.44) * 62.0) * 0.5 + 0.5); // Cheek vents. const vent = smoothstep(0.13, 0.09, Math.abs(ax - 0.47)) * smoothstep(0.16, 0.12, Math.abs(y + 0.18)); z += 0.035 * vent * (Math.cos(y * 70.0) * 0.5 + 0.5); // Panel seams across the brow and jaw. z -= 0.045 * gauss(y - 0.52, 0.016); z -= 0.035 * gauss(y + 0.68, 0.016); z -= 0.030 * gauss(ax - 0.58, 0.014); return z; } function buildRobot(count: number, outPos: Float32Array, outNor: Float32Array) { const plateTarget = Math.floor(count * 0.9); const cloud = relief(plateTarget, 0.72, 0.92, robotInside, robotDepth); // Antenna: stalk plus a bulb. const antenna = Math.floor(count * 0.035); for (let i = 0; i < antenna; i++) { const t = i / antenna; const stalk = t < 0.7; const angle = i * 2.399963229728653; const radius = stalk ? 0.026 : 0.085 * Math.sin(((t - 0.7) / 0.3) * Math.PI); const y = stalk ? 0.90 + t * 0.44 : 1.22 + (t - 0.7) * 0.30; pushPoint( cloud, { x: Math.cos(angle) * radius, y, z: Math.sin(angle) * radius + 0.12 }, { x: Math.cos(angle), y: stalk ? 0.2 : 0.9, z: Math.sin(angle) }, ); } // Side housings, as short cylinders either side of the plate. const ears = Math.floor(count * 0.065); for (let i = 0; i < ears; i++) { const side = i % 2 === 0 ? 1 : -1; const t = i / ears; const angle = t * Math.PI * 2 * 11.0; const r = 0.20 * Math.sqrt(((i * 7) % 19) / 19); pushPoint( cloud, { x: side * (0.66 + (((i * 3) % 5) / 5) * 0.1), y: 0.06 + Math.cos(angle) * r, z: Math.sin(angle) * r + 0.05, }, { x: side * 1.2, y: Math.cos(angle) * 0.5, z: Math.sin(angle) * 0.5 }, ); } fit(cloud, count, outPos, outNor); } /* ------------------------------------------------------------------ */ /* Shape 3 — plant */ /* ------------------------------------------------------------------ */ function stemCurve(t: number) { return { x: Math.sin(t * 2.1) * 0.07, y: -0.62 + t * 0.80, z: Math.cos(t * 1.4) * 0.04 - 0.04, }; } function buildPlant(count: number, outPos: Float32Array, outNor: Float32Array) { const cloud: Cloud = { positions: [], normals: [] }; // Pot: a truncated cone shell with a thicker rim. const potCount = Math.floor(count * 0.22); for (let i = 0; i < potCount; i++) { const rim = i % 6 === 0; const h = (i % 89) / 89; const angle = i * 2.399963229728653; const radius = rim ? 0.46 : 0.31 + h * 0.14; pushPoint( cloud, { x: Math.cos(angle) * radius, y: rim ? -0.6 + ((i % 3) / 3) * 0.05 : -1.1 + h * 0.5, z: Math.sin(angle) * radius, }, { x: Math.cos(angle), y: 0.28, z: Math.sin(angle) }, ); } // Soil surface. const soilCount = Math.floor(count * 0.05); for (let i = 0; i < soilCount; i++) { const angle = i * 2.399963229728653; const r = 0.43 * Math.sqrt((i % 71) / 71); pushPoint( cloud, { x: Math.cos(angle) * r, y: -0.62 + Math.sin(i * 3.3) * 0.012, z: Math.sin(angle) * r }, { x: Math.sin(i * 2.1) * 0.25, y: 1, z: Math.cos(i * 1.7) * 0.25 }, ); } // Stem. const stemCount = Math.floor(count * 0.08); for (let i = 0; i < stemCount; i++) { const t = (i % 181) / 181; const c = stemCurve(t); const angle = i * 2.399963229728653; const radius = 0.04 * (1 - t * 0.45); pushPoint( cloud, { x: c.x + Math.cos(angle) * radius, y: c.y, z: c.z + Math.sin(angle) * radius }, { x: Math.cos(angle), y: 0.1, z: Math.sin(angle) }, ); } // Leaves: hex-lattice blades, so they carry the same dot texture as the face. const LEAVES = 6; const leafTarget = Math.floor((count - cloud.positions.length / 3) / LEAVES); for (let leaf = 0; leaf < LEAVES; leaf++) { const yaw = (leaf / LEAVES) * Math.PI * 2 + 0.5; // Bases spread down the stem so the leaves do not all fan from one point. const base = stemCurve(0.14 + (leaf / LEAVES) * 0.84); const length = 0.7 + (((leaf * 7) % 5) / 5) * 0.34; const lift = 0.58 - (leaf / LEAVES) * 0.34; const droop = 0.45 + (((leaf * 3) % 4) / 4) * 0.55; // Maps blade coordinates to world space; the normal is taken from the cross // product of its two numerical tangents. const leafPoint = (u: number, v: number) => { const lx = u * length; const ly = Math.sin(u * Math.PI * 0.55) * lift - u * u * droop * 0.55; const curl = v * v * 1.7; return { x: base.x + Math.cos(yaw) * lx - Math.sin(yaw) * v, y: base.y + ly + curl, z: base.z + Math.sin(yaw) * lx + Math.cos(yaw) * v, }; }; const blade = relief( leafTarget, 0.5, 0.5, (u, v) => { const uu = u + 0.5; if (uu <= 0.02 || uu >= 1) return false; return Math.abs(v) <= Math.pow(Math.sin(Math.PI * uu), 0.72) * 0.5; }, () => 0, ); const e = 0.01; for (let i = 0; i < blade.positions.length; i += 3) { const u = blade.positions[i] + 0.5; const v = blade.positions[i + 1] * 0.42; const p = leafPoint(u, v); const pu = leafPoint(u + e, v); const pv = leafPoint(u, v + e); const tu = { x: pu.x - p.x, y: pu.y - p.y, z: pu.z - p.z }; const tv = { x: pv.x - p.x, y: pv.y - p.y, z: pv.z - p.z }; pushPoint(cloud, p, { x: tv.y * tu.z - tv.z * tu.y, y: tv.z * tu.x - tv.x * tu.z, z: tv.x * tu.y - tv.y * tu.x, }); } } fit(cloud, count, outPos, outNor); } /* ------------------------------------------------------------------ */ /* Scene */ /* ------------------------------------------------------------------ */ export function SwarmForms() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const compact = window.matchMedia("(max-width: 767px)").matches; const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); renderer.setClearColor(0x000000, 1); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.75)); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.1; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(compact ? 46 : 36, 1, 0.1, 40); camera.position.set(0, 0.02, 4.1); camera.lookAt(0, 0.02, 0); scene.add(new THREE.HemisphereLight(0x8ea4c4, 0x04060a, 0.22)); // The relief only reads through shading, so the key grazes across the face // almost side-on. A frontal key flattens the whole thing out. const key = new THREE.DirectionalLight(0xffffff, 4.0); key.position.set(-4.0, 1.7, 0.9); scene.add(key); const fill = new THREE.DirectionalLight(0x7f93b4, 0.30); fill.position.set(3.0, -1.2, 1.6); scene.add(fill); const rim = new THREE.DirectionalLight(0xcfe0ff, 1.2); rim.position.set(2.2, 0.8, -3.0); scene.add(rim); /* Point clouds -------------------------------------------------- */ const COUNT = compact ? 8000 : 17000; const pos = [ new Float32Array(COUNT * 3), new Float32Array(COUNT * 3), new Float32Array(COUNT * 3), ]; const nor = [ new Float32Array(COUNT * 3), new Float32Array(COUNT * 3), new Float32Array(COUNT * 3), ]; buildFace(COUNT, pos[0], nor[0]); buildRobot(COUNT, pos[1], nor[1]); buildPlant(COUNT, pos[2], nor[2]); const scatter = new Float32Array(COUNT * 3); const delay = new Float32Array(COUNT); const dotScale = new Float32Array(COUNT); const direction = new THREE.Vector3(); for (let i = 0; i < COUNT; i++) { direction .set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1) .normalize() .multiplyScalar(0.5 + Math.random() * 0.85); scatter[i * 3] = direction.x; scatter[i * 3 + 1] = direction.y; scatter[i * 3 + 2] = direction.z; delay[i] = Math.random(); dotScale[i] = 0.85 + Math.random() * 0.35; } // Deliberately smaller than the lattice spacing so the dots stay separate // beads — touching dots merge into a solid skin and the relief washes out. const dotRadius = compact ? 0.0105 : 0.0072; const geometry = new THREE.SphereGeometry(dotRadius, 6, 5); geometry.setAttribute("aP0", new THREE.InstancedBufferAttribute(pos[0], 3)); geometry.setAttribute("aP1", new THREE.InstancedBufferAttribute(pos[1], 3)); geometry.setAttribute("aP2", new THREE.InstancedBufferAttribute(pos[2], 3)); geometry.setAttribute("aN0", new THREE.InstancedBufferAttribute(nor[0], 3)); geometry.setAttribute("aN1", new THREE.InstancedBufferAttribute(nor[1], 3)); geometry.setAttribute("aN2", new THREE.InstancedBufferAttribute(nor[2], 3)); geometry.setAttribute("aScatter", new THREE.InstancedBufferAttribute(scatter, 3)); geometry.setAttribute("aDelay", new THREE.InstancedBufferAttribute(delay, 1)); geometry.setAttribute("aScale", new THREE.InstancedBufferAttribute(dotScale, 1)); const uProgress = { value: 0 }; const uFromMask = { value: new THREE.Vector3(1, 0, 0) }; const uToMask = { value: new THREE.Vector3(0, 1, 0) }; const uTime = { value: 0 }; const material = new THREE.MeshStandardMaterial({ color: 0xe6ecf5, metalness: 0.55, roughness: 0.28, }); material.onBeforeCompile = (shader) => { shader.uniforms.uProgress = uProgress; shader.uniforms.uFromMask = uFromMask; shader.uniforms.uToMask = uToMask; shader.uniforms.uTime = uTime; shader.vertexShader = shader.vertexShader .replace( "#include ", `#include attribute vec3 aP0; attribute vec3 aP1; attribute vec3 aP2; attribute vec3 aN0; attribute vec3 aN1; attribute vec3 aN2; attribute vec3 aScatter; attribute float aDelay; attribute float aScale; uniform float uProgress; uniform vec3 uFromMask; uniform vec3 uToMask; uniform float uTime;`, ) // The morph is solved here rather than in because three // runs first, and the normal needs the same eased // progress. Both chunks are inlined into main(), so the locals declared // here are still in scope below. .replace( "#include ", `#include vec3 fromPos = aP0 * uFromMask.x + aP1 * uFromMask.y + aP2 * uFromMask.z; vec3 toPos = aP0 * uToMask.x + aP1 * uToMask.y + aP2 * uToMask.z; vec3 fromNor = aN0 * uFromMask.x + aN1 * uFromMask.y + aN2 * uFromMask.z; vec3 toNor = aN0 * uToMask.x + aN1 * uToMask.y + aN2 * uToMask.z; // Each dot runs the transition on its own offset window, so the swarm // dissolves as a wave rather than snapping across as one block. float stagger = 0.45; float local = clamp((uProgress - aDelay * stagger) / (1.0 - stagger), 0.0, 1.0); float eased = local * local * local * (local * (local * 6.0 - 15.0) + 10.0); vec3 center = mix(fromPos, toPos, eased); // Scatter peaks at the midpoint of each dot's own flight. float flight = sin(3.14159265 * eased); center += aScatter * flight * 0.80; // Swirl about Y while airborne so the burst is not purely radial. float spin = flight * 1.25 * (aDelay - 0.5) * 2.0; float cs = cos(spin); float sn = sin(spin); center.xz = mat2(cs, -sn, sn, cs) * center.xz; // Gentle breathing while a shape is held. center += aScatter * 0.010 * (1.0 - flight) * sin(uTime * 0.9 + aDelay * 24.0); // Shade each dot as a facet of the surface it belongs to, keeping a // little of the sphere's own normal for a bead highlight. In flight // there is no surface, so it falls back to the sphere. vec3 surfaceNormal = normalize(mix(fromNor, toNor, eased)); objectNormal = normalize(mix(objectNormal, surfaceNormal, 0.78 * (1.0 - flight)));`, ) .replace( "#include ", `#include transformed = position * aScale * (1.0 - 0.30 * flight) + center;`, ); }; const dots = new THREE.InstancedMesh(geometry, material, COUNT); dots.frustumCulled = false; // Positions come from the attributes above, so every instance matrix stays // identity — three still applies it, just as a no-op. const identity = new THREE.Matrix4(); for (let i = 0; i < COUNT; i++) dots.setMatrixAt(i, identity); dots.instanceMatrix.needsUpdate = true; const swarm = new THREE.Group(); swarm.add(dots); scene.add(swarm); /* Cycle --------------------------------------------------------- */ const HOLD = 3.6; const MORPH = 2.1; const masks = [ new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 1), ]; let shapeIndex = 0; let phaseT = 0; let holding = true; uFromMask.value.copy(masks[0]); uToMask.value.copy(masks[1]); const resize = () => { const w = canvas.clientWidth || window.innerWidth; const h = canvas.clientHeight || window.innerHeight; renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix(); }; resize(); const ro = new ResizeObserver(resize); ro.observe(canvas); const clock = new THREE.Clock(); let raf = 0; let elapsed = 0; const update = (dt: number) => { elapsed += dt; uTime.value = elapsed; phaseT += dt; if (holding) { if (phaseT >= HOLD) { phaseT = 0; holding = false; uFromMask.value.copy(masks[shapeIndex]); uToMask.value.copy(masks[(shapeIndex + 1) % SHAPES]); } } else { uProgress.value = Math.min(1, phaseT / MORPH); if (phaseT >= MORPH) { phaseT = 0; holding = true; shapeIndex = (shapeIndex + 1) % SHAPES; // Reset to a clean held state on the new shape. uFromMask.value.copy(masks[shapeIndex]); uToMask.value.copy(masks[(shapeIndex + 1) % SHAPES]); uProgress.value = 0; } } // A slow turn keeps the relief from looking like a flat print. swarm.rotation.y = Math.sin(elapsed * 0.13) * 0.30; swarm.rotation.x = Math.sin(elapsed * 0.09) * 0.05; }; const render = () => { raf = requestAnimationFrame(render); update(reduceMotion ? 0 : Math.min(clock.getDelta(), 0.05)); renderer.render(scene, camera); }; render(); return () => { cancelAnimationFrame(raf); ro.disconnect(); geometry.dispose(); material.dispose(); renderer.dispose(); }; }, []); return

Swarm Forms