16:I[54961,["/_next/static/immutable/chunks/10r1qlsoygogh.js","/_next/static/immutable/chunks/1_f1jqdld4ngu.js","/_next/static/immutable/chunks/19vifo6_mi-qi.js","/_next/static/immutable/chunks/3kb194ft35tsv.js","/_next/static/immutable/chunks/1kmzbl6k42gme.js","/_next/static/immutable/chunks/1ekzdpc_7chvz.js","/_next/static/immutable/chunks/3kscktpsmulhw.js","/_next/static/immutable/chunks/1wyf15k9llk8a.js"],"default"] 17:T1ca6,'use client'; import { useEffect, useRef, useState, type ReactNode } from 'react'; import { createNativeGL, nativeClamp, nativeColor } from './native-gl'; import { effectRuntime } from './effect-runtime'; import { kineticNoiseGLSL } from './kinetic-noise'; export type TopoContourProps = { contourDensity?: number; lineWidth?: number; scale?: number; warpStrength?: number; speed?: number; interactionRadius?: number; backgroundColor?: string; minorColor?: string; majorColor?: string; accentColor?: string; title?: string; children?: ReactNode; paused?: boolean; compact?: boolean; className?: string; }; export const topoShader = `uniform vec2 uResolution,uPointer,uOrigin;uniform float uTime,uSpeed,uDensity,uLine,uScale,uWarp,uRadius,uStrength,uWave,uAge;uniform vec3 uBackground,uMinor,uMajor,uAccent; ${kineticNoiseGLSL} float fbm(vec3 p){return .57*kSimplex(p)+.28*kSimplex(p*2.03)+.15*kSimplex(p*4.11);} float contour(float v,float width){float d=abs(fract(v-.5)-.5)/max(fwidth(v),.0001);return 1.-smoothstep(max(0.,width-.5),width+.65,d);} void main(){vec2 uv=vUv-.5;uv.x*=uResolution.x/uResolution.y;vec2 p=uv*uScale;float t=uTime*uSpeed*.12;vec2 q=vec2(fbm(vec3(p,t)),fbm(vec3(p+vec2(5.2,1.3),t*1.1)));float e=fbm(vec3(p+q*uWarp,t*.8));float d=length(uv-uPointer);e+=uStrength*.28*exp(-d*d/(2.*uRadius*uRadius));float waveDist=length(uv-uOrigin);e+=sin(waveDist*28.-uAge*8.)*exp(-waveDist*3.)*uWave*.1;float minor=contour(e*uDensity,uLine*.65),major=contour(e*uDensity/5.,uLine*1.15);vec3 col=uBackground+vec3(.008)*smoothstep(-.3,.6,e);col=mix(col,uMinor,minor*.35);col=mix(col,mix(uMajor,uAccent,smoothstep(.1,.6,e)*.4+uStrength*exp(-d*5.)*.5),major*.48);float vignette=1.-smoothstep(.2,1.1,length(vUv-.5));fragColor=vec4(mix(uBackground,col,vignette),1.);}`; export default function TopoContour(props: TopoContourProps) { const host = useRef(null), canvas = useRef(null), config = useRef(props), invalidate = useRef(() => {}), wave = useRef(() => {}), [failed, setFailed] = useState(false); config.current = props; useEffect(() => { const root = host.current!, el = canvas.current!; let gpu: ReturnType | undefined, runtime: ReturnType | undefined; let x = 0, y = 0, px = 0, py = 0, strength = 0, inside = false, amp = 0, age = 0, ox = 0, oy = 0; const cleanup = () => { runtime?.dispose(); gpu?.dispose(); }; try { gpu = createNativeGL(el); const pass = gpu.pass(topoShader); runtime = effectRuntime( root, el, (time, dt) => { const p = config.current, a = 1 - Math.exp(-dt * 8); px += (x - px) * a; py += (y - py) * a; strength += ((inside ? 1 : 0) - strength) * a; amp *= Math.exp(-dt * 3); age += dt; gpu!.draw(pass, null, { uResolution: [el.width, el.height], uPointer: [px, py], uOrigin: [ox, oy], uTime: time, uSpeed: nativeClamp(p.speed ?? 1, 0, 3), uDensity: nativeClamp(p.contourDensity ?? 24, 4, 60), uLine: nativeClamp(p.lineWidth ?? 0.55, 0.4, 3), uScale: nativeClamp(p.scale ?? 1.65, 0.5, 4), uWarp: nativeClamp(p.warpStrength ?? 0.65, 0, 2), uRadius: nativeClamp(p.interactionRadius ?? 0.28, 0.08, 0.7), uStrength: strength, uWave: amp, uAge: age, uBackground: nativeColor(p.backgroundColor ?? '#05060a', '#05060a'), uMinor: nativeColor(p.minorColor ?? '#52525b', '#52525b'), uMajor: nativeColor(p.majorColor ?? '#e4e4e7', '#e4e4e7'), uAccent: nativeColor(p.accentColor ?? '#ededed', '#ededed'), }); }, () => !!config.current.paused, undefined, !!props.compact, ); invalidate.current = runtime.invalidate; const move = (e: PointerEvent) => { const r = root.getBoundingClientRect(); x = (((e.clientX - r.left) / r.width - 0.5) * r.width) / r.height; y = 0.5 - (e.clientY - r.top) / r.height; inside = true; runtime?.invalidate(); }; const leave = () => { inside = false; }; const click = () => { amp = 1; age = 0; ox = x; oy = y; runtime?.invalidate(); }; wave.current = click; const lost = (e: Event) => { e.preventDefault(); setFailed(true); runtime?.dispose(); }; el.addEventListener('webglcontextlost', lost); root.addEventListener('pointermove', move); root.addEventListener('pointerleave', leave); root.addEventListener('pointerdown', click); return () => { root.removeEventListener('pointermove', move); root.removeEventListener('pointerleave', leave); root.removeEventListener('pointerdown', click); el.removeEventListener('webglcontextlost', lost); wave.current = () => {}; invalidate.current = () => {}; cleanup(); }; } catch { setFailed(true); cleanup(); } }, []); useEffect(() => { invalidate.current(); }, [props]); return (

); } 18:T8b2,/** A demand-driven clock shared by the standalone optical effects. */ export function effectRuntime( host: HTMLElement, canvas: HTMLCanvasElement, render: (time: number, dt: number) => void | boolean, paused: () => boolean, resize?: (width: number, height: number, dpr: number) => void, compact = false, ) { let frame = 0, disposed = false, visible = true, last = 0, time = 2.5, dirty = true; const reduced = matchMedia('(prefers-reduced-motion: reduce)'); function tick(now: number) { frame = 0; if (disposed || !visible || document.hidden) return; const still = paused() || reduced.matches; const dt = Math.min((now - (last || now)) / 1000, 0.04); last = now; if (!still) time += dt; if (dirty || !still) { dirty = false; if (render(time, still ? 0 : dt) !== false) host.dataset.ready = 'true'; } if (!still) frame = requestAnimationFrame(tick); } function invalidate() { dirty = true; if (!disposed && !frame && visible && !document.hidden) frame = requestAnimationFrame(tick); } const ro = new ResizeObserver(() => { const w = Math.max(1, host.clientWidth), h = Math.max(1, host.clientHeight), dpr = Math.min(devicePixelRatio || 1, compact ? 1.5 : 2); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); resize?.(w, h, dpr); invalidate(); }); ro.observe(host); const io = new IntersectionObserver((entries) => { visible = entries[0].isIntersecting; last = 0; if (visible) invalidate(); else { cancelAnimationFrame(frame); frame = 0; } }); io.observe(host); function visibility() { last = 0; if (document.hidden) { cancelAnimationFrame(frame); frame = 0; } else invalidate(); } document.addEventListener('visibilitychange', visibility); reduced.addEventListener('change', invalidate); invalidate(); return { invalidate, dispose() { disposed = true; cancelAnimationFrame(frame); ro.disconnect(); io.disconnect(); document.removeEventListener('visibilitychange', visibility); reduced.removeEventListener('change', invalidate); }, }; } 19:T1be1,export type GLTarget = { texture: WebGLTexture; framebuffer: WebGLFramebuffer; width: number; height: number; }; type Uniform = number | readonly number[] | { texture: WebGLTexture } | { vec4Array: Float32Array }; export type GLPass = { program: WebGLProgram; locations: Map; }; const vertex = `#version 300 es precision highp float;out vec2 vUv; void main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);vUv=p;gl_Position=vec4(p*2.-1.,0.,1.);}`; const header = `#version 300 es precision highp float;precision highp sampler2D;in vec2 vUv;out vec4 fragColor; `; /** Small WebGL2 owner shared by the native fluid and brush renderers. */ export function createNativeGL(canvas: HTMLCanvasElement, alpha = false) { const context = canvas.getContext('webgl2', { alpha, premultipliedAlpha: false, antialias: false, depth: false, stencil: false, powerPreference: 'high-performance', }); if (!context) throw Error('WebGL2 is unavailable'); const gl = context; const programs = new Set(), textures = new Set(), targets = new Set(); let disposed = false; const vao = gl.createVertexArray(); if (!vao) throw Error('Vertex array unavailable'); gl.bindVertexArray(vao); gl.disable(gl.DEPTH_TEST); gl.disable(gl.BLEND); function pass(body: string): GLPass { const shaders: WebGLShader[] = []; let program: WebGLProgram | null = null; try { for (const [type, code] of [ [gl.VERTEX_SHADER, vertex], [gl.FRAGMENT_SHADER, header + body], ] as const) { const shader = gl.createShader(type); if (!shader) throw Error('Shader unavailable'); shaders.push(shader); gl.shaderSource(shader, code); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw Error(gl.getShaderInfoLog(shader) || 'Shader compilation failed'); } program = gl.createProgram(); if (!program) throw Error('Program unavailable'); shaders.forEach((s) => gl.attachShader(program!, s)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw Error(gl.getProgramInfoLog(program) || 'Program linking failed'); programs.add(program); return { program, locations: new Map() }; } catch (error) { if (program) gl.deleteProgram(program); throw error; } finally { shaders.forEach((s) => gl.deleteShader(s)); } } function texture() { const t = gl.createTexture(); if (!t) throw Error('Texture unavailable'); textures.add(t); gl.bindTexture(gl.TEXTURE_2D, t); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 255, 255, 255]), ); return t; } function upload(t: WebGLTexture, source: TexImageSource) { gl.bindTexture(gl.TEXTURE_2D, t); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); try { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source); } finally { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); } } function target(width: number, height: number, floating = false): GLTarget { const t = texture(), framebuffer = gl.createFramebuffer(); if (!framebuffer) { gl.deleteTexture(t); textures.delete(t); throw Error('Framebuffer unavailable'); } gl.bindTexture(gl.TEXTURE_2D, t); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, floating ? gl.NEAREST : gl.LINEAR, ); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, floating ? gl.NEAREST : gl.LINEAR, ); gl.texImage2D( gl.TEXTURE_2D, 0, floating ? gl.RGBA16F : gl.RGBA8, width, height, 0, gl.RGBA, floating ? gl.HALF_FLOAT : gl.UNSIGNED_BYTE, null, ); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0); if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) { gl.deleteFramebuffer(framebuffer); gl.deleteTexture(t); textures.delete(t); throw Error('Framebuffer is not renderable'); } const result = { texture: t, framebuffer, width, height }; targets.add(result); gl.viewport(0, 0, width, height); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); return result; } function release(t: GLTarget) { if (!targets.delete(t)) return; gl.deleteFramebuffer(t.framebuffer); gl.deleteTexture(t.texture); textures.delete(t.texture); } function draw( p: GLPass, destination: GLTarget | null, uniforms: Record = {}, ) { gl.bindVertexArray(vao); gl.useProgram(p.program); gl.bindFramebuffer(gl.FRAMEBUFFER, destination?.framebuffer ?? null); gl.viewport( 0, 0, destination?.width ?? canvas.width, destination?.height ?? canvas.height, ); let unit = 0; for (const [name, value] of Object.entries(uniforms)) { if (!p.locations.has(name)) p.locations.set(name, gl.getUniformLocation(p.program, name)); const location = p.locations.get(name)!; if (location === null) continue; if (typeof value === 'number') gl.uniform1f(location, value); else if ('texture' in value) { gl.activeTexture(gl.TEXTURE0 + unit); gl.bindTexture(gl.TEXTURE_2D, value.texture); gl.uniform1i(location, unit++); } else if ('vec4Array' in value) gl.uniform4fv(location, value.vec4Array); else if (value.length === 2) gl.uniform2f(location, value[0], value[1]); else if (value.length === 3) gl.uniform3f(location, value[0], value[1], value[2]); else if (value.length === 4) gl.uniform4f(location, value[0], value[1], value[2], value[3]); } gl.drawArrays(gl.TRIANGLES, 0, 3); } return { gl, pass, texture, upload, target, release, draw, dispose() { if (disposed) return; disposed = true; targets.forEach(release); programs.forEach((p) => gl.deleteProgram(p)); programs.clear(); textures.forEach((t) => gl.deleteTexture(t)); textures.clear(); gl.deleteVertexArray(vao); }, }; } export const nativeClamp = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, Number.isFinite(n) ? n : lo)); export function nativeColor(hex: string, fallback: string): [number, number, number] { const h = /^#[\da-f]{6}$/i.test(hex) ? hex : fallback; return [ parseInt(h.slice(1, 3), 16) / 255, parseInt(h.slice(3, 5), 16) / 255, parseInt(h.slice(5, 7), 16) / 255, ]; } b:["$","$L16",null,{"viewer":{"user":null,"pro":false,"plan":null,"renewsAt":null,"cancelAtPeriodEnd":false,"provider":null},"initialView":"preview","originalSource":{"topo-contour":[{"name":"topo-contour.tsx","code":"$17"},{"name":"effect-runtime.ts","code":"$18"},{"name":"native-gl.ts","code":"$19"},{"name":"kinetic-noise.ts","code":"/** Tetrahedral 3D simplex gradient noise, shared by the wave and membrane shaders. */\nexport const kineticNoiseGLSL = `\nvec3 kGradient(vec3 p){p=vec3(dot(p,vec3(127.1,311.7,74.7)),dot(p,vec3(269.5,183.3,246.1)),dot(p,vec3(113.5,271.9,124.6)));return normalize(-1.+2.*fract(sin(p)*43758.5453));}\nfloat kSimplex(vec3 p){\n vec3 cell=floor(p+dot(p,vec3(1./3.)));vec3 x=p-cell+dot(cell,vec3(1./6.));\n vec3 rank=step(x.yzx,x.xyz),low=1.-rank;vec3 a=min(rank,low.zxy),b=max(rank,low.zxy);\n vec3 x1=x-a+1./6.,x2=x-b+1./3.,x3=x-.5;\n vec4 w=max(.6-vec4(dot(x,x),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);w*=w;w*=w;\n return 32.*dot(w,vec4(dot(kGradient(cell),x),dot(kGradient(cell+a),x1),dot(kGradient(cell+b),x2),dot(kGradient(cell+1.),x3)));\n}\n`;\n"}]},"initialElement":"topo-contour","initialConfiguration":"$undefined","initialSaved":false,"initialTag":"","initialGroup":"$undefined","initialFree":false}]