52: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"] 53: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"] 54:T3986,"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 MAX_COLORS = 5; const VERTEX = `#version 300 es in vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`; // Gradient noise, layered and fed back into itself (domain warping), sets // the flow; a simple pattern read through that flow picks the colours. const FRAGMENT = `#version 300 es precision highp float; uniform vec2 u_size; uniform float u_dpr; uniform float u_clock; uniform float u_scale; uniform float u_turn; uniform vec4 u_palette[${MAX_COLORS}]; uniform int u_count; uniform int u_pattern; uniform float u_density; uniform float u_softness; uniform float u_warp; uniform float u_turbulence; out vec4 outColor; float hash(vec2 cell) { return fract(sin(dot(cell, vec2(41.37, 289.13))) * 17853.217); } // The corner's random slope, followed from the corner to the point. float lean(vec2 cell, vec2 offset) { float angle = 6.2831853 * hash(cell); return dot(vec2(cos(angle), sin(angle)), offset); } // Gradient noise with quintic fades, roughly -0.7 to 0.7. float noise(vec2 p) { vec2 cell = floor(p); vec2 f = p - cell; vec2 fade = f * f * f * (f * (f * 6.0 - 15.0) + 10.0); float bottom = mix(lean(cell, f), lean(cell + vec2(1.0, 0.0), f - vec2(1.0, 0.0)), fade.x); float top = mix(lean(cell + vec2(0.0, 1.0), f - vec2(0.0, 1.0)), lean(cell + 1.0, f - 1.0), fade.x); return mix(bottom, top, fade.y); } // Each layer is finer, fainter and turned, so the layers never line up. const mat2 TURN = mat2(0.8776, 0.4794, -0.4794, 0.8776); float layered(vec2 p, int layers) { float sum = 0.0; float weight = 0.55; for (int i = 0; i < 5; i++) { if (i >= layers) break; sum += weight * noise(p); p = TURN * p * 1.97 + vec2(3.7, -1.9); weight *= 0.5; } return sum; } void main() { // Pattern space counts CSS pixels from the centre, so the flow keeps its // size on any canvas and any screen density. vec2 p = (gl_FragCoord.xy - 0.5 * u_size) / u_dpr * mix(0.0065, 0.0012, u_scale); float c = cos(u_turn); float s = sin(u_turn); p = mat2(c, s, -s, c) * p; float t = 0.15 * u_clock; int layers = 1 + int(u_turbulence * 4.0 + 0.5); vec2 drift = vec2(t, -0.6 * t); // The flow is broader than the pattern, so it bends bands instead of folding them. vec2 q = 0.6 * p; vec2 first = vec2(layered(q + drift, layers), layered(q + vec2(5.3, -2.1) - drift, layers)); vec2 second = vec2( layered(q + 1.8 * first + vec2(-4.6, 7.2) + drift.yx, layers), layered(q + 1.8 * first + vec2(8.1, 1.4) - 0.5 * drift, layers) ); vec2 w = p + 1.8 * u_warp * second; float field; if (u_pattern == 0) { field = 0.5 + 0.5 * sin(3.14159265 * mix(0.5, 3.5, u_density) * w.y); } else if (u_pattern == 1) { float k = mix(1.0, 5.0, u_density); field = 0.5 + 0.5 * sin(k * w.x) * sin(k * w.y); } else { float spread = mix(2.5, 0.1, u_density); field = smoothstep(-spread, spread, w.y); } vec4 a = u_palette[0]; vec4 color = vec4(a.rgb * a.a, a.a); if (u_count > 1) { float x = clamp(field, 0.0, 1.0) * float(u_count - 1); int i = min(int(x), u_count - 2); float reach = 0.5 * u_softness + fwidth(x); float blend = smoothstep(0.5 - reach, 0.5 + reach, x - float(i)); vec4 from = u_palette[i]; vec4 to = u_palette[i + 1]; color = mix(vec4(from.rgb * from.a, from.a), vec4(to.rgb * to.a, to.a), blend); } // Dither by a fraction of a level so slow gradients do not band. color.rgb += (hash(gl_FragCoord.xy) - 0.5) / 255.0; outColor = color; }`; type WarpPattern = "bands" | "cells" | "split"; interface WarpSettings { colors: string[]; /** What the colours are laid on: soft bands, a grid of cells, or one divide. */ pattern: WarpPattern; /** From 0 to 1: how many bands or cells fit; for "split", how sharp the divide is. */ density: number; /** From 0 to 1: 0 keeps crisp borders between colours, 1 melts them together. */ softness: number; /** From 0 to 1: how far the flow pushes the pattern around. */ warp: number; /** From 0 to 1: fine detail in the flow. */ turbulence: number; /** From 0 to 1: size of the flow; larger is broader. */ scale: number; /** Turn of the whole field, in degrees. */ rotation: number; /** Pace of the flow; 0 holds it still. */ speed: number; } const PRESETS = { tide: { colors: ["#04090f", "#1f5f72", "#6fb3c2"], pattern: "bands", density: 0.4, softness: 1, warp: 0.8, turbulence: 0.2, scale: 0.6, rotation: -20, speed: 0.5, }, brass: { colors: ["#0b0907", "#7a5b2a", "#d9b06a"], pattern: "split", density: 0.55, softness: 0.9, warp: 0.8, turbulence: 0.25, scale: 0.6, rotation: 110, speed: 0.5, }, abyss: { colors: ["#020308", "#102447", "#3a6ea5", "#020308"], pattern: "bands", density: 0.3, softness: 1, warp: 0.9, turbulence: 0.2, scale: 0.5, rotation: 0, speed: 0.4, }, dusk: { colors: ["#100a18", "#6d63c9", "#e07a5f"], pattern: "cells", density: 0.45, softness: 1, warp: 0.7, turbulence: 0.1, scale: 0.5, rotation: 45, speed: 0.5, }, fog: { colors: ["#fafaf9", "#e7e5e4", "#a8a29e", "#fafaf9"], pattern: "bands", density: 0.35, softness: 1, warp: 0.8, turbulence: 0.25, scale: 0.55, rotation: 30, speed: 0.3, }, } satisfies Record; /** Any CSS colour, theme variables included, as 0–1 RGBA. */ function resolveColor(color: string, probe: HTMLElement): [number, 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 [0, 0, 0, 1]; context.fillStyle = getComputedStyle(probe).color; context.fillRect(0, 0, 1, 1); const [r = 0, g = 0, b = 0, a = 255] = context.getImageData(0, 0, 1, 1).data; return [r / 255, g / 255, b / 255, a / 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; } const PATTERNS: Record = { bands: 0, cells: 1, split: 2 }; const unit = (value: number) => Math.min(Math.max(value, 0), 1); // Film grain from an SVG noise filter: a few hundred bytes, no image to load. const GRAIN = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")`; interface WarpGradientProps extends Omit, "children">, Partial { /** A starting point; any setting passed alongside overrides it. */ preset?: keyof typeof PRESETS; /** Film grain over the colours, from 0 to 1. */ grain?: number; } /** * A slow, liquid field of colour: two to five colours laid over bands, * cells or a single divide, then carried along by layered noise. It is one * WebGL2 fragment shader. Put it inside a positioned element; it fills it. * Colours can be theme variables and follow theme switches. It pauses off * screen and in background tabs, draws one still frame with * `prefers-reduced-motion`, and falls back to a CSS gradient of the same * colours where WebGL2 is unavailable. * * @example *

