16:I[54961,["/_next/static/immutable/chunks/23kzrxojb_1p2.js","/_next/static/immutable/chunks/39h58d1utebdp.js","/_next/static/immutable/chunks/2nrtc1lb04fz1.js","/_next/static/immutable/chunks/21y0r7k6jovn5.js","/_next/static/immutable/chunks/31l88bjo9blmv.js","/_next/static/immutable/chunks/2z8nc0r40hilq.js","/_next/static/immutable/chunks/27fhzxv1uvtm8.js"],"default"] 17:T1221,'use client'; import { useEffect, useMemo, useRef } from 'react'; import { createStratumScene, type StratumOptions } from './stratum-scene'; import { pillarHeight, pillarPitch, stratumGrid, stratumHex, type SequenceMode, type HoverEffect, type StratumPalette, } from './stratum-math'; export type StratumProps = { gridSize?: number; maxHeight?: number; waveSpeed?: number; sequenceMode?: SequenceMode; hoverEffect?: HoverEffect; colorPalette?: StratumPalette; compact?: boolean; paused?: boolean; className?: string; }; export default function Stratum({ gridSize = 24, maxHeight = 4.5, waveSpeed = 1, sequenceMode = 'auto', hoverEffect = 'retract', colorPalette = {}, compact = false, paused = false, className = '', }: StratumProps) { const root = useRef(null), canvas = useRef(null), scene = useRef | null>(null); const options = useRef({ gridSize, maxHeight, waveSpeed, sequenceMode, hoverEffect, colorPalette, paused, }); options.current = { gridSize, maxHeight, waveSpeed, sequenceMode, hoverEffect, colorPalette, paused, }; const background = stratumHex(colorPalette.background, '#101114'), pillars = stratumHex(colorPalette.pillars, '#9ca3af'); const fallback = useMemo(() => { const n = stratumGrid(gridSize), paths = []; const project = (x: number, y: number, z: number) => `${(400 + (x - z) * 47).toFixed(2)},${(366 + (x + z) * 22 - y * 55).toFixed(2)}`; for (let sum = 0; sum < 2 * n - 1; sum++) for (let row = 0; row < n; row++) { const col = sum - row; if (col < 0 || col >= n) continue; const x = (col - (n - 1) / 2) * pillarPitch, z = (row - (n - 1) / 2) * pillarPitch, h = pillarHeight(sequenceMode, x, z, row, col, 2.1, maxHeight), a = 0.06; paths.push( , ); } return paths; }, [gridSize, maxHeight, sequenceMode, pillars]); useEffect(() => { delete root.current!.dataset.failed; try { scene.current = createStratumScene( canvas.current!, compact, () => options.current, ); } catch { root.current!.dataset.failed = 'true'; } return () => { scene.current?.dispose(); scene.current = null; }; }, [compact]); const paletteKey = JSON.stringify(colorPalette); useEffect( () => scene.current?.sync(), [gridSize, maxHeight, waveSpeed, sequenceMode, hoverEffect, paletteKey, paused], ); return (

); } const styles = `.stratum{position:relative;width:100%;height:100%;min-height:0;overflow:clip;isolation:isolate;touch-action:none;outline:none}.stratum[data-compact=true]{touch-action:pan-y}.stratum>canvas,.stratum-fallback{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}.stratum>canvas{opacity:0;transition:opacity .25s linear}.stratum[data-ready=true]>canvas{opacity:1}.stratum[data-ready=true]>.stratum-fallback{visibility:hidden}.stratum:focus-visible{outline:1px solid #eef0f4;outline-offset:-4px}@media(prefers-reduced-motion:reduce){.stratum>canvas{transition:none}}`; 18:T33bc,import * as THREE from 'three'; import { createPillarLayout, pillarHeight, interactiveHeight, springPillar, pillarPitch, stratumGrid, stratumClamp, stratumHex, stratumModes, type SequenceMode, type HoverEffect, type StratumPalette, type Shockwave, } from './stratum-math'; export type StratumOptions = { gridSize: number; maxHeight: number; waveSpeed: number; sequenceMode: SequenceMode; hoverEffect: HoverEffect; colorPalette: StratumPalette; paused: boolean; }; export function createStratumScene( canvas: HTMLCanvasElement, compact: boolean, read: () => StratumOptions, ) { const host = canvas.parentElement!, media = matchMedia('(prefers-reduced-motion: reduce)'); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: false, powerPreference: 'high-performance', }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, compact ? 1.25 : 1.75)); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.VSMShadowMap; const scene = new THREE.Scene(), camera = new THREE.OrthographicCamera(-5, 5, 5, -5, 0.1, 100); camera.position.set(9, 7.7, 9); camera.lookAt(0, 1.7, 0); camera.updateMatrixWorld(); const geometry = new THREE.BoxGeometry(0.12, 1, 0.12); geometry.translate(0, 0.5, 0); const material = new THREE.MeshStandardMaterial({ color: '#9ca3af', roughness: 0.4, metalness: 0.1, }); const floorGeometry = new THREE.PlaneGeometry(200, 200), floorMaterial = new THREE.MeshStandardMaterial({ color: '#101114', roughness: 0.95, metalness: 0, }), floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true; scene.add(floor); const ambient = new THREE.HemisphereLight('#eef0f4', '#23262d', 0.95), sun = new THREE.DirectionalLight('#eef0f4', 2.2); const fill = new THREE.PointLight('#eef0f4', 65, 40, 2); fill.position.set(7, 5, 4); scene.add(fill); sun.position.set(8, 12, -2); sun.castShadow = true; sun.shadow.mapSize.set(compact ? 512 : 1024, compact ? 512 : 1024); sun.shadow.bias = -0.00015; sun.shadow.normalBias = 0.015; sun.shadow.radius = compact ? 6 : 12; sun.shadow.blurSamples = 12; Object.assign(sun.shadow.camera, { left: -8, right: 8, top: 8, bottom: -8, near: 1, far: 40, }); sun.shadow.camera.updateProjectionMatrix(); scene.add(ambient, sun, sun.target); const pickGeometry = new THREE.PlaneGeometry(1, 1), pickMaterial = new THREE.MeshBasicMaterial({ visible: false, side: THREE.DoubleSide, }), pickPlane = new THREE.Mesh(pickGeometry, pickMaterial); pickPlane.rotation.x = -Math.PI / 2; pickPlane.position.y = 0.001; scene.add(pickPlane); const raycaster = new THREE.Raycaster(), ndc = new THREE.Vector2(), projected = new THREE.Vector3(), shocks: Shockwave[] = []; let layout = createPillarLayout(read().gridSize), mesh: THREE.InstancedMesh, frame = 0, last = 0, time = 2.1, disposed = false, lost = false, visible = true, held = false, width = 0, height = 0; let hover = 0, hoverTarget = 0, hoverX = 0, hoverZ = 0, targetX = 0, targetZ = 0, paletteKey = ''; function stop() { cancelAnimationFrame(frame); frame = 0; } function seed() { if (mesh && layout.n === stratumGrid(read().gridSize)) return; if (mesh) { scene.remove(mesh); mesh.dispose(); } layout = createPillarLayout(read().gridSize); mesh = new THREE.InstancedMesh(geometry, material, layout.n * layout.n); mesh.instanceMatrix = new THREE.InstancedBufferAttribute( layout.matrices, 16, ).setUsage(THREE.DynamicDrawUsage); mesh.castShadow = mesh.receiveShadow = true; mesh.frustumCulled = false; scene.add(mesh); const span = (layout.n - 1) * pillarPitch + 0.12; pickPlane.scale.set(span, span, 1); pickPlane.updateMatrixWorld(true); hoverTarget = hover = 0; shocks.length = 0; update(0, true); fit(); host.dataset.pillars = String(mesh.count); } function fit() { if (!width || !height) return; // Fit the full anchored volume, including its tallest possible pose, at every aspect ratio. const half = (layout.n - 1) * pillarPitch * 0.5 + 0.12; let xMin = Infinity, xMax = -Infinity, yMin = Infinity, yMax = -Infinity; camera.left = -1; camera.right = 1; camera.top = 1; camera.bottom = -1; camera.updateProjectionMatrix(); for (const x of [-half, half]) for (const y of [0, 4.5]) for (const z of [-half, half]) { projected.set(x, y, z).project(camera); xMin = Math.min(xMin, projected.x); xMax = Math.max(xMax, projected.x); yMin = Math.min(yMin, projected.y); yMax = Math.max(yMax, projected.y); } const aspect = width / height, halfH = Math.max((yMax - yMin) * 0.5, ((xMax - xMin) * 0.5) / aspect) * 1.14, cx = (xMin + xMax) * 0.5, cy = (yMin + yMax) * 0.5; camera.left = cx - halfH * aspect; camera.right = cx + halfH * aspect; camera.top = cy + halfH; camera.bottom = cy - halfH; camera.updateProjectionMatrix(); } function palette() { const p = read().colorPalette, bg = stratumHex(p.background, '#101114'), pillars = stratumHex(p.pillars, '#9ca3af'), light = stratumHex(p.light, '#eef0f4'), key = bg + pillars + light; if (key === paletteKey) return; paletteKey = key; scene.background = new THREE.Color(bg); floorMaterial.color.set(bg); material.color.set(pillars); sun.color.set(light); ambient.color.set(light); fill.color.set(light); } function update(dt: number, snap = false) { const o = read(), max = stratumClamp(o.maxHeight, 0.05, 4.5); hover += (hoverTarget - hover) * (1 - Math.exp(-dt * 9)); hoverX += (targetX - hoverX) * (1 - Math.exp(-dt * 14)); hoverZ += (targetZ - hoverZ) * (1 - Math.exp(-dt * 14)); for (let i = 0; i < layout.heights.length; i++) { const x = layout.matrices[i * 16 + 12], z = layout.matrices[i * 16 + 14], base = pillarHeight( o.sequenceMode, x, z, Math.floor(i / layout.n), i % layout.n, time, max, ), target = interactiveHeight( base, x, z, max, hoverX, hoverZ, hover, o.hoverEffect, shocks, time, ); springPillar(layout, i, target, dt, max, snap); } const life = (Math.SQRT2 * layout.n * pillarPitch) / 2.7 + 1; while (shocks.length && time - shocks[0].born > life) shocks.shift(); mesh.instanceMatrix.needsUpdate = true; } function draw() { if (disposed || lost || !width || !height) return; palette(); renderer.render(scene, camera); host.dataset.ready = 'true'; host.dataset.sequence = read().sequenceMode === 'auto' ? stratumModes[Math.floor(time / 8) % 4] : read().sequenceMode; host.dataset.matrixTime = time.toFixed(3); host.dataset.shocks = String(shocks.length); } function running() { return ( !disposed && !lost && visible && !document.hidden && !held && !read().paused && !media.matches ); } function wake() { if (!frame && running()) { last = performance.now(); frame = requestAnimationFrame(tick); } } function tick(now: number) { frame = 0; if (!running()) return; const elapsed = now - last; if (elapsed < 1000 / 60 - 0.5) { frame = requestAnimationFrame(tick); return; } last = now; const dt = Math.min(0.033, Math.max(0.001, elapsed / 1000)); time += dt * stratumClamp(read().waveSpeed, 0.1, 3); update(dt); draw(); wakeNext(); } function wakeNext() { if (running()) frame = requestAnimationFrame(tick); } function sync() { stop(); seed(); palette(); update(0, media.matches); draw(); wake(); } function resize() { const box = host.getBoundingClientRect(); width = Math.max(1, box.width); height = Math.max(1, box.height); renderer.setSize(width, height, false); fit(); draw(); wake(); } function hit(e: PointerEvent) { const rect = canvas.getBoundingClientRect(); ndc.set( ((e.clientX - rect.left) / rect.width) * 2 - 1, 1 - ((e.clientY - rect.top) / rect.height) * 2, ); raycaster.setFromCamera(ndc, camera); return raycaster.intersectObject(pickPlane, false)[0]?.point; } function move(e: PointerEvent) { if (!running()) return; const point = hit(e); hoverTarget = point ? 1 : 0; if (point) { targetX = point.x; targetZ = point.z; } wake(); } function leave() { hoverTarget = 0; } function shock(x: number, z: number) { if (!running()) return; shocks.push({ x, z, born: time }); if (shocks.length > 4) shocks.shift(); wake(); } function down(e: PointerEvent) { if (!running()) return; const point = hit(e); if (point) { targetX = hoverX = point.x; targetZ = hoverZ = point.z; hoverTarget = 1; shock(point.x, point.z); } if (e.pointerType === 'touch' && !compact) host.setPointerCapture(e.pointerId); } function up(e: PointerEvent) { if (host.hasPointerCapture(e.pointerId)) host.releasePointerCapture(e.pointerId); if (e.pointerType === 'touch') leave(); } function key(e: KeyboardEvent) { if ( e.target !== host || ![ 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter', ' ', 'Home', 'Escape', ].includes(e.key) ) return; e.preventDefault(); const bound = (layout.n - 1) * pillarPitch * 0.5; if (e.key === ' ') { if (!read().paused && !media.matches) { held = !held; host.dataset.held = String(held); sync(); } return; } if (e.key === 'Home') { time = 2.1; shocks.length = 0; hoverTarget = hover = 0; update(0, true); draw(); wake(); return; } if (e.key === 'Escape') { shocks.length = 0; hoverTarget = 0; wake(); return; } if (!running()) return; if (e.key === 'Enter') { shock(targetX, targetZ); return; } targetX = stratumClamp( targetX + (e.key === 'ArrowRight' ? pillarPitch : e.key === 'ArrowLeft' ? -pillarPitch : 0), -bound, bound, ); targetZ = stratumClamp( targetZ + (e.key === 'ArrowDown' ? pillarPitch : e.key === 'ArrowUp' ? -pillarPitch : 0), -bound, bound, ); hoverTarget = 1; wake(); } function visibility() { stop(); if (visible && !document.hidden) { draw(); wake(); } } function onLost(e: Event) { e.preventDefault(); lost = true; stop(); delete host.dataset.ready; } function onRestored() { lost = false; mesh.instanceMatrix.needsUpdate = true; sync(); } const size = new ResizeObserver(resize), intersection = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; visibility(); }); host.addEventListener('pointermove', move); host.addEventListener('pointerleave', leave); host.addEventListener('pointerdown', down); host.addEventListener('pointerup', up); host.addEventListener('pointercancel', up); host.addEventListener('keydown', key); document.addEventListener('visibilitychange', visibility); media.addEventListener('change', sync); canvas.addEventListener('webglcontextlost', onLost); canvas.addEventListener('webglcontextrestored', onRestored); function dispose() { if (disposed) return; disposed = true; stop(); size.disconnect(); intersection.disconnect(); host.removeEventListener('pointermove', move); host.removeEventListener('pointerleave', leave); host.removeEventListener('pointerdown', down); host.removeEventListener('pointerup', up); host.removeEventListener('pointercancel', up); host.removeEventListener('keydown', key); document.removeEventListener('visibilitychange', visibility); media.removeEventListener('change', sync); canvas.removeEventListener('webglcontextlost', onLost); canvas.removeEventListener('webglcontextrestored', onRestored); mesh?.dispose(); geometry.dispose(); material.dispose(); floorGeometry.dispose(); floorMaterial.dispose(); pickGeometry.dispose(); pickMaterial.dispose(); sun.shadow.dispose(); scene.clear(); renderer.dispose(); canvas.width = canvas.height = 0; delete host.dataset.ready; } try { seed(); palette(); size.observe(host); intersection.observe(host); resize(); } catch (error) { dispose(); throw error; } return { sync, dispose }; } 19:T1811,export type SequenceMode = 'auto' | 'perlin' | 'radial' | 'diagonal' | 'step'; export type HoverEffect = 'retract' | 'elevate'; export type StratumPalette = { background?: string; pillars?: string; light?: string }; export type Shockwave = { x: number; z: number; born: number }; export const stratumModes = ['perlin', 'radial', 'diagonal', 'step'] as const; export const stratumClamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, Number.isFinite(n) ? n : min)); export const stratumHex = (value: string | undefined, fallback: string) => value && /^#[\da-f]{6}$/i.test(value) ? value : fallback; export const stratumGrid = (n: number) => Math.round(stratumClamp(n, 8, 25)); export const pillarPitch = 0.265; const mix = (a: number, b: number, t: number) => a + (b - a) * t; const fade = (t: number) => t * t * t * (t * (t * 6 - 15) + 10); function hash(x: number, y: number, z: number) { let h = Math.imul(x, 374761393) ^ Math.imul(y, 668265263) ^ Math.imul(z, 2147483647); h = Math.imul(h ^ (h >>> 13), 1274126177); return (h ^ (h >>> 16)) >>> 0; } function gradient(h: number, x: number, y: number, z: number) { const k = h & 15, u = k < 8 ? x : y, v = k < 4 ? y : k === 12 || k === 14 ? x : z; return (k & 1 ? -u : u) + (k & 2 ? -v : v); } /** Deterministic gradient Perlin noise; no per-frame random samples or allocations. */ export function pillarNoise(x: number, y: number, z: number) { const ix = Math.floor(x), iy = Math.floor(y), iz = Math.floor(z), a = x - ix, b = y - iy, c = z - iz, u = fade(a), v = fade(b), w = fade(c); return mix( mix( mix( gradient(hash(ix, iy, iz), a, b, c), gradient(hash(ix + 1, iy, iz), a - 1, b, c), u, ), mix( gradient(hash(ix, iy + 1, iz), a, b - 1, c), gradient(hash(ix + 1, iy + 1, iz), a - 1, b - 1, c), u, ), v, ), mix( mix( gradient(hash(ix, iy, iz + 1), a, b, c - 1), gradient(hash(ix + 1, iy, iz + 1), a - 1, b, c - 1), u, ), mix( gradient(hash(ix, iy + 1, iz + 1), a, b - 1, c - 1), gradient(hash(ix + 1, iy + 1, iz + 1), a - 1, b - 1, c - 1), u, ), v, ), w, ); } function field( mode: Exclude, x: number, z: number, row: number, column: number, t: number, ) { if (mode === 'radial') return ( 0.04 + 0.96 * (0.5 + 0.5 * Math.sin(Math.hypot(x, z) * 3.3 - t * 1.8)) ** 1.7 ); if (mode === 'diagonal') return 0.01 + 0.99 * (0.5 + 0.5 * Math.sin((x + z) * 2.1 - t * 1.8)) ** 3.4; if (mode === 'step') { const beat = Math.floor(t * 0.85), a = ((row + beat) % 6) / 5, b = ((column + Math.floor(beat / 2)) % 5) / 4; return 0.06 + 0.9 * ((row + column + beat) % 2 ? a : b); } const broad = pillarNoise(row * 0.15, column * 0.15, t * 0.23), fine = pillarNoise(row * 0.62 + 17, column * 0.62 + 31, t * 0.19); const detail = (hash(row, 29, column) % 1000) / 1000; return stratumClamp( 0.32 + broad * 0.5 + fine * 0.28 + Math.sin(x * 0.9 + z * 1.1 - t * 0.65) * 0.15 + detail ** 1.5 * 0.52, 0.015, 1, ); } /** Auto blends fields over the last 1.8 seconds of each eight-second phrase. */ export function pillarHeight( mode: SequenceMode, x: number, z: number, row: number, column: number, t: number, maxHeight: number, ) { let value: number; if (mode === 'auto') { const phrase = Math.floor(t / 8), phase = t - phrase * 8, blend = stratumClamp((phase - 6.2) / 1.8, 0, 1), ease = blend * blend * (3 - 2 * blend); value = mix( field(stratumModes[phrase % 4], x, z, row, column, t), field(stratumModes[(phrase + 1) % 4], x, z, row, column, t), ease, ); } else value = field(mode, x, z, row, column, t); const max = stratumClamp(maxHeight, 0.05, 4.5); return 0.05 + stratumClamp(value, 0, 1) * (max - 0.05); } export function createPillarLayout(gridSize: number) { const n = stratumGrid(gridSize), matrices = new Float32Array(n * n * 16), heights = new Float32Array(n * n), velocities = new Float32Array(n * n); for (let row = 0; row < n; row++) for (let col = 0; col < n; col++) { const i = row * n + col, m = i * 16; matrices[m] = matrices[m + 10] = matrices[m + 15] = 1; matrices[m + 5] = heights[i] = 0.05; matrices[m + 12] = (col - (n - 1) / 2) * pillarPitch; matrices[m + 14] = (row - (n - 1) / 2) * pillarPitch; } return { n, matrices, heights, velocities }; } export function interactiveHeight( base: number, x: number, z: number, maxHeight: number, hoverX: number, hoverZ: number, hover: number, effect: HoverEffect, shocks: readonly Shockwave[], time: number, ) { const max = stratumClamp(maxHeight, 0.05, 4.5), distance = Math.hypot(x - hoverX, z - hoverZ), bell = Math.exp((-distance * distance) / 0.66) * hover; let value = effect === 'retract' ? base - (base - 0.05) * bell * 0.98 : base + (max - base) * bell; for (const shock of shocks) { const age = time - shock.born, d = Math.hypot(x - shock.x, z - shock.z) - age * 2.7; value += Math.exp((-d * d) / 0.13) * Math.cos(d * 5.2) * Math.exp(-age * 0.48) * max * 0.48; } return stratumClamp(value, 0.05, max); } /** Only matrix[5] is writable during animation; translation remains (x, 0, z). */ export function springPillar( layout: ReturnType, i: number, target: number, dt: number, maxHeight: number, snap = false, ) { let height = layout.heights[i], velocity = layout.velocities[i]; if (snap) { height = target; velocity = 0; } else { velocity += (target - height) * 76 * dt; velocity *= Math.exp(-dt * 11.5); height += velocity * dt; } const bounded = stratumClamp(height, 0.05, stratumClamp(maxHeight, 0.05, 4.5)); if (bounded !== height) velocity = 0; layout.heights[i] = bounded; layout.velocities[i] = velocity; layout.matrices[i * 16 + 5] = bounded; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"stratum":[{"name":"stratum.tsx","code":"$17"},{"name":"stratum-scene.ts","code":"$18"},{"name":"stratum-math.ts","code":"$19"}]},"initialElement":"stratum","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]