51:I[707087,["/_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"],"RegistryDependencies"] 52: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"] 53:T27eb,"use client"; import { useEffect, useMemo, useRef, type ComponentProps, type Ref } from "react"; import { useInView } from "@/registry/default/hooks/use-in-view"; import { cn } from "@/registry/default/lib/utils"; function mergeRefs(...refs: (Ref | undefined)[]) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref) ref.current = node; } }; } const VERTEX = `#version 300 es in vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`; // Beams fanning down from a point above the top edge. Their pattern is // smooth 1D noise over the angle, in two layers drifting against each other, // with a haze around the source and a fade with distance. const FRAGMENT = `#version 300 es precision highp float; uniform vec2 u_resolution; uniform float u_time; uniform vec2 u_origin; uniform vec3 u_color1; uniform vec3 u_color2; uniform float u_intensity; uniform float u_density; uniform float u_reach; uniform float u_spread; out vec4 fragColor; float hash(float n) { return fract(sin(n * 127.1) * 43758.5453123); } float noise(float x) { float i = floor(x); float f = fract(x); return mix(hash(i), hash(i + 1.0), f * f * (3.0 - 2.0 * f)); } void main() { vec2 p = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y); vec2 d = p - u_origin; float dist = length(d); float across = atan(d.x, d.y) / u_spread; float beams = 0.65 * noise(across * u_density + u_time * 0.35) + 0.35 * noise(across * u_density * 2.3 - u_time * 0.5 + 17.0); beams = smoothstep(0.2, 1.0, beams); float diagonal = length(u_resolution); float fade = 1.0 - smoothstep(0.0, max(u_reach, 0.05) * diagonal, dist); fade *= fade; float fan = 1.0 - smoothstep(0.7, 1.0, abs(across)); float haze = 0.3 * exp(-dist / (0.2 * diagonal)); float strength = clamp((beams * fan + haze) * fade * u_intensity, 0.0, 1.0); vec3 color = mix(u_color1, u_color2, clamp(across * 0.5 + 0.5, 0.0, 1.0)); fragColor = vec4(color * strength, strength); }`; /** Any CSS colour, theme variables included, as 0–1 RGB. */ function resolveColor(color: string, probe: HTMLElement): [number, number, number] { probe.style.color = color; const canvas = document.createElement("canvas"); canvas.width = canvas.height = 1; const context = canvas.getContext("2d"); if (!context) return [1, 1, 1]; context.fillStyle = getComputedStyle(probe).color; context.fillRect(0, 0, 1, 1); const [r = 255, g = 255, b = 255] = context.getImageData(0, 0, 1, 1).data; return [r / 255, g / 255, b / 255]; } function compile(gl: WebGL2RenderingContext) { const program = gl.createProgram(); for (const [type, source] of [ [gl.VERTEX_SHADER, VERTEX], [gl.FRAGMENT_SHADER, FRAGMENT], ] as const) { const shader = gl.createShader(type); if (!shader) return null; gl.shaderSource(shader, source); gl.compileShader(shader); gl.attachShader(program, shader); gl.deleteShader(shader); } gl.linkProgram(program); return gl.getProgramParameter(program, gl.LINK_STATUS) ? program : null; } interface LightRaysSettings { intensity: number; density: number; reach: number; origin: number; spread: number; speed: number; } interface LightRaysProps extends Omit, "children">, Partial { /** One colour for every beam, or two to shade the fan from left to right. Theme variables work. */ colors?: string | [string, string]; /** * Rendering scale against CSS pixels. Soft light loses nothing at half * resolution and costs a quarter of the work. */ resolution?: number; } /** * Soft beams of light falling from above, drawn by a small WebGL2 shader on * a transparent canvas, so it sits on whatever background its container * has. Put it inside a positioned element; it fills it. It pauses off * screen and in background tabs, draws a single still frame with * `prefers-reduced-motion`, and falls back to a soft CSS glow where WebGL2 * is unavailable. * * - `intensity`: brightness of the beams, from 0 to 1. * - `density`: how many beams fit in the fan; higher is finer. * - `reach`: how far down the light reaches, as a share of the diagonal. * - `origin`: where the source sits across the top, from 0 (left) to 1 (right). * - `spread`: how wide the fan opens, in degrees either side of straight down. * - `speed`: pace of the drift; 0 holds it still. * * @example *

