4f: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"] 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:Tf43,import { type BlendMode, pigmentFor, type Rgb, } from "./atmospheres-color"; export interface RoutaParams { /** Frost cells across one short-side unit. */ cellScale: number; /** Height of the heaved cell interiors. */ heave: number; /** Width of the fissure at each cell wall. */ crackWidth: number; /** How far the cell walls fall below the heaved surface. */ crackDepth: number; /** Spatial frequency of the broad unevenness under the frost. */ unevenScale: number; /** How differently neighbouring cells lift. */ uneven: number; /** Domain travel per second. Deliberately close to still. */ drift: number; /** One-shot fissure propagation per second. */ growthRate: number; /** Height-gradient gain before the normal is built. */ slope: number; /** Oren-Nayar roughness. */ rough: number; /** Ambient fill under the raking key. */ ambient: number; /** Strength of the raking key. */ key: number; /** How much damp the clay holds in the lee of a heave. Light grounds only. */ relief: number; /** Dither amplitude for dark-ground emission. */ dither: number; } export const ROUTA_DEFAULTS: RoutaParams = { cellScale: 3.8, heave: 0.075, crackWidth: 0.055, crackDepth: 0.045, unevenScale: 0.72, uneven: 0.34, drift: 0.0025, growthRate: 0.028, slope: 1.35, rough: 0.92, ambient: 0.32, key: 0.88, relief: 0.18, dither: 0.005, }; export function resolveParams( overrides: Partial = {}, ): RoutaParams { const merged = { ...ROUTA_DEFAULTS, ...overrides }; return { ...merged, cellScale: Math.max(merged.cellScale, 0.5), heave: Math.max(merged.heave, 0), crackWidth: Math.min(Math.max(merged.crackWidth, 0.005), 0.2), crackDepth: Math.max(merged.crackDepth, 0), uneven: Math.min(Math.max(merged.uneven, 0), 0.8), // Past about a third the damp stops reading as a lit surface and starts // competing with the fissures, which are the subject on clay. relief: Math.min(Math.max(merged.relief, 0), 0.35), drift: Math.max(merged.drift, 0), growthRate: Math.max(merged.growthRate, 0), rough: Math.min(Math.max(merged.rough, 0), 1), }; } export const ROUTA_ROLES = ["bg", "ink", "accent", "accent-alt"] as const; export type RoutaRole = (typeof ROUTA_ROLES)[number]; export interface RoutaColors { /** The dark pigment held in the fissures on clay. */ pigment: Rgb; /** The cold raking key caught by heaved crests on a dark ground. */ emission: Rgb; /** The frozen surface itself on a dark ground. */ body: Rgb; /** Under the surface: the fissures, and ground the key never reaches. */ fissure: Rgb; } function mix(a: Rgb, b: Rgb, t: number): Rgb { return [ a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t, ]; } /** * The theme swap changes the material, not the shader, the way kynnös already * does it. On clay the fissures hold pigment and the frost is what is left of * the ground. On a dark ground it is black ice: a surface that is always there, * a grazing key that only the heaved crests catch, and fissures cut below it. * * The body is the whole point. Without one the shader painted crests and left * everything between them transparent, so the relief had nothing to sit on and * read as lumps of glow rather than frozen earth. */ export function buildColors( roles: Record, mode: BlendMode, keyColor?: Rgb, ): RoutaColors { const hue = mode === "absorptive" ? roles.accent : roles["accent-alt"]; return { pigment: pigmentFor(hue, roles.ink), emission: keyColor ?? mix(roles.accent, roles.ink, 0.55), body: mix(roles.bg, roles.ink, 0.09), fissure: mix(roles.bg, [0, 0, 0], 0.55), }; } /** A low raking key, cold and long across the broken ground. */ export const DEFAULT_LIGHT: [number, number, number] = [-0.68, 0.46, 0.38]; 52:T136a,import { glsl } from "./atmospheres-glsl"; export const routaVertexShader = /* glsl */ `#version 300 es in vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); } `; export const routaFragmentShader = /* glsl */ `#version 300 es precision highp float; uniform float uTime; uniform vec2 uResolution; uniform float uCellScale; uniform float uHeave; uniform float uCrackWidth; uniform float uCrackDepth; uniform float uUnevenScale; uniform float uUneven; uniform float uDrift; uniform float uGrowthRate; uniform float uSlope; uniform float uRough; uniform float uAmbient; uniform float uKey; uniform float uRelief; uniform float uDither; uniform float uAlpha; uniform float uAbsorb; uniform vec3 uLightDir; uniform vec3 uPigment; uniform vec3 uEmission; uniform vec3 uBody; uniform vec3 uFissure; uniform float uStainFloor; out vec4 fragColor; ${glsl("fbm", "worley", "dither", "stain", "composite")} const vec3 VIEW = vec3(0.0, 0.0, 1.0); const float SIGMA = 1.12; const float SOAK = 0.52; /** How far in from a fissure the plate has finished rising, in wall units. */ const float PLATE_EDGE = 0.2; vec2 frostAt(vec2 p) { vec2 travel = vec2(uTime * uDrift, -uTime * uDrift * 0.37); vec2 q = p + travel; float wall = craquelure(q * uCellScale); float fissure = 1.0 - smoothstep(0.0, uCrackWidth, wall); float arrival = fbm2( q * uCellScale * 0.55 + vec2(7.3, 1.9), 2 ) / 0.75; float progress = clamp(0.1 + uTime * uGrowthRate, 0.0, 1.0); fissure *= smoothstep(arrival - 0.08, arrival + 0.08, progress); /* A heaved plate is flat, and flatness is also what makes it drawable. craquelure is F2 - F1, whose slope kinks along the medial axis of every cell, where the second-nearest cell changes. The normal is built by differencing the height, so a slope kink becomes a hard seam straight across each plate. Doming the interior put a gradient there for the kink to bend; a flat interior gives it nothing, and the shape lands where it belongs, on the shoulder falling into the seam. */ float dome = smoothstep(uCrackWidth, uCrackWidth + PLATE_EDGE, wall); dome = dome * dome * (3.0 - 2.0 * dome); float broad = fbm2(q * uUnevenScale + vec2(13.1, -7.4), 3) / 0.875; float lift = dome * mix(1.0 - uUneven, 1.0 + uUneven, broad); return vec2(uHeave * lift - uCrackDepth * fissure, fissure); } float heightAt(vec2 p) { return frostAt(p).x; } float orenNayar(vec3 n, vec3 l, float rough) { float s2 = rough * rough; float a = 1.0 - 0.5 * s2 / (s2 + 0.33); float b = 0.45 * s2 / (s2 + 0.09); float ndl = dot(n, l); float ndv = dot(n, VIEW); float thetaL = acos(clamp(ndl, -1.0, 1.0)); float thetaV = acos(clamp(ndv, -1.0, 1.0)); float alpha = max(thetaL, thetaV); float beta = min(thetaL, thetaV); vec3 lp = l - n * ndl; vec3 vp = VIEW - n * ndv; float cosPhi = 0.0; if (length(lp) > 1e-4 && length(vp) > 1e-4) { cosPhi = max(dot(normalize(lp), normalize(vp)), 0.0); } return max(ndl, 0.0) * (a + b * cosPhi * sin(alpha) * tan(min(beta, 1.5))); } void main() { float unit = max(min(uResolution.x, uResolution.y), 1.0); vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / unit; vec2 field = frostAt(p); float height = field.x; float eps = 1.5 / unit; float heightX = heightAt(p + vec2(eps, 0.0)); float heightY = heightAt(p + vec2(0.0, eps)); vec3 normal = normalize(vec3( (height - heightX) * uSlope, (height - heightY) * uSlope, eps * 3.0 )); vec3 light = normalize(uLightDir); float diffuse = orenNayar(normal, light, uRough); float lit = clamp(uAmbient + uKey * diffuse, 0.0, 1.2); // Black ice. The ground is opaque and always painted, and the key only picks // out the crests: that surface is what separates frozen earth from a handful // of lit lumps floating on whatever happens to be behind the canvas. if (uAbsorb < 0.5) { float crest = smoothstep(0.0, uHeave, max(height, 0.0)); float rake = smoothstep(0.36, 1.0, lit); vec3 ground = mix(uFissure, uBody, smoothstep(0.18, 0.72, lit)); vec3 col = mix(ground, uEmission, crest * rake * 0.85); col = mix(col, uFissure, field.y * 0.9); col = dither(col, gl_FragCoord.xy, uDither); fragColor = composite(col, uAlpha); return; } /* Clay carries the heave as damp, never as a darker multiply: the multiply composite is inert under isolate, so a light ground can only show relief by holding more pigment. Wet in the lee of a plate, dry where the key lands. Kept out of the fissures so it never doubles with the pigment already there, and an order under them so the seams stay the subject. */ float relief = smoothstep(0.62, 0.18, lit) * (1.0 - field.y) * uRelief; float fissure = field.y * mix(1.0, 0.68, diffuse); vec3 absorbed = hold(uPigment, uStainFloor); float alpha = clamp(soak(fissure * SOAK + relief, SIGMA) * uAlpha, 0.0, 1.0); fragColor = vec4(absorbed * alpha, alpha); } `; 53:Ta2f,import { MAX_STAIN } from "./atmospheres-color"; import { setUniform, type Uniforms, } from "./atmospheres-gl"; import type { RoutaColors, RoutaParams } from "./routa-field"; export interface RoutaFrame { time: number; alpha: number; absorb: number; light: [number, number, number]; } export function routaUniforms( colors: RoutaColors, params: RoutaParams, light: [number, number, number], ): Uniforms { return { uTime: { value: 0 }, uResolution: { value: [1, 1] }, uCellScale: { value: params.cellScale }, uHeave: { value: params.heave }, uCrackWidth: { value: params.crackWidth }, uCrackDepth: { value: params.crackDepth }, uUnevenScale: { value: params.unevenScale }, uUneven: { value: params.uneven }, uDrift: { value: params.drift }, uGrowthRate: { value: params.growthRate }, uSlope: { value: params.slope }, uRough: { value: params.rough }, uAmbient: { value: params.ambient }, uKey: { value: params.key }, uRelief: { value: params.relief }, uDither: { value: params.dither }, uAlpha: { value: 1 }, uAbsorb: { value: 1 }, uLightDir: { value: [...light] }, uPigment: { value: [...colors.pigment] }, uEmission: { value: [...colors.emission] }, uBody: { value: [...colors.body] }, uFissure: { value: [...colors.fissure] }, uStainFloor: { value: MAX_STAIN }, }; } export function setRoutaColors(u: Uniforms, colors: RoutaColors): void { setUniform(u, "uPigment", [...colors.pigment]); setUniform(u, "uEmission", [...colors.emission]); setUniform(u, "uBody", [...colors.body]); setUniform(u, "uFissure", [...colors.fissure]); } export function setRoutaParams(u: Uniforms, params: RoutaParams): void { setUniform(u, "uCellScale", params.cellScale); setUniform(u, "uHeave", params.heave); setUniform(u, "uCrackWidth", params.crackWidth); setUniform(u, "uCrackDepth", params.crackDepth); setUniform(u, "uUnevenScale", params.unevenScale); setUniform(u, "uUneven", params.uneven); setUniform(u, "uDrift", params.drift); setUniform(u, "uGrowthRate", params.growthRate); setUniform(u, "uSlope", params.slope); setUniform(u, "uRough", params.rough); setUniform(u, "uAmbient", params.ambient); setUniform(u, "uKey", params.key); setUniform(u, "uRelief", params.relief); setUniform(u, "uDither", params.dither); } export function setRoutaFrame(u: Uniforms, frame: RoutaFrame): void { setUniform(u, "uTime", frame.time); setUniform(u, "uAlpha", frame.alpha); setUniform(u, "uAbsorb", frame.absorb); setUniform(u, "uLightDir", [...frame.light]); } 54:T10cd,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { type BlendMode, blendStyleFor, blendUniform, resolveBlendMode, resolveColor, } from "./atmospheres-color"; import { useGlCanvas } from "./use-gl-canvas"; import { useTokenColors } from "./use-token-colors"; import { buildColors, DEFAULT_LIGHT, ROUTA_ROLES, type RoutaParams, resolveParams, } from "./routa-field"; import { routaFragmentShader } from "./routa-shader"; import { routaUniforms, setRoutaColors, setRoutaFrame, setRoutaParams, } from "./routa-uniforms"; export interface RoutaLight { /** Keep z low: the heave only reads when the key rakes across it. */ direction?: [number, number, number]; /** Optional CSS colour for the dark-ground key. */ color?: string; } export interface RoutaProps extends React.HTMLAttributes { /** Domain drift multiplier. Defaults to 1 and remains barely perceptible. */ speed?: number; /** Force the material. By default the ground chooses frost-light or stain. */ mode?: BlendMode; /** Raking light direction and optional dark-ground colour. */ light?: RoutaLight; /** Overall opacity, 0..1. Defaults to 1. */ opacity?: number; /** Escape hatch for frost cell, fissure, and relief parameters. */ params?: Partial; children?: React.ReactNode; } const STILL_TIME = 27; export const Routa = React.forwardRef( ( { speed = 1, mode, light, opacity = 1, params, className, children, ...props }, forwardedRef, ) => { const lightColor = light?.color; const direction = light?.direction ?? DEFAULT_LIGHT; const speedRef = React.useRef(speed); speedRef.current = speed; const opacityRef = React.useRef(opacity); opacityRef.current = opacity; const lightRef = React.useRef(direction); lightRef.current = direction; const scopeRef = React.useRef(null); const tokens = useTokenColors(ROUTA_ROLES, { scopeRef }); const blend = resolveBlendMode(mode, tokens.bg); const colors = React.useMemo( () => buildColors( tokens.colors, blend, lightColor ? resolveColor(lightColor) : undefined, ), [tokens.colors, blend, lightColor], ); const colorsRef = React.useRef(colors); colorsRef.current = colors; const resolved = resolveParams(params); const paramsRef = React.useRef(resolved); paramsRef.current = resolved; const blendRef = React.useRef(blend); blendRef.current = blend; const canvas = useGlCanvas({ fragment: routaFragmentShader, stillTime: STILL_TIME, maxDpr: 1.5, uniforms: () => routaUniforms(colorsRef.current, paramsRef.current, lightRef.current), onFrame: (u, frame) => { setRoutaColors(u, colorsRef.current); setRoutaParams(u, paramsRef.current); setRoutaFrame(u, { time: frame.time * speedRef.current, alpha: opacityRef.current, absorb: blendUniform(blendRef.current), light: lightRef.current, }); }, }); const { redraw } = canvas; // biome-ignore lint/correctness/useExhaustiveDependencies: the still frame must repaint when the material, key, or ground changes. React.useEffect(() => { redraw(); }, [redraw, colors, direction, 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}

); }, ); Routa.displayName = "Routa"; 4e:["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@usva","registryDependencies":["https://usva.build/r/atmospheres-core.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"routa-field.ts","content":"$51","type":"registry:ui","target":"components/ui/routa-field.ts"},{"path":"routa-shader.ts","content":"$52","type":"registry:ui","target":"components/ui/routa-shader.ts"},{"path":"routa-uniforms.ts","content":"$53","type":"registry:ui","target":"components/ui/routa-uniforms.ts"},{"path":"routa.tsx","content":"$54","type":"registry:ui","target":"components/ui/routa.tsx"}],"className":"h-[70svh] min-h-80"}]]}]