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:T2f4e,'use client'; import { useEffect, useId, useMemo, useRef } from 'react'; import { createLumaSeeds, lumaClamp, lumaHex, lumaRGB, lumaPoint } from './luma-math'; import { lumaVertex, lumaFragment } from './luma-shaders'; export type LumaProps = { name?: string; message?: string; compact?: boolean; paused?: boolean; count?: number; speed?: number; amplitude?: number; glow?: number; warmColor?: string; coolColor?: string; className?: string; }; export default function Luma({ name = 'Robert', message = 'How can I help you?', compact = false, paused = false, count = 16000, speed = 1, amplitude = 1, glow = 1, warmColor = '#f47c6b', coolColor = '#9e8cff', className = '', }: LumaProps) { const root = useRef(null), panel = useRef(null), canvas = useRef(null), sync = useRef<() => void>(() => {}); const options = useRef({ paused, count, speed, amplitude, glow, warmColor, coolColor, }); options.current = { paused, count, speed, amplitude, glow, warmColor, coolColor }; const gradient = useId().replace(/:/g, ''), warm = lumaHex(warmColor, '#f47c6b'), cool = lumaHex(coolColor, '#9e8cff'); const fallback = useMemo(() => { const data = createLumaSeeds(2000); return Array.from({ length: 720 }, (_, i) => lumaPoint(data, i, 1, amplitude)); }, [amplitude]); useEffect( () => sync.current(), [paused, count, speed, amplitude, glow, warmColor, coolColor], ); useEffect(() => { const host = root.current!, frame = panel.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; 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, lumaVertex], [gl.FRAGMENT_SHADER, lumaFragment], ] 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, 24, 0); gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 24, 16); for (const key of [ 'Resolution', 'Time', 'Amplitude', 'Dpr', 'Warm', 'Cool', '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( lumaClamp(compact ? Math.min(o.count, 10000) : o.count, 2000, 32000), ); gl.bindVertexArray(vao); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); if (desired !== particleCount) { gl.bufferData(gl.ARRAY_BUFFER, createLumaSeeds(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.uniform1f(uniforms.Time, media.matches ? 1 : time); gl.uniform1f(uniforms.Amplitude, lumaClamp(o.amplitude, 0, 1.8)); gl.uniform1f(uniforms.Dpr, dpr); gl.uniform1f(uniforms.Glow, lumaClamp(o.glow, 0.3, 2)); const a = lumaRGB(lumaHex(o.warmColor, '#f47c6b')), b = lumaRGB(lumaHex(o.coolColor, '#9e8cff')); gl.uniform3f(uniforms.Warm, a[0], a[1], a[2]); gl.uniform3f(uniforms.Cool, b[0], b[1], b[2]); gl.drawArrays(gl.POINTS, 0, particleCount); host.dataset.ready = 'true'; host.dataset.particles = String(particleCount); host.dataset.waveTime = (media.matches ? 1 : time).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; } // 60Hz target, also on 120Hz displays. Mobile keeps this cadence. 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)); last = now; time += dt * lumaClamp(options.current.speed, 0.25, 2); 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, Math.min(box.width * 0.86, box.height * 0.64, 380)); height = Math.max(width * 2, box.height * 1.08); frame.style.width = `${width}px`; frame.style.height = `${height}px`; 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(); draw(); wake(); } sync.current = changed; function visibility() { stop(); wake(); } function key(event: KeyboardEvent) { if ( event.target !== frame || event.key !== ' ' || media.matches || options.current.paused ) return; event.preventDefault(); held = !held; host.dataset.held = String(held); changed(); } 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); frame.addEventListener('keydown', key); 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(); frame.removeEventListener('keydown', key); 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 = `.luma{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;background:#050505;container-type:size}.luma-panel{position:absolute;top:6%;left:50%;transform:translateX(-50%);isolation:isolate;width:min(86cqw,64cqh,380px);height:max(min(172cqw,128cqh,760px),108cqh);aspect-ratio:.5;background:#000;border:1px solid #ffffff24;border-radius:clamp(18px,8cqw,34px);overflow:hidden;outline:none;container-type:inline-size}.luma-panel>canvas,.luma-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:opacity 650ms cubic-bezier(.22,1,.36,1)}.luma-panel>canvas{opacity:0}.luma[data-ready=true] canvas{opacity:1}.luma[data-ready=true] .luma-fallback{opacity:0}.luma-greeting{position:absolute;z-index:2;top:34%;left:0;right:0;transform:translateY(-50%);margin:0;padding:0 3%;text-align:center;font-family:inherit;font-size:clamp(12px,7.2cqw,29px);font-weight:300;line-height:1.25;letter-spacing:-.035em;pointer-events:none}.luma-greeting span{display:block;color:#f4f4f6;white-space:nowrap}.luma-greeting span:first-child{color:#99999e;margin-bottom:.12em}.luma-panel:focus-visible{outline:1px solid #fff;outline-offset:4px}html[data-theme=light] .luma{background:#f6f5f3}@media(prefers-reduced-motion:reduce){.luma-panel>canvas,.luma-fallback{transition:none}}`; 18:Tc1b,export const lumaClamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, Number.isFinite(value) ? value : min)); export const lumaHex = (value: string, fallback: string) => /^#[\da-f]{6}$/i.test(value) ? value : fallback; export const lumaRGB = (value: string) => [1, 3, 5].map((i) => parseInt(value.slice(i, i + 2), 16) / 255); /** A static, seeded buffer: position is advected entirely in the vertex shader. */ export function createLumaSeeds(count = 16000) { count = Math.round(lumaClamp(count, 2000, 32000)); const data = new Float32Array(count * 6); let seed = 0x4c756d61; const random = () => { seed ^= seed << 13; seed ^= seed >>> 17; seed ^= seed << 5; return (seed >>> 0) / 4294967296; }; for (let i = 0; i < count; i++) { const n = i * 6; data[n] = random(); data[n + 1] = Math.sqrt(-2 * Math.log(Math.max(0.00001, random()))) * Math.cos(random() * Math.PI * 2); data[n + 2] = random() * 2 - 1; data[n + 3] = random() * Math.PI * 2; data[n + 4] = random(); data[n + 5] = random(); } return data; } const fract = (value: number) => ((value % 1) + 1) % 1; const smooth = (a: number, b: number, value: number) => { const t = lumaClamp((value - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); }; export function lumaWave(u: number, time: number, amplitude = 1) { return ( (Math.sin(u * 5.2 - time * 1.9) * 0.07 + Math.sin(u * 2.8 + time * 0.74) * 0.025 + Math.sin(u * 8.3 + time * 1.13) * 0.012) * lumaClamp(amplitude, 0, 1.8) ); } /** Detached grains inherit the emitter's position and velocity at birth, not its current curve. */ export function lumaPoint(data: Float32Array, index: number, time = 1, amplitude = 1) { const n = index * 6, kind = data[n + 4], phase = data[n + 3], depth = data[n + 2], size = data[n + 5], flow = 0.035 + size * 0.04; let u = fract(data[n] + time * flow), y = 0, fade = 1, age = 0, birth = time; if (kind < 0.56) { const width = 0.0015 + 0.0055 * (0.5 + 0.5 * Math.sin(u * 7 - time * 1.4)) ** 2; y = lumaWave(u, time, amplitude) + data[n + 1] * width + Math.sin(phase + time * (1.3 + size)) * width * 0.7; } else { const life = 0.85 + size * 1.35, cycle = fract(time / life + phase / (Math.PI * 2)); age = cycle * life; birth = time - age; const source = fract(data[n] + birth * flow), emitter = lumaWave(source, birth, amplitude); const velocity = (lumaWave(source + flow * 0.01, birth + 0.01, amplitude) - emitter) / 0.01; const curl = Math.sin(phase + age * (2.5 + size * 2)); u = fract(source + age * flow + depth * age * 0.012 + curl * age * 0.006); y = emitter + data[n + 1] * 0.003 + velocity * age * 0.32 - age * (0.025 + size * 0.05) + depth * age * 0.018 + curl * age * 0.012; fade = smooth(0, 0.08, cycle) * (1 - smooth(0.35, 1, cycle)); } fade *= Math.max(0, Math.min(1, u / 0.045, (1 - u) / 0.045)); return { u, y, kind, size, fade, age, birth }; } 19:T81e,export const lumaVertex = `#version 300 es precision highp float; layout(location=0) in vec4 aSeed; layout(location=1) in vec2 aStyle; uniform vec2 uResolution; uniform float uTime; uniform float uAmplitude; uniform float uDpr; uniform vec3 uWarm; uniform vec3 uCool; out vec3 vColor; out float vKind; out float vFade; float wave(float u,float t){return (sin(u*5.2-t*1.9)*.07+sin(u*2.8+t*.74)*.025+sin(u*8.3+t*1.13)*.012)*uAmplitude;} void main(){ float kind=aStyle.x,size=aStyle.y,flow=.035+size*.04; float u=fract(aSeed.x+uTime*flow),y=0.,fade=1.; if(kind<.56){ float pinch=.5+.5*sin(u*7.-uTime*1.4),width=.0015+.0055*pinch*pinch; y=wave(u,uTime)+aSeed.y*width+sin(aSeed.w+uTime*(1.3+size))*width*.7; }else{ float life=.85+size*1.35,cycle=fract(uTime/life+aSeed.w/6.28318530718),age=cycle*life,birth=uTime-age; float source=fract(aSeed.x+birth*flow),emitter=wave(source,birth); float velocity=(wave(source+flow*.01,birth+.01)-emitter)/.01; float curl=sin(aSeed.w+age*(2.5+size*2.)); u=fract(source+age*flow+aSeed.z*age*.012+curl*age*.006); y=emitter+aSeed.y*.003+velocity*age*.32-age*(.025+size*.05)+aSeed.z*age*.018+curl*age*.012; fade=smoothstep(0.,.08,cycle)*(1.-smoothstep(.35,1.,cycle)); } vec2 px=vec2(u*uResolution.x,uResolution.y*.53+y*uResolution.x); gl_Position=vec4(px.x/uResolution.x*2.-1.,1.-px.y/uResolution.y*2.,0.,1.); float scale=clamp(uResolution.x/400.,.45,1.15); gl_PointSize=uDpr*scale*(kind<.56?mix(2.4,4.,size):kind<.91?mix(3.,6.5,size):mix(16.,32.,size)); float blend=smoothstep(.12,.88,u); vColor=mix(uWarm,uCool,blend);vKind=kind; vFade=fade*min(1.,min(u/.045,(1.-u)/.045)); }`; export const lumaFragment = `#version 300 es precision highp float; in vec3 vColor; in float vKind; in float vFade; 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<.56?exp(-r2*18.)*.28+exp(-r2*3.5)*.02:vKind<.91?exp(-r2*8.)*.26:exp(-r2*3.2)*.014; float alpha=light*vFade*uGlow; outColor=vec4(vColor*alpha,alpha); }`; b:["$","$L16",null,{"initialView":"preview","originalSource":{"luma":[{"name":"luma.tsx","code":"$17"},{"name":"luma-math.ts","code":"$18"},{"name":"luma-shaders.ts","code":"$19"}]},"initialElement":"luma","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]