* *

Into the blue

*/ function WarpGradient({ preset = "tide", grain = 0, colors, pattern, density, softness, warp, turbulence, scale, rotation, speed, className, style, ref, ...props }: WarpGradientProps) { const canvas = useRef(null); const fallback = useRef(null); const [observe, inView] = useInView({ rootMargin: "100px" }); const mergedRef = useMemo(() => mergeRefs(ref, observe), [ref, observe]); const base: WarpSettings = PRESETS[preset] ?? PRESETS.tide; const palette = (colors?.length ? colors : base.colors).slice(0, MAX_COLORS); const paletteKey = palette.join("|"); const settings = useRef(base); const visible = useRef(false); const wake = useRef<() => void>(() => {}); const recolor = useRef<() => void>(() => {}); useEffect(() => { const element = canvas.current; const gl = element?.getContext("webgl2", { alpha: true, premultipliedAlpha: true }); if (!element || !gl) return; const program = compile(gl); if (!program) return; const flat = fallback.current; if (flat) flat.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 names = [ "u_size", "u_dpr", "u_clock", "u_scale", "u_turn", "u_palette", "u_count", "u_pattern", "u_density", "u_softness", "u_warp", "u_turbulence", ] as const; const u = Object.fromEntries( names.map((name) => [name, gl.getUniformLocation(program, name)]) ) as Record<(typeof names)[number], WebGLUniformLocation | null>; const probe = document.createElement("span"); probe.style.display = "none"; element.after(probe); recolor.current = () => { const current = settings.current.colors; const values = new Float32Array(MAX_COLORS * 4); current.forEach((color, index) => values.set(resolveColor(color, probe), index * 4)); gl.uniform4fv(u.u_palette, values); gl.uniform1i(u.u_count, Math.max(current.length, 1)); }; let clock = 0; let ratio = 1; const draw = () => { const s = settings.current; gl.uniform2f(u.u_size, element.width, element.height); gl.uniform1f(u.u_dpr, ratio); gl.uniform1f(u.u_clock, clock); gl.uniform1f(u.u_scale, unit(s.scale)); gl.uniform1f(u.u_turn, (s.rotation * Math.PI) / 180); gl.uniform1i(u.u_pattern, PATTERNS[s.pattern] ?? 0); gl.uniform1f(u.u_density, unit(s.density)); gl.uniform1f(u.u_softness, unit(s.softness)); gl.uniform1f(u.u_warp, unit(s.warp)); gl.uniform1f(u.u_turbulence, unit(s.turbulence)); gl.drawArrays(gl.TRIANGLES, 0, 3); }; const resize = () => { ratio = Math.min(window.devicePixelRatio || 1, 2); element.width = Math.max(1, Math.round(element.clientWidth * ratio)); element.height = Math.max(1, Math.round(element.clientHeight * ratio)); 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) clock += ((now - last) / 1000) * settings.current.speed; last = moving ? now : 0; draw(); if (moving) frame = requestAnimationFrame(loop); }; wake.current = () => { if (!frame) frame = requestAnimationFrame(loop); }; recolor.current(); resize(); const resizer = new ResizeObserver(resize); resizer.observe(element); const theme = new MutationObserver(() => { recolor.current(); draw(); }); theme.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style", "data-theme"], }); wake.current(); return () => { cancelAnimationFrame(frame); wake.current = () => {}; recolor.current = () => {}; resizer.disconnect(); theme.disconnect(); probe.remove(); gl.deleteBuffer(buffer); gl.deleteProgram(program); if (flat) flat.hidden = false; }; }, []); // Hand the latest settings to the loop and wake it for a fresh frame. useEffect(() => { settings.current = { colors: paletteKey.split("|"), pattern: pattern ?? base.pattern, density: density ?? base.density, softness: softness ?? base.softness, warp: warp ?? base.warp, turbulence: turbulence ?? base.turbulence, scale: scale ?? base.scale, rotation: rotation ?? base.rotation, speed: speed ?? base.speed, }; recolor.current(); visible.current = inView; wake.current(); }, [ base, paletteKey, pattern, density, softness, warp, turbulence, scale, rotation, speed, inView, ]); return (

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