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:T34d0,'use client'; import { useEffect, useId, useMemo, useRef } from 'react'; import { createGalaxySeeds, galaxyClamp, galaxyHex, galaxyRGB, galaxyPoint, } from './galaxy-math'; import { galaxyVertex, galaxyFragment } from './galaxy-shaders'; export type GalaxyProps = { compact?: boolean; paused?: boolean; count?: number; speed?: number; arms?: number; tilt?: number; glow?: number; coreColor?: string; edgeColor?: string; className?: string; }; export default function Galaxy({ compact = false, paused = false, count = 50000, speed = 1, arms = 7, tilt = 55, glow = 1, coreColor = '#b878ff', edgeColor = '#50d9ff', className = '', }: GalaxyProps) { const root = useRef(null), canvas = useRef(null), sync = useRef<() => void>(() => {}); const options = useRef({ paused, count, speed, arms, tilt, glow, coreColor, edgeColor, }); options.current = { paused, count, speed, arms, tilt, glow, coreColor, edgeColor }; const gradient = useId().replace(/:/g, ''), core = galaxyHex(coreColor, '#b878ff'), edge = galaxyHex(edgeColor, '#50d9ff'); const fallback = useMemo(() => { const data = createGalaxySeeds(4000); return Array.from({ length: 1600 }, (_, i) => galaxyPoint(data, i, 1, arms, tilt)); }, [arms, tilt]); useEffect( () => sync.current(), [paused, count, speed, arms, tilt, glow, coreColor, edgeColor], ); useEffect(() => { const host = root.current!, surface = canvas.current!, media = matchMedia('(prefers-reduced-motion: reduce)'); const gl = surface.getContext('webgl2', { alpha: false, antialias: false, powerPreference: 'high-performance', preserveDrawingBuffer: false, }); let gone = false, lost = false, visible = true, held = false, raf = 0, last = 0, time = 1, width = 0, height = 0, dpr = 1, particleCount = 0, program: WebGLProgram | null = null, buffer: WebGLBuffer | null = null, vao: WebGLVertexArrayObject | null = null; let sampleStart = 0, sampleFrames = 0, x = 0, y = 0, tx = 0, ty = 0; const uniforms: Record = {}; function stop() { cancelAnimationFrame(raf); raf = 0; } function release() { if (!gl) return; if (buffer) gl.deleteBuffer(buffer); if (vao) gl.deleteVertexArray(vao); if (program) gl.deleteProgram(program); buffer = vao = program = null; particleCount = 0; } function init() { if (!gl || gone) return; const shaders: WebGLShader[] = []; try { for (const [type, code] of [ [gl.VERTEX_SHADER, galaxyVertex], [gl.FRAGMENT_SHADER, galaxyFragment], ] as const) { const shader = gl.createShader(type); if (!shader) throw new Error('Shader unavailable'); shaders.push(shader); gl.shaderSource(shader, code); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader) || 'Shader compilation failed'); } program = gl.createProgram(); if (!program) throw new Error('Program unavailable'); shaders.forEach((shader) => gl.attachShader(program!, shader)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program) || 'Program link failed'); buffer = gl.createBuffer(); vao = gl.createVertexArray(); if (!buffer || !vao) throw new Error('Particle buffer unavailable'); gl.bindVertexArray(vao); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 32, 0); gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 32, 16); for (const key of [ 'Resolution', 'Hand', 'Time', 'Arms', 'Tilt', 'Dpr', 'Core', 'Edge', 'Glow', ]) uniforms[key] = gl.getUniformLocation(program, `u${key}`); gl.disable(gl.DEPTH_TEST); gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE); lost = false; delete host.dataset.failed; } catch { release(); host.dataset.failed = 'true'; } finally { shaders.forEach((shader) => gl.deleteShader(shader)); } } function draw() { if (!gl || !program || lost || !width || !height) return; const o = options.current; const desired = Math.round( galaxyClamp(compact ? Math.min(o.count, 18000) : o.count, 4000, 90000), ); gl.bindVertexArray(vao); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); if (desired !== particleCount) { gl.bufferData(gl.ARRAY_BUFFER, createGalaxySeeds(desired), gl.STATIC_DRAW); particleCount = desired; } gl.viewport(0, 0, surface.width, surface.height); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(program); gl.uniform2f(uniforms.Resolution, width, height); gl.uniform2f(uniforms.Hand, media.matches ? 0 : x, media.matches ? 0 : y); gl.uniform1f(uniforms.Time, media.matches ? 1 : time); gl.uniform1f(uniforms.Arms, galaxyClamp(Math.round(o.arms), 3, 12)); gl.uniform1f(uniforms.Tilt, galaxyClamp(o.tilt, 25, 80)); gl.uniform1f(uniforms.Dpr, dpr); gl.uniform1f(uniforms.Glow, galaxyClamp(o.glow, 0.3, 2)); const a = galaxyRGB(galaxyHex(o.coreColor, '#b878ff')), b = galaxyRGB(galaxyHex(o.edgeColor, '#50d9ff')); gl.uniform3f(uniforms.Core, a[0], a[1], a[2]); gl.uniform3f(uniforms.Edge, b[0], b[1], b[2]); gl.drawArrays(gl.POINTS, 0, particleCount); host.dataset.ready = 'true'; host.dataset.particles = String(particleCount); host.dataset.sceneTime = (media.matches ? 1 : time).toFixed(3); host.dataset.sceneTilt = `${x.toFixed(3)},${y.toFixed(3)}`; } function tick(now: number) { raf = 0; if (gone || lost || !host.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, Math.max(0.001, elapsed / 1000)), a = 1 - Math.exp(-dt * 6); last = now; time += dt * galaxyClamp(options.current.speed, 0.2, 2); x += (tx - x) * a; y += (ty - y) * a; draw(); sampleFrames++; if (now - sampleStart >= 750) { host.dataset.fps = ((sampleFrames * 1000) / (now - sampleStart)).toFixed(1); sampleStart = now; sampleFrames = 0; } if (program) raf = requestAnimationFrame(tick); } function wake() { if (!gone && !lost && program && !raf && visible && !document.hidden) { last = performance.now(); sampleStart = last; sampleFrames = 0; raf = requestAnimationFrame(tick); } } function resize() { const box = host.getBoundingClientRect(); width = Math.max(1, box.width); height = Math.max(1, box.height); dpr = Math.min(window.devicePixelRatio || 1, compact ? 1 : 1.5); surface.width = Math.max(1, Math.round(width * dpr)); surface.height = Math.max(1, Math.round(height * dpr)); draw(); wake(); } function changed() { stop(); if (media.matches) x = y = tx = ty = 0; draw(); wake(); } sync.current = changed; function visibility() { stop(); wake(); } function move(event: PointerEvent) { if (options.current.paused || held || media.matches) return; const box = host.getBoundingClientRect(); tx = galaxyClamp(((event.clientX - box.left) / width) * 2 - 1, -1, 1); ty = galaxyClamp(((event.clientY - box.top) / height) * 2 - 1, -1, 1); wake(); } function leave() { tx = ty = 0; wake(); } function up(event: PointerEvent) { if (event.pointerType !== 'mouse') leave(); } function key(event: KeyboardEvent) { if ( event.target !== host || media.matches || options.current.paused || ![' ', 'Home', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes( event.key, ) ) return; event.preventDefault(); if (event.key === ' ') { held = !held; host.dataset.held = String(held); changed(); } else if (event.key === 'Home') leave(); else { tx = galaxyClamp( tx + (event.key === 'ArrowLeft' ? -0.3 : event.key === 'ArrowRight' ? 0.3 : 0), -1, 1, ); ty = galaxyClamp( ty + (event.key === 'ArrowUp' ? -0.3 : event.key === 'ArrowDown' ? 0.3 : 0), -1, 1, ); wake(); } } const onLost = (event: Event) => { event.preventDefault(); lost = true; stop(); delete host.dataset.ready; }; const onRestored = () => { release(); init(); draw(); wake(); }; const size = new ResizeObserver(resize), intersection = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; visibility(); }); surface.addEventListener('webglcontextlost', onLost); surface.addEventListener('webglcontextrestored', onRestored); host.addEventListener('keydown', key); host.addEventListener('pointermove', move); host.addEventListener('pointerdown', move); host.addEventListener('pointerleave', leave); host.addEventListener('pointerup', up); host.addEventListener('pointercancel', leave); media.addEventListener('change', changed); document.addEventListener('visibilitychange', visibility); init(); size.observe(host); intersection.observe(host); resize(); return () => { gone = true; stop(); sync.current = () => {}; size.disconnect(); intersection.disconnect(); host.removeEventListener('keydown', key); host.removeEventListener('pointermove', move); host.removeEventListener('pointerdown', move); host.removeEventListener('pointerleave', leave); host.removeEventListener('pointerup', up); host.removeEventListener('pointercancel', leave); media.removeEventListener('change', changed); document.removeEventListener('visibilitychange', visibility); surface.removeEventListener('webglcontextlost', onLost); surface.removeEventListener('webglcontextrestored', onRestored); release(); surface.width = surface.height = 0; delete host.dataset.ready; }; }, [compact]); return (

); } const styles = `.galaxy{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;isolation:isolate;background:#000;outline:none;container-type:size}.galaxy>canvas,.galaxy-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:opacity 650ms cubic-bezier(.22,1,.36,1)}.galaxy>canvas{opacity:0}.galaxy[data-ready=true]>canvas{opacity:1}.galaxy[data-ready=true] .galaxy-fallback{opacity:0}.galaxy-flare{position:absolute;pointer-events:none;left:50%;top:52%;width:1px;height:88%;transform:translate(-50%,-50%);mix-blend-mode:screen;background:linear-gradient(180deg,transparent,color-mix(in srgb,currentColor 15%,transparent) 17%,#d4c3ff55 44%,#fff 50%,#d4c3ff44 57%,color-mix(in srgb,currentColor 10%,transparent) 82%,transparent);filter:blur(.55px)}.galaxy-flare:before{content:"";position:absolute;inset:-6% -3px;background:inherit;opacity:.35;filter:blur(4px)}.galaxy:focus-visible{outline:1px solid #fff;outline-offset:-5px}@media(prefers-reduced-motion:reduce){.galaxy>canvas,.galaxy-fallback{transition:none}}`; 18:T1034,export const galaxyClamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, Number.isFinite(value) ? value : min)); export const galaxyHex = (value: string, fallback: string) => /^#[\da-f]{6}$/i.test(value) ? value : fallback; export const galaxyRGB = (value: string) => [1, 3, 5].map((i) => parseInt(value.slice(i, i + 2), 16) / 255); const fract = (value: number) => ((value % 1) + 1) % 1; const smooth = (a: number, b: number, value: number) => { const t = galaxyClamp((value - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); }; /** Eight immutable attributes per star. Orbits are evaluated on the GPU. */ export function createGalaxySeeds(count = 50000) { count = Math.round(galaxyClamp(count, 4000, 90000)); const data = new Float32Array(count * 8); let seed = 0x47616c61; const random = () => { seed ^= seed << 13; seed ^= seed >>> 17; seed ^= seed << 5; return (seed >>> 0) / 4294967296; }; const normal = () => Math.sqrt(-2 * Math.log(Math.max(0.00001, random()))) * Math.cos(random() * Math.PI * 2); for (let i = 0; i < count; i++) { const n = i * 8; data[n] = random(); data[n + 1] = random() * Math.PI * 2; data[n + 2] = normal(); data[n + 3] = normal(); data[n + 4] = random(); data[n + 5] = random(); data[n + 6] = random(); data[n + 7] = random() * Math.PI * 2; } return data; } /** CPU twin for the static fallback and projection/continuity checks. */ export function galaxyPoint( data: Float32Array, index: number, time = 1, arms = 7, tilt = 55, handX = 0, handY = 0, ) { const n = index * 8, kind = data[n + 4], size = data[n + 5], core = kind < 0.16, field = kind > 0.994; const star = kind > 0.989 && !field, dust = kind > 0.68 && !core && !star && !field; const flow = fract( Math.pow(data[n], 0.72) - time * (dust ? 0.018 + size * 0.018 : 0.022), ); const radius = core ? Math.pow(data[n], 1.8) * 0.24 : star ? 0.075 + Math.pow(data[n], 0.72) * 0.89 : 0.075 + flow * 0.89; const lane = Math.floor(data[n + 6] * galaxyClamp(Math.round(arms), 3, 12)); const scatter = dust ? 0.08 + size * 0.14 : star ? 0.3 : 0.003 + radius * 0.004; let angle = (lane * Math.PI * 2) / galaxyClamp(Math.round(arms), 3, 12) + radius * 12.8 + data[n + 2] * scatter + data[n + 1] * 0.025; if (core || field) angle = data[n + 1]; angle += core ? time * (0.18 + 0.024 / (0.18 + radius)) : star ? time * (0.14 + (size * 0.25) / (0.3 + radius)) : time * 0.08; if (dust) angle += Math.sin(time * (0.6 + size) + data[n + 7]) * 0.08; const drift = star ? 0.015 + size * 0.025 : dust ? 0.009 : 0.0015, r = radius + Math.sin(time * (0.7 + size) + data[n + 7]) * drift; let x = Math.cos(angle) * r, y = Math.sin(angle) * r, z = data[n + 3] * (core ? 0.025 : star ? 0.018 + size * 0.035 : dust ? 0.018 : 0.003); const turn = handX * 0.2, nx = x * Math.cos(turn) + z * Math.sin(turn); z = -x * Math.sin(turn) + z * Math.cos(turn); x = nx; const pitch = (galaxyClamp(tilt, 25, 80) * Math.PI) / 180 + handY * 0.15, ny = y * Math.cos(pitch) - z * Math.sin(pitch), depth = y * Math.sin(pitch) + z * Math.cos(pitch); const perspective = 1 / (1 + depth * 0.18), spin = -0.12; let px = (x * Math.cos(spin) - ny * Math.sin(spin)) * perspective, py = (x * Math.sin(spin) + ny * Math.cos(spin)) * perspective; if (field) { px = Math.cos(data[n + 1]) * data[n] * 1.3; py = Math.sin(data[n + 1]) * data[n]; } const twinkle = 0.72 + 0.28 * Math.sin(data[n + 7] + time * (0.7 + size)); const pulseRadius = 1 - fract(time * 0.13 + lane * 0.21), pulse = Math.exp(-(((radius - pulseRadius) / 0.025) ** 2)) * smooth(0.04, 0.12, pulseRadius) * (1 - smooth(0.86, 1, pulseRadius)) * (lane % 3 === 0 ? 0 : 1); const fade = core || star || field ? 1 : smooth(0, 0.025, flow) * (1 - smooth(0.965, 1, flow)); return { x: px, y: py, depth, radius, angle, kind, size, twinkle, pulse, pulseRadius, fade, }; } 19:Td18,export const galaxyVertex = `#version 300 es precision highp float; layout(location=0) in vec4 aOrbit; layout(location=1) in vec4 aStyle; uniform vec2 uResolution; uniform vec2 uHand; uniform float uTime; uniform float uArms; uniform float uTilt; uniform float uDpr; uniform vec3 uCore; uniform vec3 uEdge; out vec3 vColor; out float vKind; out float vLight; void main(){ float kind=aStyle.x,size=aStyle.y; bool core=kind<.16,field=kind>.994,star=kind>.989&&!field,dust=kind>.68&&!core&&!star&&!field; float flow=fract(pow(aOrbit.x,.72)-uTime*(dust?.018+size*.018:.022)); float radius=core?pow(aOrbit.x,1.8)*.24:star?.075+pow(aOrbit.x,.72)*.89:.075+flow*.89; float lane=floor(aStyle.z*uArms),scatter=dust?.08+size*.14:star?.3:.003+radius*.004; float angle=lane*6.28318530718/uArms+radius*12.8+aOrbit.z*scatter+aOrbit.y*.025; if(core||field)angle=aOrbit.y; angle+=core?uTime*(.18+.024/(.18+radius)):star?uTime*(.14+size*.25/(.3+radius)):uTime*.08; if(dust)angle+=sin(uTime*(.6+size)+aStyle.w)*.08; float drift=star?.015+size*.025:dust?.009:.0015,r=radius+sin(uTime*(.7+size)+aStyle.w)*drift; vec3 p=vec3(cos(angle)*r,sin(angle)*r,aOrbit.w*(core?.025:star?.018+size*.035:dust?.018:.003)); float turn=uHand.x*.2; p.xz=mat2(cos(turn),-sin(turn),sin(turn),cos(turn))*p.xz; float pitch=radians(uTilt)+uHand.y*.15; p.yz=mat2(cos(pitch),sin(pitch),-sin(pitch),cos(pitch))*p.yz; float perspective=1./(1.+p.z*.18),spin=-.12; vec2 projected=mat2(cos(spin),sin(spin),-sin(spin),cos(spin))*p.xy*perspective; if(field)projected=vec2(cos(aOrbit.y)*aOrbit.x*1.3,sin(aOrbit.y)*aOrbit.x); float scale=min(uResolution.x*.44,uResolution.y*.72); vec2 px=uResolution*vec2(.5,.52)+projected*scale; gl_Position=vec4(px.x/uResolution.x*2.-1.,1.-px.y/uResolution.y*2.,0.,1.); float sprite=field?mix(4.,19.,size):star?mix(4.,9.,size):kind<.035?mix(13.,30.,size):dust?mix(2.,size>.72?14.:4.,size):mix(2.4,3.2,size); gl_PointSize=uDpr*clamp(scale/300.,.45,1.5)*sprite; float outer=smoothstep(.12,.95,radius),cyan=.15+.85*(.5+.5*cos(angle+.55)); vColor=mix(uCore,mix(vec3(.12,.17,1.),uEdge,cyan),outer); if(core)vColor=mix(vec3(1.,.93,1.),uCore,smoothstep(0.,.13,radius)); if(kind>.989)vColor=field?vec3(.55,.65,.9):uEdge; float twinkle=.72+.28*sin(aStyle.w+uTime*(.7+size)); float pulseRadius=1.-fract(uTime*.13+lane*.21); float pulse=exp(-pow((radius-pulseRadius)/.025,2.))*smoothstep(.04,.12,pulseRadius)*(1.-smoothstep(.86,1.,pulseRadius))*(mod(lane,3.)<.5?0.:1.); float fade=core||star||field?1.:smoothstep(0.,.025,flow)*(1.-smoothstep(.965,1.,flow)); vLight=twinkle*(1.-smoothstep(.85,1.04,radius))*fade;vKind=kind; if(!core&&!dust&&!star&&!field){vLight*=1.+pulse*4.;vColor=mix(vColor,vec3(.8,.85,1.),pulse*.55);} if(core)vLight*=1.+sin(uTime*1.2)*.07; if(field)vLight=(.3+.7*pow(.5+.5*sin(aStyle.w+uTime*.45),4.))*.065; }`; export const galaxyFragment = `#version 300 es precision highp float; in vec3 vColor; in float vKind; in float vLight; uniform float uGlow; out vec4 outColor; void main(){ vec2 p=gl_PointCoord*2.-1.;float r2=dot(p,p);if(r2>1.)discard; float light=vKind>.994?exp(-r2*3.)*.4:vKind>.989?exp(-r2*5.)*.95+exp(-r2*2.)*.12:vKind<.035?exp(-r2*3.)*.03:vKind>.68?exp(-r2*6.)*.14:exp(-r2*10.)*.48+exp(-r2*4.)*.012; float alpha=light*vLight*uGlow;outColor=vec4(vColor*alpha,alpha); }`; b:["$","$L16",null,{"initialView":"preview","originalSource":{"galaxy":[{"name":"galaxy.tsx","code":"$17"},{"name":"galaxy-math.ts","code":"$18"},{"name":"galaxy-shaders.ts","code":"$19"}]},"initialElement":"galaxy","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]