50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T450f,'use client'; import { useEffect, useRef, type CSSProperties } from 'react'; export interface AuroraProps { colorStops?: string[]; amplitude?: number; blend?: number; speed?: number; time?: number; height?: number; scale?: number; glow?: number; brightness?: number; layers?: number; direction?: 'top' | 'bottom'; mouseInteraction?: boolean; intro?: boolean; opacity?: number; lightMode?: boolean; paused?: boolean; dpr?: number; className?: string; style?: CSSProperties; } type Settings = { stops: string[]; amplitude: number; blend: number; speed: number; time?: number; height: number; scale: number; glow: number; brightness: number; layers: number; flip: number; mouseInteraction: boolean; intro: boolean; opacity: number; lightMode: boolean; paused: boolean; dpr?: number; }; type Program = { program: WebGLProgram; uniforms: Record }; const MAX_STOPS = 5; const MAX_LAYERS = 3; const INTRO_SECONDS = 2.4; const VERTEX = `#version 300 es in vec2 aPosition; void main() { gl_Position = vec4(aPosition, 0.0, 1.0); }`; const FRAGMENT = `#version 300 es precision highp float; precision highp int; uniform vec2 uResolution; uniform float uTime; uniform vec3 uStops[${MAX_STOPS}]; uniform int uStopCount; uniform float uAmplitude; uniform float uBlend; uniform float uHeight; uniform float uScale; uniform float uGlow; uniform float uBrightness; uniform int uLayers; uniform float uFlip; uniform vec3 uPointer; uniform float uReveal; uniform float uOpacity; uniform float uLightMode; out vec4 outColor; vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0)); vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0); m = m * m; m = m * m; vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } float smootherstep(float edge0, float edge1, float x) { float t = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); } vec3 oklabToLinear(vec3 c) { float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z; float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z; float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z; l = l * l * l; m = m * m * m; s = s * s * s; return vec3( 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s ); } vec3 toSrgb(vec3 c) { c = clamp(c, 0.0, 1.0); return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c)); } vec3 ramp(float t) { float x = clamp(t, 0.0, 1.0) * float(uStopCount - 1); int i = int(min(floor(x), float(uStopCount - 2))); float f = x - float(i); f = f * f * (3.0 - 2.0 * f); vec3 lch = mix(uStops[i], uStops[i + 1], f); lch.x = mix(lch.x, min(lch.x, 0.7), uLightMode); return toSrgb(oklabToLinear(vec3(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z)))); } float hash(vec2 p) { p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); } void main() { vec2 frag = gl_FragCoord.xy; float y = 1.0 - frag.y / uResolution.y; y = mix(y, 1.0 - y, uFlip); float u = frag.x / uResolution.x; float X = (frag.x - uResolution.x * 0.5) / uResolution.y; float t = uTime; float reach = uPointer.z * exp(-pow((X - uPointer.x) / 0.38, 2.0)); vec3 glow = vec3(0.0); float cover = 0.0; for (int k = 0; k < ${MAX_LAYERS}; k++) { if (k >= uLayers) break; float layer = float(k); float seed = layer * 13.7; float pace = t * (1.0 - layer * 0.18); float warp = snoise(vec2(X * 0.45 * uScale + pace * 0.02 + seed, pace * 0.05 + seed)); float wave = snoise(vec2(X * 0.75 * uScale + warp * 0.35 - pace * 0.03 + seed, pace * 0.07 - seed)) * 0.72 + snoise(vec2(X * 1.6 * uScale + warp * 0.5 + pace * 0.04 - seed, pace * 0.1 + seed * 0.5)) * 0.28; float hem = uHeight + layer * 0.07 + wave * 0.15 * uAmplitude; hem += reach * 0.08 * (layer < 0.5 ? 1.0 : 0.4); hem = mix(-0.25, hem, uReveal); float soft = (0.04 + uBlend * 0.16) * (1.0 + layer * 0.9); float rise = hem - y; float low = -soft - uGlow * 0.14; float high = 0.26 + soft * 0.6; float body = pow(smootherstep(low, high, rise), 1.5 + uGlow * 0.6); float lobes = 0.86 + 0.14 * snoise(vec2(X * 0.9 * uScale - pace * 0.025 + seed, y * 0.3 + pace * 0.04)); float alpha = body * lobes * (layer < 0.5 ? 1.0 : 0.32 / layer); alpha = clamp(alpha * (1.0 + reach * 0.25 * smootherstep(0.9, 0.0, abs(y - hem))), 0.0, 1.0); vec3 tint = ramp(u + 0.05 * sin(pace * 0.08 + layer * 2.3) + layer * 0.1 + max(rise, 0.0) * 0.05); glow = 1.0 - (1.0 - glow) * (1.0 - tint * alpha); cover = 1.0 - (1.0 - cover) * (1.0 - alpha); } float fade = smootherstep(0.0, 0.7, uReveal) * uOpacity; float strength = clamp(uBrightness, 0.0, 2.0); glow *= fade * min(strength, 1.0); cover *= fade * min(strength, 1.0); glow = 1.0 - pow(1.0 - glow, vec3(max(strength, 1.0))); float dither = (hash(frag) - 0.5) / 255.0; if (uLightMode > 0.5) { vec3 tint = cover > 0.0001 ? glow / cover : vec3(0.0); cover *= smootherstep(0.0, 0.25, cover); float alpha = cover * 0.7; outColor = vec4(tint * alpha + dither, clamp(alpha + dither, 0.0, 1.0)); return; } outColor = vec4(glow + dither, clamp(cover + dither, 0.0, 1.0)); }`; const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)); const toOklch = (rgb: number[]): number[] => { const [r, g, b] = rgb.map(c => (c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4))); const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b); const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b); const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b); const lab = [ 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s ]; return [lab[0], Math.hypot(lab[1], lab[2]), Math.atan2(lab[2], lab[1])]; }; const unwrapHues = (stops: number[][]): number[][] => { const known = stops.findIndex(stop => stop[1] > 0.02); const anchor = known === -1 ? 0 : stops[known][2]; let previous = anchor; return stops.map(stop => { let hue = stop[1] > 0.02 ? stop[2] : previous; while (hue - previous > Math.PI) hue -= Math.PI * 2; while (hue - previous < -Math.PI) hue += Math.PI * 2; previous = hue; return [stop[0], stop[1], hue]; }); }; const compile = (gl: WebGL2RenderingContext, type: number, source: string) => { const shader = gl.createShader(type); if (!shader) return null; gl.shaderSource(shader, source); gl.compileShader(shader); if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader; gl.deleteShader(shader); return null; }; const link = (gl: WebGL2RenderingContext): Program | null => { const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX); const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT); const program = gl.createProgram(); if (!vertex || !fragment || !program) return null; gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.bindAttribLocation(program, 0, 'aPosition'); gl.linkProgram(program); gl.deleteShader(vertex); gl.deleteShader(fragment); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { gl.deleteProgram(program); return null; } const uniforms: Record = {}; const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); for (let i = 0; i < count; i++) { const info = gl.getActiveUniform(program, i); if (info) uniforms[info.name.replace('[0]', '')] = gl.getUniformLocation(program, info.name); } return { program, uniforms }; }; const Aurora = ({ colorStops = ['#5227FF', '#7cff67', '#5227FF'], amplitude = 1, blend = 0.5, speed = 1, time, height = 0.45, scale = 1, glow = 0.6, brightness = 1, layers = 1, direction = 'top', mouseInteraction = true, intro = true, opacity = 1, lightMode = false, paused = false, dpr, className = '', style }: AuroraProps) => { const containerRef = useRef(null); const canvasRef = useRef(null); const wakeRef = useRef<(() => void) | null>(null); const stops = (Array.isArray(colorStops) ? colorStops : []).filter(Boolean).map(String).slice(0, MAX_STOPS); const settings: Settings = { stops: stops.length >= 2 ? stops : stops.length === 1 ? [stops[0], stops[0]] : ['#5227FF', '#7cff67'], amplitude: Math.max(0, amplitude), blend: clamp(blend, 0, 1), speed, time, height: clamp(height, 0, 1), scale: Math.max(0.1, scale), glow: Math.max(0, glow), brightness: Math.max(0, brightness), layers: clamp(Math.round(layers), 1, MAX_LAYERS), flip: direction === 'bottom' ? 1 : 0, mouseInteraction, intro, opacity: clamp(opacity, 0, 1), lightMode, paused, dpr }; const settingsRef = useRef(settings); settingsRef.current = settings; useEffect(() => { const container = containerRef.current; const canvas = canvasRef.current; const gl = canvas?.getContext('webgl2', { alpha: true, premultipliedAlpha: true, antialias: false, depth: false, stencil: false }); if (!container || !canvas || !gl) return undefined; const program = link(gl); if (!program) return undefined; const u = program.uniforms; const buffer = gl.createBuffer(); const vao = gl.createVertexArray(); gl.bindVertexArray(vao); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); const probe = document.createElement('canvas').getContext('2d', { willReadFrequently: true }); const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; const cache = new Map(); const parse = (value: string): number[] => { const cached = cache.get(value); if (cached) return cached; let rgb = [1, 1, 1]; if (probe) { probe.clearRect(0, 0, 1, 1); probe.fillStyle = '#ffffff'; probe.fillStyle = value; probe.fillRect(0, 0, 1, 1); const [r, g, b] = probe.getImageData(0, 0, 1, 1).data; rgb = [r / 255, g / 255, b / 255]; } cache.set(value, rgb); return rgb; }; const palette = new Float32Array(MAX_STOPS * 3); const view = { width: 1, height: 1 }; const pointer = { x: 0, y: 0, inside: false }; const state = { clock: 0, px: 0, py: 0.5, reach: 0, reveal: settingsRef.current.intro && !reduce ? 0 : 1 }; let raf = 0; let last = 0; let visible = true; const render = () => { const s = settingsRef.current; unwrapHues(s.stops.map(value => toOklch(parse(value)))).forEach((stop, index) => palette.set(stop, index * 3)); const reveal = state.reveal; gl.viewport(0, 0, canvas.width, canvas.height); gl.useProgram(program.program); gl.bindVertexArray(vao); gl.uniform2f(u.uResolution, canvas.width, canvas.height); gl.uniform1f(u.uTime, s.time !== undefined ? s.time * s.speed * 0.1 : state.clock); gl.uniform3fv(u.uStops, palette); gl.uniform1i(u.uStopCount, s.stops.length); gl.uniform1f(u.uAmplitude, s.amplitude); gl.uniform1f(u.uBlend, s.blend); gl.uniform1f(u.uHeight, s.height); gl.uniform1f(u.uScale, s.scale); gl.uniform1f(u.uGlow, s.glow); gl.uniform1f(u.uBrightness, s.brightness); gl.uniform1i(u.uLayers, s.layers); gl.uniform1f(u.uFlip, s.flip); gl.uniform3f(u.uPointer, state.px, state.py, state.reach); gl.uniform1f(u.uReveal, 1 - Math.pow(1 - reveal, 3)); gl.uniform1f(u.uOpacity, s.opacity); gl.uniform1f(u.uLightMode, s.lightMode ? 1 : 0); gl.drawArrays(gl.TRIANGLES, 0, 3); }; const frame = (now: number) => { raf = 0; if (!visible || document.hidden) return; const s = settingsRef.current; const dt = last ? clamp((now - last) / 1000, 0.0005, 0.05) : 1 / 60; last = now; if (s.paused) { state.reveal = 1; render(); last = 0; return; } const motion = reduce ? 0 : 1; state.clock += dt * s.speed * motion; const engaged = s.mouseInteraction && pointer.inside && !reduce; const follow = 1 - Math.exp(-dt / 0.6); if (engaged) { const tx = (pointer.x - view.width / 2) / view.height; const ty = s.flip ? 1 - pointer.y / view.height : pointer.y / view.height; state.px += (tx - state.px) * follow; state.py += (ty - state.py) * follow; } state.reach += ((engaged ? 1 : 0) - state.reach) * (1 - Math.exp(-dt / (engaged ? 0.9 : 1.4))); if (!s.intro || reduce) state.reveal = 1; else if (state.reveal < 1) state.reveal = Math.min(1, state.reveal + dt / INTRO_SECONDS); render(); raf = requestAnimationFrame(frame); }; const wake = () => { if (!raf && visible && !document.hidden) raf = requestAnimationFrame(frame); }; const resize = () => { const s = settingsRef.current; const width = Math.max(1, container.clientWidth); const height = Math.max(1, container.clientHeight); const ratio = Math.min(s.dpr || window.devicePixelRatio || 1, 2); view.width = width; view.height = height; canvas.width = Math.max(1, Math.round(width * ratio)); canvas.height = Math.max(1, Math.round(height * ratio)); render(); wake(); }; const onPointerMove = (event: PointerEvent) => { const rect = container.getBoundingClientRect(); pointer.x = event.clientX - rect.left; pointer.y = event.clientY - rect.top; const wasInside = pointer.inside; pointer.inside = pointer.x >= 0 && pointer.y >= 0 && pointer.x <= rect.width && pointer.y <= rect.height; if (pointer.inside && !wasInside) { const s = settingsRef.current; state.px = (pointer.x - rect.width / 2) / Math.max(1, rect.height); state.py = s.flip ? 1 - pointer.y / Math.max(1, rect.height) : pointer.y / Math.max(1, rect.height); } if (!settingsRef.current.paused) wake(); }; const onPointerUp = (event: PointerEvent) => { if (event.pointerType !== 'mouse') pointer.inside = false; }; const onPointerLeave = () => { pointer.inside = false; }; const onVisibility = () => { last = 0; wake(); }; const resizeObserver = new ResizeObserver(resize); resizeObserver.observe(container); const intersection = new IntersectionObserver(entries => { visible = entries.some(entry => entry.isIntersecting); if (visible) { last = 0; wake(); } }); intersection.observe(container); window.addEventListener('pointermove', onPointerMove, { passive: true }); window.addEventListener('pointerdown', onPointerMove, { passive: true }); window.addEventListener('pointerup', onPointerUp, { passive: true }); window.addEventListener('pointercancel', onPointerUp, { passive: true }); document.documentElement.addEventListener('pointerleave', onPointerLeave); document.addEventListener('visibilitychange', onVisibility); resize(); let lastDpr = settingsRef.current.dpr; wakeRef.current = () => { const s = settingsRef.current; if (s.dpr !== lastDpr) { lastDpr = s.dpr; resize(); return; } if (!raf) render(); wake(); }; return () => { cancelAnimationFrame(raf); wakeRef.current = null; resizeObserver.disconnect(); intersection.disconnect(); window.removeEventListener('pointermove', onPointerMove); window.removeEventListener('pointerdown', onPointerMove); window.removeEventListener('pointerup', onPointerUp); window.removeEventListener('pointercancel', onPointerUp); document.documentElement.removeEventListener('pointerleave', onPointerLeave); document.removeEventListener('visibilitychange', onVisibility); gl.deleteProgram(program.program); gl.deleteBuffer(buffer); gl.deleteVertexArray(vao); gl.getExtension('WEBGL_lose_context')?.loseContext(); }; }, []); useEffect(() => { wakeRef.current?.(); }); return (

); }; export default Aurora; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"Aurora/Aurora.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]