62: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"] 63: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"] 64:Ta84,import type { Rgb } from "./atmospheres-color"; /** * vare (väre, a ripple) emits from the iso-phase lines of a few broad travelling * wavefronts, never from the wave bodies. What you see is a set of drifting * luminous boundaries: the folded edges of a curtain, seen from very far away. * * The failure mode is moire. Every defence against it is a parameter here: the * domain warp, the per-front phase jitter, the wavenumber scatter and the * thickness noise. Turn them to zero and the interference snaps into a diagram. */ export interface VareParams { /** Shared travel direction of the front, in radians. */ angle: number; /** Half-width of the k-vector fan around that direction, in radians. */ spread: number; /** Base wavenumber. Each front scatters around it, so no two bands match. */ wavenumber: number; speed: number; /** Amplitude of the FBM domain warp that bends the whole field. */ warp: number; warpScale: number; /** Per-front phase drift, in band periods. This is what stops two fronts from * lining up, since the shared warp bends them all the same way. */ jitter: number; /** Exponent of the cosine ridge. Higher is a narrower boundary; low melts * the bands into one another. */ soft: number; /** Frequency of the noise that varies band thickness along a front. */ detail: number; /** Extra light where two fronts cross. */ node: number; gain: number; /** Off-frame origin of the fronts, in half-height units, x scaled by aspect. */ source: [number, number]; /** Inverse-square arrival from the source. Higher decays to void sooner. */ falloff: number; /** Distance over which the hue completes its front-to-back ramp. */ span: number; /** Strength of the pointer lens in phase space. */ lens: number; lensSigma: number; } export const VARE_DEFAULTS: VareParams = { angle: 3.64, spread: 0.62, wavenumber: 3.8, speed: 0.9, warp: 0.7, warpScale: 0.55, jitter: 0.7, soft: 6.5, detail: 1.6, node: 0.9, gain: 1.15, source: [1.15, 0.8], falloff: 0.09, span: 4, lens: 2.2, lensSigma: 0.9, }; export interface VareColors { /** The body of the front. */ body: Rgb; /** The oldest, furthest bands. */ deep: Rgb; /** The freshest bands, closest to the source. */ edge: Rgb; /** kosteus: the hue the clay takes where the trough holds water. */ pigment: Rgb; } export const POINTER_EASE = 0.06; export function approach( current: number, target: number, ease: number, ): number { return current + (target - current) * ease; } export function resolveParams(overrides?: Partial): VareParams { return { ...VARE_DEFAULTS, ...overrides }; } 65:T15ac,import { glsl } from "./atmospheres-glsl"; const WAVES = 4; export const vareFragmentShader = /* glsl */ `#version 300 es precision highp float; uniform float uTime; uniform vec2 uResolution; uniform vec2 uMouse; uniform float uPointer; uniform float uAngle; uniform float uSpread; uniform float uWavenumber; uniform float uSpeed; uniform float uWarp; uniform float uWarpScale; uniform float uJitter; uniform float uSoft; uniform float uDetail; uniform float uNode; uniform float uGain; uniform vec2 uSource; uniform float uFalloff; uniform float uSpan; uniform float uLens; uniform float uLensSigma; uniform float uAlpha; uniform float uAbsorb; uniform vec3 uBody; uniform vec3 uDeep; uniform vec3 uEdgeColor; uniform vec3 uPigment; uniform float uStainFloor; out vec4 fragColor; ${glsl("fbm", "dither", "stain", "composite")} const float TAU = 6.28318530718; /** The raking key. Low and from the left, so a ridge one pixel high still casts. */ const vec3 KEY = vec3(-0.62, -0.44, 0.36); /** How hard the clay drinks. Tuned so a node is damp, not a bruise. */ const float SIGMA = 1.15; /** The wettest a ripple ever gets. Above this the ground stops being ground. */ const float SOAK = 0.45; float phaseLens(vec2 p) { vec2 toMouse = p - uMouse; return uPointer * uLens * exp(-dot(toMouse, toMouse) / (uLensSigma * uLensSigma)); } vec2 waves(vec2 p, vec2 source) { float lens = phaseLens(p); float bands = 0.0; float squares = 0.0; float basins = 0.0; float basinSquares = 0.0; for (int i = 0; i < ${WAVES}; i++) { float fi = float(i); float angle = uAngle + (hash11(fi * 3.17 + 0.5) - 0.5) * uSpread; float k = uWavenumber * (0.7 + 1.1 * hash11(fi * 7.31 + 1.7)); float w = uSpeed * (0.6 + 0.8 * hash11(fi * 11.7 + 4.3)); vec2 dir = vec2(cos(angle), sin(angle)); // The shared domain warp bends every front identically, so on its own it // cannot stop two fronts beating against each other. This one is per front. float drift = fbm2( p * uWarpScale * 1.7 + vec2(fi * 21.7, uTime * 0.018), 2 ) - 0.5; vec2 bendAxis = normalize(vec2( cos(angle + 1.5708 + fi * 0.31), sin(angle + 1.5708 + fi * 0.31) )); float bend = (fbm2( p * (uWarpScale * (0.7 + 0.18 * fi)) + vec2(fi * 7.1), 2 ) - 0.375) * (0.7 + 0.22 * fi); float phase = dot(p - source + bendAxis * bend, dir) * k - w * uTime + hash11(fi * 5.13 + 2.9) * TAU + drift * uJitter * TAU + lens; float thickness = 0.5 + 0.5 * fbm2(p * uDetail + vec2(fi * 13.0, uTime * 0.02), 2); float weight = fi < 2.0 ? 1.0 : mix(0.4, 0.6, hash11(fi + 8.4)); // A soft cosine ridge, not a hairline: the boundary glows and falls off, // and a faint square-law fill keeps the space between from reading as a // diagram on black. float wave = 0.5 + 0.5 * cos(phase); float exponent = uSoft * (0.8 + 0.4 * hash11(fi * 2.3 + 0.7)); float crest = pow(wave, exponent); float trough = pow(1.0 - wave, exponent); float band = (crest + 0.1 * wave * wave) * thickness * weight; float basinBand = trough * thickness * weight; bands += band; squares += band * band; basins += basinBand; basinSquares += basinBand * basinBand; } float overlap = max(0.5 * (bands * bands - squares), 0.0); float nodes = smoothstep(0.3, 1.0, overlap); nodes *= nodes; float emission = bands + nodes * uNode; float basinOverlap = max(0.5 * (basins * basins - basinSquares), 0.0); float basinNodes = smoothstep(0.3, 1.0, basinOverlap); basinNodes *= basinNodes; float basin = basins + basinNodes * uNode; return vec2(emission, basin); } void main() { float aspect = uResolution.x / max(uResolution.y, 1.0); vec2 ndc = (2.0 * gl_FragCoord.xy - uResolution) / uResolution.y; vec2 warp = vec2( fbm2(ndc * uWarpScale + vec2(uTime * 0.03, 0.0), 2), fbm2(ndc * uWarpScale + vec2(9.7, uTime * 0.024), 2) ) - 0.5; vec2 p = ndc + warp * uWarp; vec2 source = vec2(uSource.x * aspect, uSource.y); vec2 travel = vec2(cos(uAngle), sin(uAngle)); vec2 field = waves(p, source); float emission = field.x; float depth = clamp(dot(p - source, travel) / uSpan, 0.0, 1.0); vec3 hue = mix(uBody, uDeep, depth); hue = mix(uEdgeColor, hue, smoothstep(0.0, 0.3, depth)); float reach = length(p - source); float arrival = 1.0 / (1.0 + uFalloff * reach * reach); vec3 col = hue * emission * arrival * uGain; // Tonemapped on luminance, not per channel, so a bright node saturates // toward the accent instead of washing to white. sisu must not bloom. float lum = max(col.r, max(col.g, col.b)); float peak = 1.0 - exp(-lum); vec3 tint = col / max(lum, 1e-4); vec3 emissive = dither(tint, gl_FragCoord.xy, 0.006); float emissiveAlpha = peak * uAlpha; if (uAbsorb < 0.5) { float alpha = ditherAlpha(emissiveAlpha, gl_FragCoord.xy, 0.004); fragColor = composite(emissive, alpha); return; } float eps = 2.0 / max(uResolution.y, 1.0); float heightX = waves(p + vec2(eps, 0.0), source).x; float heightY = waves(p + vec2(0.0, eps), source).x; vec3 normal = normalize(vec3( emission - heightX, emission - heightY, eps * 5.0 )); float key = clamp(dot(normal, normalize(KEY)), 0.0, 1.0); float amount = clamp(field.y * arrival * uGain, 0.0, 1.0); float wet = amount * SOAK * (1.0 - 0.62 * key); vec3 absorbed = hold(uPigment, uStainFloor); float alpha = clamp(soak(wet, SIGMA) * uAlpha, 0.0, 1.0); fragColor = vec4(absorbed * alpha, alpha); } `; 66:Tb41,import { MAX_STAIN } from "./atmospheres-color"; import { setUniform, type Uniforms, } from "./atmospheres-gl"; import type { VareColors, VareParams } from "./vare-field"; export interface VareFrame { time: number; /** Eased pointer in half-height screen units, y up. */ mouse: [number, number]; /** Fades the phase lens in and out, 0..1. */ pointer: number; alpha: number; /** The house law: 1 stains the ground, 0 emits into it. */ absorb: number; } export function vareUniforms(colors: VareColors, params: VareParams): Uniforms { return { uTime: { value: 0 }, uResolution: { value: [1, 1] }, uMouse: { value: [0, 0] }, uPointer: { value: 0 }, uAngle: { value: params.angle }, uSpread: { value: params.spread }, uWavenumber: { value: params.wavenumber }, uSpeed: { value: params.speed }, uWarp: { value: params.warp }, uWarpScale: { value: params.warpScale }, uJitter: { value: params.jitter }, uSoft: { value: params.soft }, uDetail: { value: params.detail }, uNode: { value: params.node }, uGain: { value: params.gain }, uSource: { value: [...params.source] }, uFalloff: { value: params.falloff }, uSpan: { value: params.span }, uLens: { value: params.lens }, uLensSigma: { value: params.lensSigma }, uAlpha: { value: 1 }, uAbsorb: { value: 0 }, uBody: { value: [...colors.body] }, uDeep: { value: [...colors.deep] }, uEdgeColor: { value: [...colors.edge] }, uPigment: { value: [...colors.pigment] }, uStainFloor: { value: MAX_STAIN }, }; } export function setVareColors(u: Uniforms, colors: VareColors): void { setUniform(u, "uBody", [...colors.body]); setUniform(u, "uDeep", [...colors.deep]); setUniform(u, "uEdgeColor", [...colors.edge]); setUniform(u, "uPigment", [...colors.pigment]); } export function setVareParams(u: Uniforms, params: VareParams): void { setUniform(u, "uAngle", params.angle); setUniform(u, "uSpread", params.spread); setUniform(u, "uWavenumber", params.wavenumber); setUniform(u, "uSpeed", params.speed); setUniform(u, "uWarp", params.warp); setUniform(u, "uWarpScale", params.warpScale); setUniform(u, "uJitter", params.jitter); setUniform(u, "uSoft", params.soft); setUniform(u, "uDetail", params.detail); setUniform(u, "uNode", params.node); setUniform(u, "uGain", params.gain); setUniform(u, "uSource", [...params.source]); setUniform(u, "uFalloff", params.falloff); setUniform(u, "uSpan", params.span); setUniform(u, "uLens", params.lens); setUniform(u, "uLensSigma", params.lensSigma); } export function setVareFrame(u: Uniforms, frame: VareFrame): void { setUniform(u, "uTime", frame.time); setUniform(u, "uMouse", [...frame.mouse]); setUniform(u, "uPointer", frame.pointer); setUniform(u, "uAlpha", frame.alpha); setUniform(u, "uAbsorb", frame.absorb); } 67:T1557,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { type BlendMode, blendStyleFor, blendUniform, pigmentFor, type Rgb, resolveBlendMode, resolveColor, } from "./atmospheres-color"; import { useGlCanvas } from "./use-gl-canvas"; import { useThemeVersion, useTokenColors, } from "./use-token-colors"; import { approach, POINTER_EASE, resolveParams, type VareColors, type VareParams, } from "./vare-field"; import { vareFragmentShader } from "./vare-shader"; import { setVareColors, setVareFrame, setVareParams, vareUniforms, } from "./vare-uniforms"; const ROLES = ["accent", "accent-2", "accent-alt", "ink"] as const; /** Far enough in that the fronts have separated in the still frame. */ const STILL_TIME = 9; export interface VareProps extends React.HTMLAttributes { /** Wave rate multiplier. Defaults to 1. */ speed?: number; /** When on, a phase lens follows the eased cursor and bends the bands. * Defaults to true. */ interactive?: boolean; /** Overall opacity of the bands, 0..1. Defaults to 1. */ opacity?: number; /** Force the blend. Defaults to emissive on a dark ground, absorptive on a * light one, which is the only way this survives a light theme. */ mode?: BlendMode; /** Override any hue stop with a CSS colour. Omitted stops read their token. */ colors?: { body?: string; deep?: string; edge?: string }; /** Escape hatch for the field parameters, for tuning demos. */ params?: Partial; children?: React.ReactNode; } export const Vare = React.forwardRef( ( { speed = 1, interactive = true, opacity = 1, mode, colors, params, className, children, ...props }, forwardedRef, ) => { const cBody = colors?.body; const cDeep = colors?.deep; const cEdge = colors?.edge; const speedRef = React.useRef(speed); speedRef.current = speed; const interactiveRef = React.useRef(interactive); interactiveRef.current = interactive; const opacityRef = React.useRef(opacity); opacityRef.current = opacity; const paramsRef = React.useRef(resolveParams(params)); paramsRef.current = resolveParams(params); const themeVersion = useThemeVersion(); const scopeRef = React.useRef(null); const tokens = useTokenColors(ROLES, { scopeRef }); const blend = resolveBlendMode(mode, tokens.bg); // biome-ignore lint/correctness/useExhaustiveDependencies: a theme swap re-resolves the same colour strings to new channels. const ramp = React.useMemo(() => { const stop = (value: string | undefined, fallback: Rgb): Rgb => value ? resolveColor(value) : fallback; const body = stop(cBody, tokens.colors.accent); return { body, deep: stop(cDeep, tokens.colors["accent-2"]), edge: stop(cEdge, tokens.colors["accent-alt"]), pigment: pigmentFor(body, tokens.colors.ink), }; }, [cBody, cDeep, cEdge, tokens, themeVersion]); const rampRef = React.useRef(ramp); rampRef.current = ramp; const blendRef = React.useRef(blend); blendRef.current = blend; const mouse = React.useRef<[number, number]>([0, 0]); const canvas = useGlCanvas({ fragment: vareFragmentShader, uniforms: () => vareUniforms(rampRef.current, paramsRef.current), pointer: true, pointerEase: POINTER_EASE, stillTime: STILL_TIME, maxDpr: 1.5, renderScale: 0.8, onFrame: (u, frame) => { const half = Math.max(frame.height, 1) / 2; if (interactiveRef.current) { mouse.current[0] = approach( mouse.current[0], frame.pointer.x / half, POINTER_EASE, ); mouse.current[1] = approach( mouse.current[1], frame.pointer.y / half, POINTER_EASE, ); } setVareColors(u, rampRef.current); setVareParams(u, paramsRef.current); setVareFrame(u, { time: frame.time * speedRef.current, mouse: mouse.current, pointer: interactiveRef.current ? frame.pointer.amount : 0, alpha: opacityRef.current, absorb: blendUniform(blendRef.current), }); }, }); const { redraw } = canvas; // biome-ignore lint/correctness/useExhaustiveDependencies: the still frame must repaint when the ramp or the blend changes. React.useEffect(() => { redraw(); }, [redraw, ramp, blend]); const on = canvas.active; return (

{ canvas.containerRef.current = node; scopeRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) forwardedRef.current = node; }} data-blend={blend} className={cn("relative isolate overflow-hidden", className)} {...props} > {on ? ( ) : null} {children}

); }, ); Vare.displayName = "Vare"; 61:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","ogl",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/ogl","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"ogl"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://usva.build/r/atmospheres-core.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"vare-field.ts","content":"$64","type":"registry:ui","target":"components/ui/vare-field.ts"},{"path":"vare-shader.ts","content":"$65","type":"registry:ui","target":"components/ui/vare-shader.ts"},{"path":"vare-uniforms.ts","content":"$66","type":"registry:ui","target":"components/ui/vare-uniforms.ts"},{"path":"vare.tsx","content":"$67","type":"registry:ui","target":"components/ui/vare.tsx"}],"className":"h-[70svh] min-h-80"}]]}]