64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 66:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 67:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 68: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 69:T3604,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // ChromaTide — a full-bleed animated gradient background: a WebGL fragment // shader drifts three theme-derived colors through a domain-warped fbm flow // field and maps the result through a simple 3-stop ramp. No pattern-shape // switch, no swirl-iteration loop, no per-channel alpha blending — one flow // field, one ramp, one drift direction, kept deliberately simple so it reads // as a calm moving backdrop rather than a shader demo. // // Colors default to --ns-accent, --background lightened, and --foreground // dimmed, all read via getComputedStyle at mount and re-read on a // MutationObserver watching documentElement's class attribute, so the tide // re-tints itself on a theme flip without a remount. An explicit `colors` // prop (1-4 hex strings) overrides the token defaults for callers who want a // fixed palette regardless of theme. // --------------------------------------------------------------------------- export interface ChromaTideProps { /** Optional fixed palette (hex strings) overriding the theme-derived default. */ colors?: string[]; /** Flow speed multiplier. @default 1 */ speed?: number; /** Noise zoom — smaller reads as broader, slower-moving fields. @default 1 */ scale?: number; /** extra classes merged onto the rendered root element */ className?: string; /** inline styles merged onto the root element */ style?: React.CSSProperties; } const VERT_SRC = ` attribute vec2 a_pos; void main() { gl_Position = vec4(a_pos, 0.0, 1.0); } `; const FRAG_SRC = ` precision highp float; uniform vec2 u_res; uniform float u_time; uniform float u_scale; uniform vec3 u_c1; uniform vec3 u_c2; uniform vec3 u_c3; float hash21(vec2 p) { p = fract(p * vec2(419.2, 371.9)); p += dot(p, p + 19.19); return fract(p.x * p.y); } float vnoise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); float a = hash21(i); float b = hash21(i + vec2(1.0, 0.0)); float c = hash21(i + vec2(0.0, 1.0)); float d = hash21(i + vec2(1.0, 1.0)); vec2 u = f * f * (3.0 - 2.0 * f); return mix(mix(a, b, u.x), mix(c, d, u.x), u.y); } float fbm(vec2 p) { float sum = 0.0; float amp = 0.5; for (int i = 0; i < 4; i++) { sum += amp * vnoise(p); p = p * 2.15 + 5.7; amp *= 0.52; } return sum; } void main() { vec2 uv = gl_FragCoord.xy / u_res; float aspect = u_res.x / u_res.y; vec2 p = (uv - 0.5) * vec2(aspect, 1.0) * (2.4 * u_scale); p += vec2(u_time * 0.045, u_time * -0.028); vec2 warp = vec2(fbm(p + u_time * 0.06), fbm(p - u_time * 0.05 + 8.3)); float t = fbm(p * 1.3 + warp * 1.5); // fbm output clusters near its mean — stretch contrast around 0.5 so the // ramp's outer stops actually get reached instead of the field reading as // one dominant midtone with faint smudges. t = clamp(0.5 + (t - 0.5) * 2.1, 0.0, 1.0); vec3 col = t < 0.5 ? mix(u_c1, u_c2, smoothstep(0.0, 0.5, t)) : mix(u_c2, u_c3, smoothstep(0.5, 1.0, t)); gl_FragColor = vec4(col, 1.0); } `; function parseHex(raw: string): [number, number, number] | null { const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(raw.trim()); if (!m) return null; let h = m[1]; if (h.length === 3) h = h.split("").map((c) => c + c).join(""); const n = parseInt(h, 16); return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; } function mix3(a: [number, number, number], b: [number, number, number], t: number): [number, number, number] { return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]; } function compile(gl: WebGLRenderingContext, type: number, src: string): WebGLShader { const s = gl.createShader(type)!; gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { const info = gl.getShaderInfoLog(s); gl.deleteShader(s); throw new Error(`background-gradient-shader: shader compile failed: ${info ?? ""}`); } return s; } export function ChromaTide({ colors, speed = 1, scale = 1, className = "", style }: ChromaTideProps) { const containerRef = useRef(null); const canvasRef = useRef(null); const speedRef = useRef(speed); speedRef.current = speed; useEffect(() => { const container = containerRef.current; const canvas = canvasRef.current; if (!container || !canvas) return; let gl: WebGLRenderingContext | null = null; let program: WebGLProgram | null = null; let vShader: WebGLShader | null = null; let fShader: WebGLShader | null = null; let buffer: WebGLBuffer | null = null; let raf = 0; let running = false; let startedAt = performance.now(); let pausedAt = 0; let w = 0; let h = 0; let uRes: WebGLUniformLocation | null = null; let uTime: WebGLUniformLocation | null = null; let uScale: WebGLUniformLocation | null = null; let uC1: WebGLUniformLocation | null = null; let uC2: WebGLUniformLocation | null = null; let uC3: WebGLUniformLocation | null = null; let c1: [number, number, number] = [0, 0.42, 1]; let c2: [number, number, number] = [0.3, 0.3, 0.3]; let c3: [number, number, number] = [0, 0, 0]; const readColors = () => { if (colors && colors.length >= 2) { const parsed = colors.map((c) => parseHex(c)).filter((c): c is [number, number, number] => !!c); c1 = parsed[0] ?? c1; c2 = parsed[1] ?? parsed[0] ?? c1; c3 = parsed[2] ?? parsed[1] ?? parsed[0] ?? c1; return; } const cs = getComputedStyle(document.documentElement); const accent = parseHex(cs.getPropertyValue("--ns-accent").trim()) ?? [0, 0.42, 1]; const bg = parseHex(cs.getPropertyValue("--background").trim()) ?? [0, 0, 0]; const fg = parseHex(cs.getPropertyValue("--foreground").trim()) ?? [1, 1, 1]; c1 = mix3(bg, fg, 0.12); c2 = accent; c3 = mix3(bg, [0, 0, 0], 0.0); }; readColors(); // A failure past that getContext() leaves a live context nothing can hand // back: the `if (!setup()) return` below returns before the effect // registers the cleanup that releases it. Hence the release here — and // note the condition is the inverse of that cleanup's // `!canvas.isConnected`, because on this path the canvas is still mounted. // A restore attempt is the one case to leave alone: onRestored re-enters // setup(), so releasing there would feed its own loss/restore/fail cycle. const abandon = (isRestore: boolean): false => { if (!isRestore) gl?.getExtension("WEBGL_lose_context")?.loseContext(); return false; }; const setup = (isRestore = false): boolean => { gl = canvas.getContext("webgl", { alpha: false, antialias: true }) as WebGLRenderingContext | null; if (!gl) return false; vShader = compile(gl, gl.VERTEX_SHADER, VERT_SRC); fShader = compile(gl, gl.FRAGMENT_SHADER, FRAG_SRC); program = gl.createProgram(); if (!program) return abandon(isRestore); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return abandon(isRestore); gl.useProgram(program); buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW ); const loc = gl.getAttribLocation(program, "a_pos"); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0); uRes = gl.getUniformLocation(program, "u_res"); uTime = gl.getUniformLocation(program, "u_time"); uScale = gl.getUniformLocation(program, "u_scale"); uC1 = gl.getUniformLocation(program, "u_c1"); uC2 = gl.getUniformLocation(program, "u_c2"); uC3 = gl.getUniformLocation(program, "u_c3"); return true; }; const teardown = () => { if (!gl) return; if (buffer) gl.deleteBuffer(buffer); if (program) gl.deleteProgram(program); if (vShader) gl.deleteShader(vShader); if (fShader) gl.deleteShader(fShader); buffer = program = vShader = fShader = null; gl = null; }; // viewport/resolution/scale/palette are each only touched by resize(), // readColors() or a prop change — never by time. WebGL retains uniform // values across draw calls on the same program, so re-sending all six // uniforms and re-setting the viewport on every single animation frame // (this ran continuously, forever) was pure waste on the one uniform // (u_time) that actually changes frame to frame. Setting the static ones // only at their own change points cuts the per-frame GL call count from // 8 to 2. const applyViewportUniforms = () => { if (!gl || !program) return; gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform2f(uRes, canvas.width, canvas.height); gl.uniform1f(uScale, scale); }; const applyColorUniforms = () => { if (!gl || !program) return; gl.uniform3f(uC1, c1[0], c1[1], c1[2]); gl.uniform3f(uC2, c2[0], c2[1], c2[2]); gl.uniform3f(uC3, c3[0], c3[1], c3[2]); }; const draw = (nowMs: number) => { if (!gl || !program || w <= 0 || h <= 0) return; gl.uniform1f(uTime, ((nowMs - startedAt) / 1000) * speedRef.current); gl.drawArrays(gl.TRIANGLES, 0, 6); }; // The flow field drifts slowly enough that 60 draws/sec buys nothing a // viewer can see over ~30 — it's a calm ambient backdrop, not motion // graphics. Halving the draw rate halves the shader + compositor cost of // an animation that already runs forever with no idle state, which was // the dominant cost of this component. rAF itself still fires every // frame (needed for a smooth stop the instant the tab hides or reduced- // motion flips), it just skips the GL work on alternate frames. const FRAME_INTERVAL_MS = 1000 / 30; let lastDrawMs = 0; const loop = (t: number) => { if (t - lastDrawMs >= FRAME_INTERVAL_MS) { lastDrawMs = t; draw(t); } raf = requestAnimationFrame(loop); }; const wake = () => { if (running) return; running = true; raf = requestAnimationFrame(loop); }; const sleep = () => { cancelAnimationFrame(raf); running = false; }; const resize = () => { const rect = container.getBoundingClientRect(); if (rect.width < 2 || rect.height < 2) return; w = rect.width; h = rect.height; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; applyViewportUniforms(); draw(pausedAt || performance.now()); }; if (!setup()) return; // no WebGL: render nothing, container stays transparent applyColorUniforms(); const ro = new ResizeObserver(resize); ro.observe(container); resize(); const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); let reduced = mq.matches; const applyMode = () => { if (reduced) { pausedAt = performance.now(); sleep(); draw(pausedAt); } else { wake(); } }; const onMq = () => { reduced = mq.matches; applyMode(); }; mq.addEventListener("change", onMq); applyMode(); const onVis = () => { if (document.hidden) sleep(); else if (!reduced) wake(); }; document.addEventListener("visibilitychange", onVis); const themeObserver = new MutationObserver(() => { readColors(); applyColorUniforms(); if (reduced) draw(pausedAt || performance.now()); }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); const onLost = (e: Event) => { e.preventDefault(); sleep(); }; const onRestored = () => { if (setup(true)) { applyColorUniforms(); resize(); applyMode(); } }; canvas.addEventListener("webglcontextlost", onLost); canvas.addEventListener("webglcontextrestored", onRestored); return () => { ro.disconnect(); mq.removeEventListener("change", onMq); document.removeEventListener("visibilitychange", onVis); themeObserver.disconnect(); canvas.removeEventListener("webglcontextlost", onLost); canvas.removeEventListener("webglcontextrestored", onRestored); sleep(); // teardown() frees the GL objects but not the context holding them, and // a detached canvas keeps its context until GC gets round to it — // browsers cap live contexts per renderer process and evict the oldest // first, which kills backgrounds still on screen. Hand it back // explicitly, but only on a real unmount: this cleanup also runs when a // dep changes, and a canvas returns its one lost context to every later // getContext(), so releasing too eagerly would blank the rebuilt field. const lose = gl?.getExtension("WEBGL_lose_context"); teardown(); if (!canvas.isConnected) lose?.loseContext(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [colors, scale]); return ( ); } ChromaTide.displayName = "ChromaTide"; 63:["$","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,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/loud/background-gradient-shader/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/background-gradient-shader.tsx"}],"className":"h-[70svh] min-h-80"}]]}]