"use client"; import { useEffect, useRef } from "react"; import * as THREE from "three"; /* ------------------------------------------------------------------ */ /* Terrain */ /* ------------------------------------------------------------------ */ // Deterministic hash noise — used for both terrain detail and scatter. function hash2(x: number, z: number) { const s = Math.sin(x * 127.1 + z * 311.7) * 43758.5453; return s - Math.floor(s); } function valueNoise(x: number, z: number) { const xi = Math.floor(x); const zi = Math.floor(z); const xf = x - xi; const zf = z - zi; const u = xf * xf * (3 - 2 * xf); const v = zf * zf * (3 - 2 * zf); const a = hash2(xi, zi); const b = hash2(xi + 1, zi); const c = hash2(xi, zi + 1); const d = hash2(xi + 1, zi + 1); return (a * (1 - u) + b * u) * (1 - v) + (c * (1 - u) + d * u) * v; } // The big sweeping ridge that reads as a horizon against the black void. function heightAt(x: number, z: number) { const ridge = (x * 0.72 + z * 0.69) * 0.085; let h = 5.6 * Math.sin(ridge) + 1.9 * Math.sin(x * 0.075 + 1.9); h += 1.1 * Math.cos(z * 0.105 - 0.6); h += 0.85 * (valueNoise(x * 0.13, z * 0.13) - 0.5); h += 0.3 * (valueNoise(x * 0.45, z * 0.45) - 0.5); return h; } function normalAt(x: number, z: number, out: THREE.Vector3) { const e = 0.6; const hl = heightAt(x - e, z); const hr = heightAt(x + e, z); const hd = heightAt(x, z - e); const hu = heightAt(x, z + e); return out.set(hl - hr, 2 * e, hd - hu).normalize(); } /* ------------------------------------------------------------------ */ /* Blade geometry */ /* ------------------------------------------------------------------ */ function makeBladeGeometry(segments: number) { const geo = new THREE.PlaneGeometry(1, 1, 1, segments); geo.translate(0, 0.5, 0); // pivot at the root const pos = geo.attributes.position as THREE.BufferAttribute; const colors = new Float32Array(pos.count * 3); const root = new THREE.Color(0x2a0a20); const tip = new THREE.Color(0xffc4e2); const c = new THREE.Color(); for (let i = 0; i < pos.count; i++) { const y = pos.getY(i); // Taper to a point so the field reads as fur rather than ribbons. pos.setX(i, pos.getX(i) * (1 - y * y * 0.92)); c.copy(root).lerp(tip, Math.pow(y, 0.8)); c.toArray(colors, i * 3); } pos.needsUpdate = true; geo.setAttribute("color", new THREE.BufferAttribute(colors, 3)); geo.computeVertexNormals(); return geo; } function makeRockGeometry(seed: number) { const geo = new THREE.IcosahedronGeometry(1, 1); const pos = geo.attributes.position as THREE.BufferAttribute; for (let i = 0; i < pos.count; i++) { const k = 0.62 + 0.55 * hash2(pos.getX(i) * 9 + seed, pos.getZ(i) * 9 - seed); pos.setXYZ(i, pos.getX(i) * k, pos.getY(i) * k * 0.78, pos.getZ(i) * k); } pos.needsUpdate = true; geo.computeVertexNormals(); return geo; } /* ------------------------------------------------------------------ */ /* Scene */ /* ------------------------------------------------------------------ */ export function VelvetField() { 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; // Blades are near sub-pixel wide, so AA is not optional here — without it // most of the field simply falls between samples and the fur looks patchy. const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: "high-performance" }); renderer.setClearColor(0x000000, 1); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.75)); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.5; const scene = new THREE.Scene(); // Fog has to swallow the far edge of the ground plane, so it tightens on // mobile where that plane is smaller. scene.fog = new THREE.FogExp2(0x000000, compact ? 0.028 : 0.019); // Portrait shows a lot of near ground, which exposes individual blades — a // wider, higher camera keeps the fur reading as texture. const camera = new THREE.PerspectiveCamera(compact ? 54 : 42, 1, 0.5, 400); const camHeight = compact ? 14 : 8.5; /* ---------------------------------------------------------- */ /* Lighting — hard rim from above so the fur silhouettes */ /* ---------------------------------------------------------- */ scene.add(new THREE.HemisphereLight(0x9a7ad4, 0x14030f, 1.45)); const key = new THREE.DirectionalLight(0xfff0f8, 3.1); key.position.set(-18, 26, 8); scene.add(key); const rim = new THREE.DirectionalLight(0x6f7ce0, 1.5); rim.position.set(14, 6, -22); scene.add(rim); const bounce = new THREE.PointLight(0xff2f8e, 55, 60, 2); bounce.position.set(0, 4, 6); scene.add(bounce); /* ---------------------------------------------------------- */ /* Ground shell (fills the gaps between blades) */ /* ---------------------------------------------------------- */ // Mobile gets a smaller field rather than a thinner one — dropping the blade // count alone over the full area reads as bald ground. const areaScale = compact ? 0.72 : 1; const AREA_X = 105 * areaScale; const AREA_Z = 135 * areaScale; const groundGeo = new THREE.PlaneGeometry(AREA_X, AREA_Z, 160, 200); groundGeo.rotateX(-Math.PI / 2); { const pos = groundGeo.attributes.position as THREE.BufferAttribute; const colors = new Float32Array(pos.count * 3); // Kept very dark: this only shows through the gaps between blades, and a // bright ground there reads as bald patches rather than shadow. const dark = new THREE.Color(0x140310); const warm = new THREE.Color(0x4a0d35); const c = new THREE.Color(); for (let i = 0; i < pos.count; i++) { const x = pos.getX(i); const z = pos.getZ(i); pos.setY(i, heightAt(x, z)); c.copy(dark).lerp(warm, valueNoise(x * 0.06, z * 0.06)); c.toArray(colors, i * 3); } pos.needsUpdate = true; groundGeo.setAttribute("color", new THREE.BufferAttribute(colors, 3)); groundGeo.computeVertexNormals(); } const ground = new THREE.Mesh( groundGeo, new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.95, metalness: 0 }), ); scene.add(ground); /* ---------------------------------------------------------- */ /* Fur */ /* ---------------------------------------------------------- */ const BLADES = compact ? 145000 : 400000; // Fewer, wider blades hold up better on a phone than more, thinner ones. const widthBoost = compact ? 1.7 : 1; const bladeGeo = makeBladeGeometry(compact ? 3 : 4); const bladeMat = new THREE.MeshStandardMaterial({ vertexColors: true, side: THREE.DoubleSide, roughness: 0.72, metalness: 0, }); const uTime = { value: 0 }; bladeMat.onBeforeCompile = (shader) => { shader.uniforms.uTime = uTime; shader.vertexShader = shader.vertexShader .replace( "#include ", `#include uniform float uTime;`, ) .replace( "#include ", `#include vec3 iPos = vec3(instanceMatrix[3][0], instanceMatrix[3][1], instanceMatrix[3][2]); // Two crossing wind waves + a per-blade shimmer, weighted to the tip. float w1 = sin(dot(iPos.xz, vec2(0.13, 0.095)) - uTime * 0.85); float w2 = sin(dot(iPos.xz, vec2(-0.058, 0.16)) - uTime * 0.52 + 1.7); float shimmer = sin(uTime * 2.3 + iPos.x * 1.7 + iPos.z * 2.1); float gust = 0.55 + 0.45 * sin(dot(iPos.xz, vec2(0.019, 0.027)) - uTime * 0.21); float bend = (w1 * 0.62 + w2 * 0.38 + shimmer * 0.09) * gust; float t = transformed.y * transformed.y; // Blades are scaled non-uniformly (thin + tall), so undo that here or // the lateral sway gets crushed to nothing by the width scale. float sx = length(vec3(instanceMatrix[0].xyz)); float sy = length(vec3(instanceMatrix[1].xyz)); float sz = length(vec3(instanceMatrix[2].xyz)); transformed.x += bend * t * 0.55 * sy / sx; transformed.z += bend * t * 0.28 * sy / sz; transformed.y -= abs(bend) * t * 0.14;`, ); }; const blades = new THREE.InstancedMesh(bladeGeo, bladeMat, BLADES); blades.instanceMatrix.setUsage(THREE.StaticDrawUsage); blades.frustumCulled = false; const palette = [ new THREE.Color(0xff1f7a), new THREE.Color(0xd41e86), new THREE.Color(0x8f2fb0), new THREE.Color(0x5f5fd0), new THREE.Color(0x8fa2ee), new THREE.Color(0xff6fae), ]; { const m = new THREE.Matrix4(); const q = new THREE.Quaternion(); const up = new THREE.Vector3(0, 1, 0); const n = new THREE.Vector3(); const scale = new THREE.Vector3(); const pos = new THREE.Vector3(); const tilt = new THREE.Quaternion(); const spin = new THREE.Quaternion(); const color = new THREE.Color(); // Jittered grid keeps coverage even without a Poisson pass. const cols = Math.ceil(Math.sqrt((BLADES * AREA_X) / AREA_Z)); const rows = Math.ceil(BLADES / cols); // Cells are assigned to instance slots in shuffled order, so lowering // blades.count later thins the whole field evenly instead of lopping off // the far rows. const order = new Uint32Array(BLADES); for (let i = 0; i < BLADES; i++) order[i] = i; for (let i = BLADES - 1; i > 0; i--) { const j = Math.floor(hash2(i, i * 0.37) * (i + 1)); const tmp = order[i]; order[i] = order[j]; order[j] = tmp; } for (let i = 0; i < BLADES; i++) { const cell = order[i]; const gx = cell % cols; const gz = Math.floor(cell / cols); const x = ((gx + hash2(gx, gz)) / cols - 0.5) * AREA_X; const z = ((gz + hash2(gz + 7, gx - 3)) / rows - 0.5) * AREA_Z; const y = heightAt(x, z); // Sit on the slope, then lean back toward vertical a little. normalAt(x, z, n); q.setFromUnitVectors(up, n); spin.setFromAxisAngle(up, hash2(x * 3.1, z * 5.7) * Math.PI * 2); tilt.setFromAxisAngle( new THREE.Vector3(1, 0, 0), (hash2(x * 1.7 + 11, z * 2.3) - 0.5) * 0.5, ); q.multiply(spin).multiply(tilt); const clump = valueNoise(x * 0.55, z * 0.55); const h = 0.26 + clump * 0.45 + hash2(x * 8.1, z * 9.3) * 0.26; scale.set((0.028 + clump * 0.02) * widthBoost, h, 1); pos.set(x, y - 0.04, z); m.compose(pos, q, scale); blades.setMatrixAt(i, m); // Colour drifts in tight patches: magenta lows, periwinkle highs. const band = valueNoise(x * 0.13 + 3.3, z * 0.13 - 1.1) * 0.7 + valueNoise(x * 0.4 - 5.2, z * 0.4 + 2.8) * 0.3; const idx = Math.min(palette.length - 1, Math.floor(band * palette.length)); color .copy(palette[idx]) .lerp(palette[Math.min(palette.length - 1, idx + 1)], (band * palette.length) % 1) .multiplyScalar(0.7 + hash2(x * 4.4, z * 6.6) * 0.6); blades.setColorAt(i, color); } blades.instanceMatrix.needsUpdate = true; if (blades.instanceColor) blades.instanceColor.needsUpdate = true; } scene.add(blades); /* ---------------------------------------------------------- */ /* Rocks */ /* ---------------------------------------------------------- */ const ROCKS = compact ? 60 : 130; // No vertexColors here — the rock geometry has no color attribute, and the // per-instance colour arrives via instanceColor on its own. const rockMat = new THREE.MeshStandardMaterial({ roughness: 0.88, metalness: 0.08 }); const rockMeshes: THREE.InstancedMesh[] = []; const variants = 4; for (let v = 0; v < variants; v++) { const mesh = new THREE.InstancedMesh( makeRockGeometry(v * 13.7 + 2.5), rockMat, Math.ceil(ROCKS / variants), ); mesh.frustumCulled = false; rockMeshes.push(mesh); scene.add(mesh); } { const m = new THREE.Matrix4(); const q = new THREE.Quaternion(); const e = new THREE.Euler(); const scale = new THREE.Vector3(); const pos = new THREE.Vector3(); const color = new THREE.Color(); const stone = new THREE.Color(0x74765f); const moss = new THREE.Color(0x22231b); const counts = new Array(variants).fill(0); for (let i = 0; i < ROCKS; i++) { const x = (hash2(i * 2.7, 1.3) - 0.5) * AREA_X * 0.92; const z = (hash2(i * 5.1, 8.9) - 0.5) * AREA_Z * 0.92; const s = 0.22 + hash2(i * 3.3, 4.1) * 0.62; // Sunk slightly so the fur closes around the base instead of the rock // looking dropped on top of it. pos.set(x, heightAt(x, z) + s * 0.05, z); e.set( (hash2(i, 2) - 0.5) * 0.7, hash2(i, 3) * Math.PI * 2, (hash2(i, 4) - 0.5) * 0.7, ); q.setFromEuler(e); scale.set(s, s * (0.6 + hash2(i, 5) * 0.6), s * (0.8 + hash2(i, 6) * 0.5)); m.compose(pos, q, scale); const v = i % variants; color.copy(moss).lerp(stone, hash2(i, 7)); rockMeshes[v].setMatrixAt(counts[v], m); rockMeshes[v].setColorAt(counts[v], color); counts[v]++; } for (const mesh of rockMeshes) { mesh.count = counts[rockMeshes.indexOf(mesh)]; mesh.instanceMatrix.needsUpdate = true; if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true; } } /* ---------------------------------------------------------- */ /* Camera + loop */ /* ---------------------------------------------------------- */ const target = new THREE.Vector3(); const pointer = { x: 0, y: 0, tx: 0, ty: 0 }; const onPointerMove = (ev: PointerEvent) => { pointer.tx = (ev.clientX / window.innerWidth - 0.5) * 2; pointer.ty = (ev.clientY / window.innerHeight - 0.5) * 2; }; window.addEventListener("pointermove", onPointerMove); 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; // Adaptive quality: 400k instances is fine on a discrete GPU and painful on // an old integrated one, so sample the first couple of seconds and thin the // field once if we are not holding a reasonable frame rate. let sampled = 0; let sampledTime = 0; let tuned = false; let elapsed = 0; const render = () => { raf = requestAnimationFrame(render); const dt = Math.min(clock.getDelta(), 0.1); elapsed += dt; const t = reduceMotion ? 0 : elapsed; uTime.value = t; if (!tuned && elapsed > 0.75) { sampled++; sampledTime += dt; if (sampled === 60) { tuned = true; const avg = sampledTime / sampled; if (avg > 0.033) blades.count = Math.floor(BLADES * (avg > 0.05 ? 0.35 : 0.6)); } } // Slow dolly along the ridge with a lazy figure-eight drift. const cx = Math.sin(t * 0.035) * 12; const cz = 26 + Math.sin(t * 0.021) * 7; pointer.x += (pointer.tx - pointer.x) * 0.03; pointer.y += (pointer.ty - pointer.y) * 0.03; const camX = cx + pointer.x * 5; const camZ = cz; camera.position.set(camX, heightAt(camX, camZ) + camHeight - pointer.y * 2.5, camZ); // Portrait needs a steeper pitch or the horizon sits mid-frame with half // the screen empty. target.set( Math.sin(t * 0.028) * 9 + pointer.x * 5, heightAt(0, -28) - (compact ? 7 : 1), -28, ); camera.lookAt(target); renderer.render(scene, camera); }; render(); return () => { cancelAnimationFrame(raf); ro.disconnect(); window.removeEventListener("pointermove", onPointerMove); scene.traverse((obj) => { if (obj instanceof THREE.Mesh || obj instanceof THREE.InstancedMesh) { obj.geometry.dispose(); } }); bladeMat.dispose(); rockMat.dispose(); renderer.dispose(); }; }, []); // Chrome lives on the viewer page — a scene is only ever a canvas that fills // whatever box it is given. return

Velvet Field