* *

Chart your own course

*/ function LightRays({ colors = "#ffffff", intensity = 0.6, density = 12, reach = 0.8, origin = 0.5, spread = 60, speed = 1, resolution = 0.5, className, style, ref, ...props }: LightRaysProps) { const canvas = useRef(null); const fallback = useRef(null); const [observe, inView] = useInView({ rootMargin: "100px" }); const mergedRef = useMemo(() => mergeRefs(ref, observe), [ref, observe]); const [first = "#ffffff", second = first] = Array.isArray(colors) ? colors : [colors]; // The render loop reads the latest props from here, without restarting WebGL. const settings = useRef({ intensity, density, reach, origin, spread, speed }); const visible = useRef(false); const wake = useRef<() => void>(() => {}); useEffect(() => { const element = canvas.current; const gl = element?.getContext("webgl2", { alpha: true, premultipliedAlpha: true, antialias: false, }); if (!element || !gl) return; const program = compile(gl); if (!program) return; const glow = fallback.current; if (glow) glow.hidden = true; const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // One triangle that covers the whole canvas. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW); const position = gl.getAttribLocation(program, "a_position"); gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0); gl.useProgram(program); const at = (name: string) => gl.getUniformLocation(program, name); const u = { resolution: at("u_resolution"), time: at("u_time"), origin: at("u_origin"), color1: at("u_color1"), color2: at("u_color2"), intensity: at("u_intensity"), density: at("u_density"), reach: at("u_reach"), spread: at("u_spread"), }; const probe = document.createElement("span"); probe.style.display = "none"; element.after(probe); const paint = () => { gl.uniform3fv(u.color1, resolveColor(first, probe)); gl.uniform3fv(u.color2, resolveColor(second, probe)); }; let time = 0; const draw = () => { const s = settings.current; gl.uniform2f(u.resolution, element.width, element.height); gl.uniform1f(u.time, time); // The source sits a little above the top edge, so the beams enter already spread. gl.uniform2f(u.origin, s.origin * element.width, -0.25 * element.height); gl.uniform1f(u.intensity, Math.min(Math.max(s.intensity, 0), 1)); gl.uniform1f(u.density, Math.max(s.density, 1)); gl.uniform1f(u.reach, s.reach); gl.uniform1f(u.spread, (Math.min(Math.max(s.spread, 5), 89) * Math.PI) / 180); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); }; const resize = () => { const scale = Math.min(window.devicePixelRatio || 1, 2) * Math.min(Math.max(resolution, 0.1), 2); element.width = Math.max(1, Math.round(element.clientWidth * scale)); element.height = Math.max(1, Math.round(element.clientHeight * scale)); gl.viewport(0, 0, element.width, element.height); draw(); }; const still = window.matchMedia?.("(prefers-reduced-motion: reduce)"); let frame = 0; let last = 0; const loop = (now: number) => { frame = 0; const moving = visible.current && !still?.matches && settings.current.speed !== 0; if (moving && last) time += ((now - last) / 1000) * settings.current.speed; last = moving ? now : 0; draw(); if (moving) frame = requestAnimationFrame(loop); }; wake.current = () => { if (!frame) frame = requestAnimationFrame(loop); }; paint(); resize(); const resizer = new ResizeObserver(resize); resizer.observe(element); // Theme switches change what colour variables resolve to. const theme = new MutationObserver(() => { paint(); draw(); }); theme.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style", "data-theme"], }); wake.current(); return () => { cancelAnimationFrame(frame); wake.current = () => {}; resizer.disconnect(); theme.disconnect(); probe.remove(); gl.deleteBuffer(buffer); gl.deleteProgram(program); if (glow) glow.hidden = false; }; }, [first, second, resolution]); // Hand the latest props to the loop, and restart it when it is back on screen. useEffect(() => { settings.current = { intensity, density, reach, origin, spread, speed }; visible.current = inView; wake.current(); }, [intensity, density, reach, origin, spread, speed, inView]); return (

{/* Stands in for the beams where WebGL2 is unavailable. */}

); } export { LightRays, type LightRaysProps }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/use-in-view"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/light-rays.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]