16:I[54961,["/_next/static/immutable/chunks/23kzrxojb_1p2.js","/_next/static/immutable/chunks/39h58d1utebdp.js","/_next/static/immutable/chunks/2nrtc1lb04fz1.js","/_next/static/immutable/chunks/21y0r7k6jovn5.js","/_next/static/immutable/chunks/31l88bjo9blmv.js","/_next/static/immutable/chunks/2z8nc0r40hilq.js","/_next/static/immutable/chunks/27fhzxv1uvtm8.js"],"default"] 17:T3141,'use client'; import { useEffect, useId, useRef, useState, type CSSProperties } from 'react'; import { vertex, fragment } from './liquid-form-shaders'; export type LiquidFormProps = { compact?: boolean; paused?: boolean; shape?: 'knot' | 'orbit' | 'bloom'; liquidity?: number; relief?: number; scale?: number; tint?: string; className?: string; }; const bound = (n: number, a: number, b: number) => Math.max(a, Math.min(b, Number.isFinite(n) ? n : a)); export default function LiquidForm({ compact = false, paused = false, shape = 'knot', liquidity = 0.8, relief = 0.35, scale = 1, tint = '#bdcaba', className = '', }: LiquidFormProps) { const root = useRef(null), canvas = useRef(null), sync = useRef<(() => void) | null>(null); const id = useId().replace(/:/g, ''); const [revision, setRevision] = useState(0); const options = useRef({ paused, shape, liquidity, relief, scale, tint }); options.current = { paused, shape, liquidity, relief, scale, tint }; useEffect(() => sync.current?.(), [paused, shape, liquidity, relief, scale, tint]); useEffect(() => { const host = root.current!, surface = canvas.current!, gl = surface.getContext('webgl2', { alpha: true, antialias: false, premultipliedAlpha: true, }); if (!gl) return; const shaders: WebGLShader[] = []; let program: WebGLProgram | null = null, buffer: WebGLBuffer | null = null; try { program = gl.createProgram()!; for (const [type, source] of [ [gl.VERTEX_SHADER, vertex], [gl.FRAGMENT_SHADER, fragment], ] as const) { const shader = gl.createShader(type)!; shaders.push(shader); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw Error( `Shader ${type}: ${gl.getShaderInfoLog(shader) || 'no log'}; lost=${gl.isContextLost()}; error=${gl.getError()}`, ); gl.attachShader(program, shader); } gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw Error('Shader link failed'); 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]), gl.STATIC_DRAW, ); const location = gl.getAttribLocation(program, 'position'); gl.enableVertexAttribArray(location); gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0); } catch (error) { console.warn('Liquid Form: WebGL fallback', error); shaders.forEach((shader) => gl.deleteShader(shader)); if (program) gl.deleteProgram(program); if (buffer) gl.deleteBuffer(buffer); return; } shaders.forEach((shader) => gl.deleteShader(shader)); const uniforms = Object.fromEntries( [ 'resolution', 'pointer', 'presence', 'time', 'shape', 'liquidity', 'relief', 'scale', 'tint', ].map((name) => [name, gl.getUniformLocation(program!, name)]), ); const media = matchMedia('(prefers-reduced-motion: reduce)'), coarse = matchMedia('(pointer: coarse)').matches; const target = { x: 0, y: 0, presence: 0 }, current = { ...target }; let frame = 0, last = 0, clock = 0, visible = true, gone = false, lastInput = 0, release = 0; function draw() { if (gone || gl!.isContextLost()) return; const o = options.current; gl!.useProgram(program); gl!.viewport(0, 0, surface.width, surface.height); gl!.uniform2f(uniforms.resolution, surface.width, surface.height); gl!.uniform2f(uniforms.pointer, current.x, current.y); gl!.uniform1f(uniforms.presence, media.matches ? 0 : current.presence); for (const [key, value] of Object.entries({ time: clock, shape: ['knot', 'orbit', 'bloom'].indexOf(o.shape), liquidity: bound(o.liquidity, 0, 1.5), relief: bound(o.relief, 0, 1), scale: bound(o.scale, 0.6, 1.3), })) gl!.uniform1f(uniforms[key], value); const hex = /^#[\da-f]{6}$/i.test(o.tint) ? o.tint : '#bdcaba', rgb = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255); gl!.uniform3f(uniforms.tint, rgb[0], rgb[1], rgb[2]); gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4); host.dataset.ready = 'true'; } function stop() { cancelAnimationFrame(frame); frame = 0; } function tick(now: number) { frame = 0; if ( gone || !visible || document.hidden || options.current.paused || media.matches ) return; const dt = Math.min(0.05, (now - last) / 1000); last = now; clock += dt; const alpha = 1 - Math.exp(-dt * 9); current.x += (target.x - current.x) * alpha; current.y += (target.y - current.y) * alpha; current.presence += (target.presence - current.presence) * alpha; draw(); if ( Math.abs(target.x - current.x) + Math.abs(target.y - current.y) + Math.abs(target.presence - current.presence) > 0.002 || now - lastInput < 900 ) frame = requestAnimationFrame(tick); } function wake() { if ( !frame && !gone && visible && !document.hidden && !options.current.paused && !media.matches ) { last = performance.now(); frame = requestAnimationFrame(tick); } } function resize() { const r = host.getBoundingClientRect(); let dpr = Math.min(window.devicePixelRatio || 1, compact || coarse ? 1 : 1.5); dpr = Math.min(dpr, Math.sqrt(900000 / Math.max(1, r.width * r.height))); surface.width = Math.max(1, Math.round(r.width * dpr)); surface.height = Math.max(1, Math.round(r.height * dpr)); draw(); } function move(event: PointerEvent) { if (options.current.paused || media.matches) return; const r = host.getBoundingClientRect(); target.x = bound(((event.clientX - r.left) / r.width) * 2 - 1, -1, 1); target.y = bound(1 - ((event.clientY - r.top) / r.height) * 2, -1, 1); target.presence = 1; lastInput = performance.now(); wake(); } function leave() { target.presence = 0; wake(); } function up(event: PointerEvent) { if (event.pointerType === 'touch') { clearTimeout(release); release = window.setTimeout(leave, 450); } } function key(event: KeyboardEvent) { if ( event.target !== host || options.current.paused || media.matches || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', ' '].includes( event.key, ) ) return; event.preventDefault(); if (event.key === 'Home') { target.x = target.y = target.presence = 0; } else { target.x = bound( target.x + (event.key === 'ArrowLeft' ? -0.18 : event.key === 'ArrowRight' ? 0.18 : 0), -1, 1, ); target.y = bound( target.y + (event.key === 'ArrowUp' ? 0.18 : event.key === 'ArrowDown' ? -0.18 : 0), -1, 1, ); target.presence = 1; lastInput = performance.now(); } wake(); } function visibility() { if (document.hidden) stop(); else wake(); } const resizeObserver = new ResizeObserver(resize), observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (visible) wake(); else stop(); }); resizeObserver.observe(host); observer.observe(host); const changed = () => { stop(); if (media.matches) { current.x = current.y = current.presence = 0; } draw(); wake(); }; sync.current = changed; media.addEventListener('change', changed); document.addEventListener('visibilitychange', visibility); host.addEventListener('pointermove', move); host.addEventListener('pointerdown', move); host.addEventListener('pointerup', up); host.addEventListener('pointerleave', leave); host.addEventListener('pointercancel', leave); host.addEventListener('keydown', key); host.addEventListener('blur', leave); const lost = (event: Event) => { event.preventDefault(); stop(); delete host.dataset.ready; }; const restored = () => setRevision((value) => value + 1); surface.addEventListener('webglcontextlost', lost); surface.addEventListener('webglcontextrestored', restored); resize(); return () => { gone = true; stop(); clearTimeout(release); sync.current = null; resizeObserver.disconnect(); observer.disconnect(); media.removeEventListener('change', changed); document.removeEventListener('visibilitychange', visibility); host.removeEventListener('pointermove', move); host.removeEventListener('pointerdown', move); host.removeEventListener('pointerup', up); host.removeEventListener('pointerleave', leave); host.removeEventListener('pointercancel', leave); host.removeEventListener('keydown', key); host.removeEventListener('blur', leave); surface.removeEventListener('webglcontextlost', lost); surface.removeEventListener('webglcontextrestored', restored); gl.deleteBuffer(buffer); gl.deleteProgram(program); delete host.dataset.ready; }; }, [compact, revision]); const bloom = Array.from({ length: 80 }, (_, i) => { const a = (i / 80) * Math.PI * 2, r = 106 + 13 * Math.cos(a * 5); return `${i ? 'L' : 'M'}${200 + Math.cos(a) * r},${200 + Math.sin(a) * r}`; }).join('') + 'Z'; return (

); } const styles = `.liquid-form{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:100%;min-height:0;overflow:hidden;touch-action:pan-y;background:radial-gradient(ellipse at 50% 55%,#22302766,transparent 62%)}.liquid-form>canvas,.liquid-form>.lf-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}.liquid-form>canvas{opacity:0;transition:opacity 650ms cubic-bezier(.22,1,.36,1)}.liquid-form>.lf-fallback{opacity:1;transition:opacity 650ms cubic-bezier(.22,1,.36,1)}.liquid-form[data-ready=true]>canvas{opacity:1}.liquid-form[data-ready=true]>.lf-fallback{opacity:0}.liquid-form:focus-visible{outline:1px solid #fff;outline-offset:-5px}@media(prefers-reduced-motion:reduce){.liquid-form>canvas,.liquid-form>.lf-fallback{transition:none}}html[data-theme=light] .liquid-form{background:radial-gradient(ellipse at 50% 47%,#fff,#f1eee8 74%)}html[data-theme=light] .liquid-form:focus-visible{outline-color:#302c28}`; 18:T98a,/** Motiqo's procedural metal sculpture. No textures, image sampling or borrowed shader engine. */ export const vertex = `#version 300 es in vec2 position; void main(){gl_Position=vec4(position,0.,1.);}`; export const fragment = `#version 300 es precision highp float; out vec4 colour; uniform vec2 resolution; uniform vec2 pointer; uniform float presence,time,liquidity,relief,shape,scale; uniform vec3 tint; mat2 turn(float a){float c=cos(a),s=sin(a);return mat2(c,-s,s,c);} float join(float a,float b,float k){float h=clamp(.5+.5*(b-a)/k,0.,1.);return mix(b,a,h)-k*h*(1.-h);} float ring(vec3 p,float r,float w){return length(vec2(length(p.xy)-r,p.z))-w;} vec3 pose(vec3 p){p.xz=turn(-.3+pointer.x*presence*.28)*p.xz;p.yz=turn(.25-pointer.y*presence*.23)*p.yz;return p;} float field(vec3 p){ p=pose(p); float wake=exp(-dot(p.xy-pointer*1.35,p.xy-pointer*1.35)*2.8)*presence*liquidity; p.z+=wake*.14*sin(p.y*9.+time*2.1)*cos(p.x*7.-time*1.6); p.xy+=wake*.045*vec2(sin(p.y*12.+time),cos(p.x*11.-time)); float d=9.; if(shape<.5){ for(int i=0;i<3;i++){vec3 q=p;q.xy=turn(float(i)*2.094)*q.xy;q.xz=turn(.85)*q.xz;q.x+=.14;d=join(d,ring(q,.82,.19),.18);} }else if(shape<1.5){d=ring(p,.87,.24);} else{float angle=atan(p.y,p.x);d=ring(p,.87+.11*cos(angle*5.),.19);} return d+relief*.007*sin(atan(p.y,p.x)*70.+p.z*34.); } void main(){ vec2 uv=(gl_FragCoord.xy*2.-resolution)/min(resolution.x,resolution.y); vec3 eye=vec3(0.,0.,4.7/scale),ray=normalize(vec3(uv*1.05,-3.)); float b=dot(eye,ray),disc=b*b-dot(eye,eye)+2.56; if(disc<0.){colour=vec4(0.);return;} float travel=max(0.,-b-sqrt(disc)),end=-b+sqrt(disc);bool hit=false; vec3 p=eye; for(int i=0;i<70;i++){p=eye+ray*travel;float d=field(p);if(d<.0018){hit=true;break;}travel+=max(.001,d*.72);if(travel>end)break;} if(!hit){colour=vec4(0.);return;} vec2 e=vec2(.0024,0.);vec3 n=normalize(vec3(field(p+e.xyy)-field(p-e.xyy),field(p+e.yxy)-field(p-e.yxy),field(p+e.yyx)-field(p-e.yyx))); vec3 light=normalize(vec3(-.6,1.1,1.8)),v=-ray,h=normalize(light+v); float diffuse=max(dot(n,light),0.),spec=pow(max(dot(n,h),0.),74.),rim=pow(1.-max(dot(n,v),0.),3.); vec3 reflected=reflect(ray,n); float studio=pow(max(dot(reflected,normalize(vec3(1.2,.7,1.8))),0.),18.); vec3 metal=tint*(.11+diffuse*.42)+vec3(.94,.97,.91)*(spec*.62+studio*.45)+rim*vec3(.24,.3,.27); metal*=.86+.14*smoothstep(-1.,1.,p.y); colour=vec4(sqrt(max(metal,vec3(0.))),1.); }`; b:["$","$L16",null,{"initialView":"preview","originalSource":{"liquid-sculpture":[{"name":"liquid-form.tsx","code":"$17"},{"name":"liquid-form-shaders.ts","code":"$18"}]},"initialElement":"liquid-sculpture","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]