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:Teb2,'use client'; import { useMemo, useCallback } from 'react'; import SphereStage, { sphereClamp, type SphereState } from './sphere-stage'; import { createNexus, projectNexus } from './nexus-math'; export type NexusProps = { compact?: boolean; paused?: boolean; speed?: number; intensity?: number; nodes?: number; connections?: number; strokeWidth?: number; }; const resting: SphereState = { time: 0, tiltX: 0, tiltY: 0, pointerX: 0, pointerY: 0, presence: 0, burst: 0, intensity: 0, small: false, light: false, width: 1, height: 1, radius: 1, }; export default function Nexus({ compact = false, paused = false, speed = 1, intensity = 1, nodes = 72, connections = 1, strokeWidth = 0.65, }: NexusProps) { const full = useMemo(() => createNexus(nodes), [nodes]), small = useMemo(() => createNexus(Math.min(nodes, 48)), [nodes]); const fallback = useMemo( () => projectNexus(compact ? small : full, resting).slice(), [compact, full, small], ); const render = useCallback( (context: CanvasRenderingContext2D, state: SphereState) => { const geometry = state.small ? small : full, data = projectNexus(geometry, state), radius = state.radius, cx = state.width / 2, cy = state.height / 2; context.strokeStyle = state.light ? '#504b46' : '#c9ced3'; context.fillStyle = state.light ? '#403b36' : '#f3f0ea'; context.lineWidth = sphereClamp(strokeWidth, 0.25, 1.5) * (state.small ? 0.85 : 1); for (let side = 0; side < 2; side++) { for (const [a, b] of geometry.edges) { const n = a * 5, m = b * 5, depth = (data[n + 2] + data[m + 2]) * 0.5; if ((depth >= 0 ? 1 : 0) !== side) continue; context.globalAlpha = sphereClamp( (0.17 + (depth + 1) * 0.14) * sphereClamp(connections, 0, 1.5) * (state.light ? 1.25 : 1), 0, 1, ); context.beginPath(); context.moveTo(cx + data[n] * radius, cy - data[n + 1] * radius); context.lineTo(cx + data[m] * radius, cy - data[m + 1] * radius); context.stroke(); } for (let i = 0; i < geometry.nodes.length; i++) { const n = i * 5; if ((data[n + 2] >= 0 ? 1 : 0) !== side) continue; context.globalAlpha = data[n + 4]; context.beginPath(); context.arc( cx + data[n] * radius, cy - data[n + 1] * radius, data[n + 3] * (state.small ? 0.8 : 1.25), 0, Math.PI * 2, ); context.fill(); } } }, [full, small, connections, strokeWidth], ); const geometry = compact ? small : full; return ( {geometry.edges.map(([a, b], i) => ( ))} {geometry.nodes.map((_, i) => ( ))} ); } 18:T1160,import { sphereClamp, smoothSphere, type SphereState } from './sphere-stage'; export type NexusNode = { x: number; y: number; z: number; layer: number; phase: number; }; export type NexusGeometry = { nodes: NexusNode[]; edges: [number, number][]; output: Float32Array; outerCount: number; }; const TAU = Math.PI * 2; /** Three independently turning layers; links are built once in world space. */ export function createNexus(outerCount = 72): NexusGeometry { outerCount = Math.round(sphereClamp(outerCount, 32, 120)); const nodes: NexusNode[] = [], edges: [number, number][] = []; let seed = 0x4e657875; const random = () => { seed ^= seed << 13; seed ^= seed >>> 17; seed ^= seed << 5; return (seed >>> 0) / 4294967296; }; const shell = (count: number, radius: number, layer: number) => { const start = nodes.length; for (let i = 0; i < count; i++) { const y = 1 - (2 * (i + 0.5)) / count, angle = i * Math.PI * (3 - Math.sqrt(5)), r = Math.sqrt(1 - y * y); nodes.push({ x: Math.cos(angle) * r * radius, y: y * radius, z: Math.sin(angle) * r * radius, layer, phase: random() * TAU, }); } const seen = new Set(); for (let i = start; i < nodes.length; i++) { const p = nodes[i], nearest = nodes .map((q, j) => ({ j, d: (q.x - p.x) ** 2 + (q.y - p.y) ** 2 + (q.z - p.z) ** 2, })) .filter((q) => q.j >= start && q.j !== i) .sort((a, b) => a.d - b.d) .slice(0, layer === 0 ? 4 : 3); for (const { j } of nearest) { const a = Math.min(i, j), b = Math.max(i, j), key = `${a}:${b}`; if (!seen.has(key)) { seen.add(key); edges.push([a, b]); } } } }; shell(outerCount, 1, 0); const innerStart = nodes.length; shell(Math.round(outerCount * 0.5), 0.62, 1); for (let i = 0; i < 8; i++) edges.push([ Math.floor((i * outerCount) / 8), innerStart + Math.floor((i * (nodes.length - innerStart)) / 8), ]); // Seeded volume particles make the bright centre, without connecting every pair. for (let i = 0; i < 88; i++) { const y = 1 - 2 * random(), angle = random() * TAU, radius = 0.035 + 0.33 * random() ** 2, r = Math.sqrt(1 - y * y); nodes.push({ x: Math.cos(angle) * r * radius, y: y * radius, z: Math.sin(angle) * r * radius, layer: 2, phase: random() * TAU, }); } return { nodes, edges, output: new Float32Array(nodes.length * 5), outerCount }; } /** The cage gently flattens, then returns, matching the reference's breathing silhouette. */ export function nexusCompression(time: number) { const t = ((time % 24) + 24) % 24; return t < 9 ? 0 : t < 14 ? smoothSphere((t - 9) / 5) : t < 17 ? 1 : t < 23 ? 1 - smoothSphere((t - 17) / 6) : 0; } export function projectNexus(geometry: NexusGeometry, state: SphereState) { const compression = nexusCompression(state.time), flatten = 1 - 0.27 * compression - 0.13 * state.burst * state.intensity; const rx = 0.18 + Math.sin(state.time * 0.11) * 0.17 + state.tiltX, cx = Math.cos(rx), sx = Math.sin(rx); geometry.nodes.forEach((p, i) => { const ry = state.time * (p.layer === 0 ? 0.17 : p.layer === 1 ? -0.21 : 0.34) + state.tiltY, cy = Math.cos(ry), sy = Math.sin(ry); const breathing = 1 + 0.025 * Math.sin(state.time * 0.7 + p.layer), x = p.x * breathing, y = p.y * flatten * breathing, z = p.z * breathing; const x1 = x * cy + z * sy, z1 = -x * sy + z * cy, y1 = y * cx - z1 * sx, z2 = y * sx + z1 * cx; const wake = 1 + 0.035 * state.intensity * state.presence * Math.exp(-((x1 - state.pointerX) ** 2 + (y1 - state.pointerY) ** 2) * 6) * Math.sin(state.time * 3 + p.phase); const perspective = 3.8 / (3.8 - z2 * 0.22), depth = sphereClamp((z2 + 1) * 0.5, 0, 1), n = i * 5; geometry.output[n] = x1 * perspective * wake; geometry.output[n + 1] = y1 * perspective * wake; geometry.output[n + 2] = z2; geometry.output[n + 3] = p.layer === 2 ? 0.65 + depth * 0.5 : 0.6 + depth * 0.8; geometry.output[n + 4] = 0.28 + depth * 0.7; }); return geometry.output; } 19:T2815,'use client'; import { useEffect, useRef, type ReactNode } from 'react'; export type SphereState = { time: number; tiltX: number; tiltY: number; pointerX: number; pointerY: number; presence: number; burst: number; intensity: number; small: boolean; light: boolean; width: number; height: number; radius: number; static?: boolean; }; export type SphereRenderer = ( context: CanvasRenderingContext2D, state: SphereState, ) => void; export const sphereClamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, Number.isFinite(value) ? value : min)); export const smoothSphere = (value: number) => { const t = sphereClamp(value, 0, 1); return t * t * t * (t * (t * 6 - 15) + 10); }; /** Shared input, scheduling and canvas ownership; each sculpture owns its geometry. */ export default function SphereStage({ name, label, compact = false, paused = false, speed = 1, intensity = 1, render, children, overlay, }: { name: string; label: string; compact?: boolean; paused?: boolean; speed?: number; intensity?: number; render: SphereRenderer; children: ReactNode; overlay?: ReactNode; }) { const host = useRef(null), canvas = useRef(null), wakeRef = useRef<() => void>(() => {}); const options = useRef({ paused, speed, intensity, render }); options.current = { paused, speed, intensity, render }; useEffect(() => wakeRef.current(), [paused, speed, intensity, render]); useEffect(() => { const root = host.current!, surface = canvas.current!, context = surface.getContext('2d', { alpha: true }); if (!context) return; const reduced = matchMedia('(prefers-reduced-motion: reduce)'); let frame = 0, last = 0, time = 0, visible = true, gone = false, release = 0, impulse = 0; const hand = { x: 0, y: 0, presence: 0 }, wanted = { ...hand }; const state: SphereState = { time: 0, tiltX: 0, tiltY: 0, pointerX: 0, pointerY: 0, presence: 0, burst: 0, intensity: 1, small: compact, light: false, width: 0, height: 0, radius: 1, }; function draw() { if (!state.width || !state.height) return; state.time = reduced.matches ? 0 : time; state.static = options.current.paused || reduced.matches; state.intensity = sphereClamp(options.current.intensity, 0, 1.4) * (state.small ? 0.8 : 1); state.tiltX = hand.y * 0.5 * state.intensity; state.tiltY = hand.x * 0.65 * state.intensity; state.pointerX = hand.x; state.pointerY = hand.y; state.presence = reduced.matches ? 0 : hand.presence; state.light = document.documentElement.dataset.theme === 'light'; context!.clearRect(0, 0, state.width, state.height); options.current.render(context!, state); context!.globalAlpha = 1; root.dataset.ready = 'true'; root.dataset.sceneTime = state.time.toFixed(3); root.dataset.sceneTilt = `${state.tiltX.toFixed(3)},${state.tiltY.toFixed(3)}`; root.dataset.sceneBurst = state.burst.toFixed(3); root.dataset.quality = state.small ? 'compact' : 'full'; } function tick(now: number) { frame = 0; if (gone || !visible || document.hidden) return; if (options.current.paused || reduced.matches) { if (reduced.matches) { hand.x = hand.y = hand.presence = state.burst = impulse = 0; } draw(); return; } const elapsed = (now - last) / 1000; if (state.small && elapsed < 1 / 30) { frame = requestAnimationFrame(tick); return; } const dt = Math.min(0.05, Math.max(0.001, elapsed)), alpha = 1 - Math.exp(-dt * 8); last = now; time += dt * sphereClamp(options.current.speed, 0.25, 2); hand.x += (wanted.x - hand.x) * alpha; hand.y += (wanted.y - hand.y) * alpha; hand.presence += (wanted.presence - hand.presence) * alpha; impulse *= Math.exp(-dt * 1.2); state.burst += (impulse - state.burst) * alpha; draw(); frame = requestAnimationFrame(tick); } function wake() { if (!gone && !frame && visible && !document.hidden) { last = performance.now(); frame = requestAnimationFrame(tick); } } wakeRef.current = wake; function resize() { const box = root.getBoundingClientRect(); state.width = box.width; state.height = box.height; state.small = compact || box.width < 500; state.radius = Math.min(box.width, box.height) * (compact ? 0.4 : 0.35); const density = Math.min(window.devicePixelRatio || 1, state.small ? 1 : 1.5); surface.width = Math.max(1, Math.round(box.width * density)); surface.height = Math.max(1, Math.round(box.height * density)); context!.setTransform(density, 0, 0, density, 0, 0); draw(); wake(); } function move(event: PointerEvent) { if (options.current.paused || reduced.matches) return; clearTimeout(release); const box = root.getBoundingClientRect(); wanted.x = sphereClamp( (event.clientX - box.left - state.width / 2) / state.radius, -1, 1, ); wanted.y = sphereClamp( -(event.clientY - box.top - state.height / 2) / state.radius, -1, 1, ); wanted.presence = 1; wake(); } const rest = () => { wanted.x = wanted.y = wanted.presence = 0; wake(); }; const activate = (event: PointerEvent) => { if (options.current.paused || reduced.matches) return; move(event); impulse = 1; wake(); }; const up = (event: PointerEvent) => { if (event.pointerType !== 'mouse') { clearTimeout(release); release = window.setTimeout(rest, 650); } }; function key(event: KeyboardEvent) { if ( options.current.paused || reduced.matches || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', ' '].includes( event.key, ) ) return; event.preventDefault(); clearTimeout(release); if (event.key === ' ') { impulse = 1; } else if (event.key === 'Home') { impulse = 0; rest(); } else { wanted.presence = 1; wanted.x = sphereClamp( wanted.x + (event.key === 'ArrowLeft' ? -0.25 : event.key === 'ArrowRight' ? 0.25 : 0), -1, 1, ); wanted.y = sphereClamp( wanted.y + (event.key === 'ArrowUp' ? 0.25 : event.key === 'ArrowDown' ? -0.25 : 0), -1, 1, ); } wake(); } const visibility = () => { cancelAnimationFrame(frame); frame = 0; wake(); }; const theme = () => draw(); const preference = () => { if (reduced.matches) { wanted.x = wanted.y = wanted.presence = hand.x = hand.y = hand.presence = state.burst = impulse = 0; } visibility(); }; const size = new ResizeObserver(resize), intersection = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; visibility(); }); size.observe(root); intersection.observe(root); root.addEventListener('pointermove', move); root.addEventListener('pointerdown', activate); root.addEventListener('pointerup', up); root.addEventListener('pointerleave', rest); root.addEventListener('pointercancel', rest); root.addEventListener('keydown', key); root.addEventListener('blur', rest); document.addEventListener('visibilitychange', visibility); document.addEventListener('motiqo-theme-change', theme); reduced.addEventListener('change', preference); resize(); return () => { gone = true; cancelAnimationFrame(frame); clearTimeout(release); size.disconnect(); intersection.disconnect(); wakeRef.current = () => {}; root.removeEventListener('pointermove', move); root.removeEventListener('pointerdown', activate); root.removeEventListener('pointerup', up); root.removeEventListener('pointerleave', rest); root.removeEventListener('pointercancel', rest); root.removeEventListener('keydown', key); root.removeEventListener('blur', rest); document.removeEventListener('visibilitychange', visibility); document.removeEventListener('motiqo-theme-change', theme); reduced.removeEventListener('change', preference); surface.width = surface.height = 0; delete root.dataset.ready; }; }, [compact]); const extent = compact ? 1.25 : 1 / 0.7; return (

); } const styles = `.sphere-stage{--sphere-ink:#f3f0ea;position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden;touch-action:pan-y;background:radial-gradient(ellipse at 50% 45%,#171717,#0a0a0a 72%);outline:none}.sphere-stage canvas,.sphere-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity 600ms cubic-bezier(.22,1,.36,1)}.sphere-stage canvas{opacity:0}.sphere-fallback{color:var(--sphere-ink)}.sphere-stage[data-ready=true] canvas{opacity:1}.sphere-stage[data-ready=true] .sphere-fallback{opacity:0;pointer-events:none}.sphere-stage:focus-visible{outline:1px solid #fff;outline-offset:-5px}html[data-theme=light] .sphere-stage{--sphere-ink:#4a4540;background:radial-gradient(ellipse at 50% 47%,#fff,#f1eee8 74%)}html[data-theme=light] .sphere-stage:focus-visible{outline-color:#302c28}@media(prefers-reduced-motion:reduce){.sphere-stage canvas,.sphere-fallback{transition:none}}`; b:["$","$L16",null,{"initialView":"preview","originalSource":{"nexus":[{"name":"nexus.tsx","code":"$17"},{"name":"nexus-math.ts","code":"$18"},{"name":"sphere-stage.tsx","code":"$19"}]},"initialElement":"nexus","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]