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:T32b0,'use client'; import { useEffect, useId, useMemo, useRef } from 'react'; import * as THREE from 'three'; import { createConstellation, createConstellationParticles, constellationClamp, } from './constellation-math'; import { constellationVertex, constellationFragment, constellationThreadVertex, constellationThreadFragment, } from './constellation-shaders'; export type ConstellationProps = { compact?: boolean; paused?: boolean; speed?: number; intensity?: number; nodes?: number; density?: number; accent?: string; }; export default function Constellation({ compact = false, paused = false, speed = 1, intensity = 1, nodes = 42, density = 1, accent = '#7ddfef', }: ConstellationProps) { const host = useRef(null), canvas = useRef(null), sync = useRef<() => void>(() => {}), id = useId().replace(/:/g, ''); const options = useRef({ nodes, density, speed, intensity, accent, paused }); options.current = { nodes, density, speed, intensity, accent, paused }; const fallback = useMemo(() => createConstellation(42), []); useEffect(() => sync.current(), [nodes, density, speed, intensity, accent, paused]); useEffect(() => { const root = host.current!, surface = canvas.current!, media = matchMedia('(prefers-reduced-motion: reduce)'); let renderer: THREE.WebGLRenderer | null = null, gone = false, lost = false, visible = true, raf = 0, last = 0, time = 0, width = 1, height = 1, count = 0, sampleStart = 0, samples = 0, x = 0, y = 0, tx = 0, ty = 0, presence = 0, targetPresence = 0, held = false; const scene = new THREE.Scene(), camera = new THREE.PerspectiveCamera(38, 1, 0.1, 50); camera.position.z = 4.8; const uniforms = { uTime: { value: 0 }, uIntensity: { value: intensity }, uPixelScale: { value: 1 }, uBurst: { value: 0 }, uHand: { value: new THREE.Vector2() }, uAccent: { value: new THREE.Color(accent) }, }; const material = new THREE.ShaderMaterial({ uniforms, vertexShader: constellationVertex, fragmentShader: constellationFragment, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false, }); const threadMaterial = new THREE.ShaderMaterial({ uniforms, vertexShader: constellationThreadVertex, fragmentShader: constellationThreadFragment, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false, }); const points = new THREE.Points(new THREE.BufferGeometry(), material), threads = new THREE.LineSegments(new THREE.BufferGeometry(), threadMaterial); points.frustumCulled = threads.frustumCulled = false; scene.add(points, threads); let nodeCount = 0, burst = 0; function stop() { cancelAnimationFrame(raf); raf = 0; } function draw() { if (!renderer || gone || lost) return; const o = options.current, desired = Math.round( constellationClamp((compact ? 9000 : 24000) * o.density, 5000, 40000), ), desiredNodes = Math.round(constellationClamp(o.nodes, 20, 120)); if (count !== desired || nodeCount !== desiredNodes) { const data = createConstellationParticles(desiredNodes, desired), geometry = new THREE.BufferGeometry(), filaments = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.BufferAttribute(data.positions, 3)); geometry.setAttribute('aSeed', new THREE.BufferAttribute(data.seeds, 4)); filaments.setAttribute('position', new THREE.BufferAttribute(data.lines, 3)); filaments.setAttribute('aTrace', new THREE.BufferAttribute(data.traces, 2)); points.geometry.dispose(); threads.geometry.dispose(); points.geometry = geometry; threads.geometry = filaments; count = desired; nodeCount = desiredNodes; } uniforms.uTime.value = media.matches ? 0 : time; uniforms.uIntensity.value = constellationClamp(o.intensity, 0, 1.5); uniforms.uHand.value.set(x * presence, y * presence); uniforms.uBurst.value = media.matches ? 0 : burst; uniforms.uAccent.value.set( /^#[\da-f]{6}$/i.test(o.accent) ? o.accent : '#7ddfef', ); renderer.render(scene, camera); root.dataset.ready = 'true'; root.dataset.particles = String(count); root.dataset.sceneTime = uniforms.uTime.value.toFixed(3); root.dataset.sceneBurst = uniforms.uBurst.value.toFixed(3); root.dataset.presence = presence.toFixed(3); } function tick(now: number) { raf = 0; if (gone || lost || !root.isConnected || !visible || document.hidden) return; if (options.current.paused || held || media.matches) { draw(); return; } const elapsed = now - last; if (elapsed < 1000 / 60 - 0.5) { raf = requestAnimationFrame(tick); return; } const dt = Math.min(0.05, elapsed / 1000), a = 1 - Math.exp(-dt * 7); last = now; time += dt * constellationClamp(options.current.speed, 0.2, 2); burst = Math.max(0, burst - dt * 0.7); x += (tx - x) * a; y += (ty - y) * a; presence += (targetPresence - presence) * a; draw(); samples++; if (now - sampleStart >= 750) { root.dataset.fps = ((samples * 1000) / (now - sampleStart)).toFixed(1); sampleStart = now; samples = 0; } raf = requestAnimationFrame(tick); } function wake() { if (!gone && !lost && renderer && !raf && visible && !document.hidden) { last = sampleStart = performance.now(); samples = 0; raf = requestAnimationFrame(tick); } } function resize() { const box = root.getBoundingClientRect(); width = Math.max(1, box.width); height = Math.max(1, box.height); if (!renderer) return; const dpr = Math.min(window.devicePixelRatio || 1, compact ? 1 : 1.5); renderer.setPixelRatio(dpr); renderer.setSize(width, height, false); camera.aspect = width / height; camera.position.z = 4.8 * Math.max(1, 0.85 / camera.aspect); camera.updateProjectionMatrix(); uniforms.uPixelScale.value = (height * dpr) / (2 * Math.tan((38 * Math.PI) / 360)); draw(); wake(); } function changed() { stop(); if (media.matches) x = y = tx = ty = presence = targetPresence = 0; draw(); wake(); } sync.current = changed; function visibility() { stop(); wake(); } function move(event: PointerEvent) { if (options.current.paused || held || media.matches) return; const box = root.getBoundingClientRect(); tx = constellationClamp(((event.clientX - box.left) / width) * 2 - 1, -1, 1); ty = constellationClamp(1 - ((event.clientY - box.top) / height) * 2, -1, 1); targetPresence = 1; wake(); } function activate(event: PointerEvent) { move(event); if (!options.current.paused && !media.matches) { burst = 1; wake(); } } function leave() { targetPresence = 0; wake(); } function up(event: PointerEvent) { if (event.pointerType !== 'mouse') leave(); } function key(event: KeyboardEvent) { if (event.target !== root || media.matches || options.current.paused) return; if (event.key === ' ') { event.preventDefault(); burst = 1; changed(); } else if ( ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home'].includes(event.key) ) { event.preventDefault(); if (event.key === 'Home') leave(); else { tx = constellationClamp( tx + (event.key === 'ArrowLeft' ? -0.25 : event.key === 'ArrowRight' ? 0.25 : 0), -1, 1, ); ty = constellationClamp( ty + (event.key === 'ArrowUp' ? 0.25 : event.key === 'ArrowDown' ? -0.25 : 0), -1, 1, ); targetPresence = 1; wake(); } } } function contextLost(event: Event) { event.preventDefault(); lost = true; stop(); delete root.dataset.ready; } function contextRestored() { lost = false; resize(); wake(); } try { renderer = new THREE.WebGLRenderer({ canvas: surface, alpha: false, antialias: false, powerPreference: 'high-performance', }); renderer.setClearColor('#08080a', 1); renderer.outputColorSpace = THREE.SRGBColorSpace; delete root.dataset.failed; } catch { root.dataset.failed = 'true'; } const size = new ResizeObserver(resize), observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; visibility(); }); surface.addEventListener('webglcontextlost', contextLost); surface.addEventListener('webglcontextrestored', contextRestored); root.addEventListener('pointermove', move); root.addEventListener('pointerdown', activate); root.addEventListener('pointerleave', leave); root.addEventListener('pointerup', up); root.addEventListener('pointercancel', leave); root.addEventListener('keydown', key); media.addEventListener('change', changed); document.addEventListener('visibilitychange', visibility); size.observe(root); observer.observe(root); resize(); return () => { gone = true; stop(); sync.current = () => {}; size.disconnect(); observer.disconnect(); root.removeEventListener('pointermove', move); root.removeEventListener('pointerdown', activate); root.removeEventListener('pointerleave', leave); root.removeEventListener('pointerup', up); root.removeEventListener('pointercancel', leave); root.removeEventListener('keydown', key); media.removeEventListener('change', changed); document.removeEventListener('visibilitychange', visibility); surface.removeEventListener('webglcontextlost', contextLost); surface.removeEventListener('webglcontextrestored', contextRestored); points.geometry.dispose(); threads.geometry.dispose(); material.dispose(); threadMaterial.dispose(); scene.remove(points, threads); renderer?.dispose(); if (!root.isConnected) renderer?.forceContextLoss(); surface.width = surface.height = 0; delete root.dataset.ready; }; }, [compact]); return (

); } const styles = `.constellation{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;outline:none;background:#08080a}.constellation>canvas,.constellation-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:opacity 650ms linear}.constellation>canvas{opacity:0}.constellation[data-ready=true]>canvas{opacity:1}.constellation[data-ready=true] .constellation-fallback{opacity:0}.constellation:focus-visible{outline:1px solid #fff;outline-offset:-5px}@media(prefers-reduced-motion:reduce){.constellation>canvas,.constellation-fallback{transition:none}}`; 18:Tf6c,export const constellationClamp = (n: number, a: number, b: number) => Math.max(a, Math.min(b, Number.isFinite(n) ? n : a)); export type StarNode = { pos: [number, number, number]; // unit sphere [x, y, z] glyph: string; isMajor: boolean; }; export type ConstellationEdge = [number, number]; export type ConstellationGeometry = { nodes: StarNode[]; edges: ConstellationEdge[]; }; const GLYPHS = ['α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ', 'μ']; export function createConstellation(nodeCount = 42): ConstellationGeometry { nodeCount = Math.round(constellationClamp(nodeCount, 20, 120)); const nodes: StarNode[] = []; const goldenRatio = (1 + Math.sqrt(5)) / 2; for (let i = 0; i < nodeCount; i++) { const theta = (2 * Math.PI * i) / goldenRatio; const phi = Math.acos(1 - (2 * (i + 0.5)) / nodeCount); const x = Math.cos(theta) * Math.sin(phi); const y = Math.cos(phi); const z = Math.sin(theta) * Math.sin(phi); const isMajor = i < GLYPHS.length; nodes.push({ pos: [x, y, z], glyph: isMajor ? GLYPHS[i] : '', isMajor, }); } // Find 2 nearest neighbors for each node to build a stable aesthetic graph const edges: ConstellationEdge[] = []; const edgeSet = new Set(); for (let i = 0; i < nodeCount; i++) { const dists: { idx: number; dist: number }[] = []; for (let j = 0; j < nodeCount; j++) { if (i === j) continue; const dx = nodes[i].pos[0] - nodes[j].pos[0]; const dy = nodes[i].pos[1] - nodes[j].pos[1]; const dz = nodes[i].pos[2] - nodes[j].pos[2]; dists.push({ idx: j, dist: Math.hypot(dx, dy, dz) }); } dists.sort((a, b) => a.dist - b.dist); // Connect to 2 closest neighbors for (let k = 0; k < 2; k++) { const neighbor = dists[k].idx; const key = i < neighbor ? `${i}-${neighbor}` : `${neighbor}-${i}`; if (!edgeSet.has(key)) { edgeSet.add(key); edges.push([i, neighbor]); } } } return { nodes, edges }; } /** Seeded spherical dust, core stars and curved geodesic threads. Buffers remain static. */ export function createConstellationParticles(nodes = 42, count = 24000) { const graph = createConstellation(nodes); count = Math.round(constellationClamp(count, 5000, 40000)); const n = count + graph.nodes.length, positions = new Float32Array(n * 3), seeds = new Float32Array(n * 4); let state = 0x53744152; const random = () => { state ^= state << 13; state ^= state >>> 17; state ^= state << 5; return (state >>> 0) / 4294967296; }; for (let i = 0; i < n; i++) { const major = i >= count, theta = random() * Math.PI * 2, y = random() * 2 - 1, r = major ? 1 : i % 4 === 0 ? Math.cbrt(random()) * 0.93 : 0.96 + random() * 0.075, ring = Math.sqrt(1 - y * y), p = major ? graph.nodes[i - count].pos : [Math.cos(theta) * ring * r, y * r, Math.sin(theta) * ring * r]; positions.set(p, i * 3); seeds.set([random() * Math.PI * 2, random(), major ? 1 : 0, random()], i * 4); } const lines: number[] = [], traces: number[] = []; graph.edges.forEach(([a, b], edge) => { const p = graph.nodes[a].pos, q = graph.nodes[b].pos, dot = constellationClamp( p[0] * q[0] + p[1] * q[1] + p[2] * q[2], -0.9999, 0.9999, ), angle = Math.acos(dot), sin = Math.sin(angle); for (let j = 0; j < 20; j++) for (const u of [j / 20, (j + 1) / 20]) { const x = Math.sin((1 - u) * angle) / sin, y = Math.sin(u * angle) / sin; lines.push(p[0] * x + q[0] * y, p[1] * x + q[1] * y, p[2] * x + q[2] * y); traces.push(u, (edge * 0.6180339) % 1); } }); return { positions, seeds, lines: new Float32Array(lines), traces: new Float32Array(traces), edges: graph.edges.length, }; } 19:T880,const motion = ` uniform float uTime;uniform float uBurst;uniform float uIntensity;uniform vec2 uHand; vec3 stellarMotion(vec3 p){ float t=uTime*.12,yaw=t+uHand.x*.35*uIntensity,pitch=.22+sin(t*.7)*.12+uHand.y*.24*uIntensity; p*=1.+sin(p.y*7.-uTime*2.)*.025*uBurst; p.xz=mat2(cos(yaw),-sin(yaw),sin(yaw),cos(yaw))*p.xz; p.yz=mat2(cos(pitch),-sin(pitch),sin(pitch),cos(pitch))*p.yz;return p; }`; export const constellationVertex = ` attribute vec4 aSeed;uniform float uPixelScale;varying float vAlpha;varying float vMajor;varying float vHue; ${motion} void main(){ vec3 p=position;float small=1.-aSeed.z; float drift=sin(uTime*.23+aSeed.x)*.014*small;p+=normalize(position)*drift; p.xz=mat2(cos(drift),-sin(drift),sin(drift),cos(drift))*p.xz; p=stellarMotion(p);vec4 view=modelViewMatrix*vec4(p,1.);gl_Position=projectionMatrix*view; gl_PointSize=clamp(mix(.008+aSeed.y*.01,.052,aSeed.z)*uPixelScale/max(1.,-view.z),1.,11.); float front=smoothstep(-1.05,1.05,p.z); vAlpha=mix(.05,.45,front)*mix(.5,.95,.5+.5*sin(aSeed.x+uTime*(.3+aSeed.w*.4)))+aSeed.z*.65; vMajor=aSeed.z;vHue=front*.6+(position.y+1.)*.2; }`; export const constellationFragment = ` uniform vec3 uAccent;varying float vAlpha;varying float vMajor;varying float vHue; void main(){vec2 p=gl_PointCoord*2.-1.;float r=dot(p,p);if(r>1.)discard; float glow=exp(-r*8.)*.75+exp(-r*2.5)*.08;vec3 ink=mix(vec3(.27,.21,.78),uAccent,clamp(vHue,0.,1.)); ink=mix(ink,vec3(.86,.95,1.),vMajor*.6);gl_FragColor=vec4(ink,glow*vAlpha); #include }`; export const constellationThreadVertex = `attribute vec2 aTrace;varying vec2 vTrace;varying float vDepth;${motion} void main(){vec3 p=stellarMotion(position);vDepth=smoothstep(-1.,1.,p.z);vTrace=aTrace;gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);}`; export const constellationThreadFragment = `uniform float uTime;uniform float uBurst;uniform vec3 uAccent;varying vec2 vTrace;varying float vDepth; void main(){float d=abs(fract(vTrace.x*.6+vTrace.y-uTime*.13)-.5),pulse=exp(-d*d*700.);gl_FragColor=vec4(mix(vec3(.32,.28,.72),uAccent,vDepth),(.025+vDepth*.08+pulse*.45+uBurst*.14)*(.3+vDepth*.7)); #include }`; b:["$","$L16",null,{"initialView":"preview","originalSource":{"constellation":[{"name":"constellation.tsx","code":"$17"},{"name":"constellation-math.ts","code":"$18"},{"name":"constellation-shaders.ts","code":"$19"}]},"initialElement":"constellation","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]