Motiqo Liquid Relic — authored metallic artwork

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:T28f1,'use client'; import { useEffect, useRef } from 'react'; import { LiquidEngine, type EngineOptions } from './liquid-particle-engine'; /** Motiqo interactive artwork with its elastic material and filament engine. */ export type LiquidRelicProps = { src?: string; imageAlt?: string; label?: string; compact?: boolean; paused?: boolean; strength?: number; radius?: number; particleSpread?: number; turbulence?: number; liquid?: number; returnSpeed?: number; speed?: number; dotSize?: number; particleDensity?: number; restStyle?: 'image' | 'particles'; sculptureScale?: number; className?: string; }; const limit = (value: number, min: number, max: number) => Math.max(min, Math.min(max, Number.isFinite(value) ? value : min)); export default function LiquidRelic({ src = '/media/liquid-relic.svg', imageAlt = 'A sculpted metal Motiqo symbol', label = 'Liquid Relic, an interactive particle sculpture', compact = false, paused = false, strength = 1, radius = 220, particleSpread = 1, turbulence = 1, liquid = 1, returnSpeed = 1, speed = 1, dotSize = 1, particleDensity = 0.8, restStyle = 'image', sculptureScale = 1, className = '', }: LiquidRelicProps) { const root = useRef(null), image = useRef(null); const sync = useRef<(() => void) | null>(null); const options = useRef({ paused, strength, radius, particleSpread, turbulence, liquid, returnSpeed, speed, dotSize, particleDensity, restStyle, sculptureScale, }); options.current = { paused, strength, radius, particleSpread, turbulence, liquid, returnSpeed, speed, dotSize, particleDensity, restStyle, sculptureScale, }; useEffect(() => { const host = root.current!, fallback = image.current!, canvas = document.createElement('canvas'); canvas.className = 'lr-canvas'; canvas.setAttribute('aria-hidden', 'true'); host.appendChild(canvas); const media = matchMedia('(prefers-reduced-motion: reduce)'); let instance: LiquidEngine | null = null, gone = false, visible = true, aspect = 1, lastSmall: boolean | undefined; const hand = { x: 0.5, y: 0.35 }; const settings = (): EngineOptions => { const o = options.current, small = compact || host.clientWidth < 500; return { compact: small, paused: o.paused, interactive: !o.paused && !media.matches, reducedMotion: media.matches, strength: limit(o.strength, 0, 2), radius: limit(o.radius, 40, 600), density: Math.min(small ? 0.35 : 1.2, limit(o.particleDensity, 0.15, 1.2)), spread: limit(o.particleSpread, 0, 2), turbulence: limit(o.turbulence, 0, 2), liquid: limit(o.liquid, 0, 2), returnSpeed: limit(o.returnSpeed, 0.2, 2), speed: limit(o.speed, 0.25, 3), dotSize: limit(o.dotSize, 0.2, 3), streaks: true, restStyle: o.restStyle, ambient: false, ambientIntensity: 0, intro: false, bg: [10 / 255, 16 / 255, 16 / 255], imgBg: null, }; }; function layout() { const w = host.clientWidth, h = host.clientHeight; if (!w || !h) return; const small = compact || w < 500; if (small !== lastSmall) { lastSmall = small; instance?.setOptions(settings()); } let rw = w * 0.92 * limit(options.current.sculptureScale, 0.6, 1.2); rw = Math.min( rw, h * 0.92 * limit(options.current.sculptureScale, 0.6, 1.2) * aspect, ); const rh = rw / aspect, rect = { x: (w - rw) / 2, y: (h - rh) / 2, w: rw, h: rh }; Object.assign(fallback.style, { left: `${rect.x}px`, top: `${rect.y}px`, width: `${rw}px`, height: `${rh}px`, }); instance?.resize(w, h, rect); if (instance) host.dataset.particles = String(instance.particleCount); } function updateVisibility() { instance?.setVisible(visible && !document.hidden); } function changed() { instance?.setOptions(settings()); layout(); updateVisibility(); if (instance) host.dataset.particles = String(instance.particleCount); } function fail() { if (!gone) host.dataset.gl = 'off'; } try { instance = new LiquidEngine(canvas, settings(), fail); } catch { fail(); } const bitmap = new Image(); bitmap.crossOrigin = 'anonymous'; bitmap.decoding = 'async'; bitmap.onload = () => { if (gone) return; aspect = bitmap.naturalWidth / bitmap.naturalHeight || 1; layout(); if (!instance) return; try { instance.onFirstFrame = () => { if (!gone) host.dataset.gl = 'on'; }; instance.setImage(bitmap); host.dataset.particles = String(instance.particleCount); layout(); updateVisibility(); } catch { fail(); instance.destroy(); instance = null; } }; bitmap.onerror = fail; bitmap.src = src; const resize = new ResizeObserver(layout), intersection = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; updateVisibility(); }); resize.observe(host); intersection.observe(host); function pointer(event: PointerEvent, type: 'move' | 'down' | 'up' | 'leave') { if (options.current.paused || media.matches) return; if ( event.pointerType === 'touch' && type === 'move' && !event.buttons && !event.pressure ) return; const b = host.getBoundingClientRect(); instance?.pointer( type, event.clientX - b.left, event.clientY - b.top, event.pointerType === 'touch', ); } const move = (event: PointerEvent) => pointer(event, 'move'), down = (event: PointerEvent) => pointer(event, 'down'); const up = (event: PointerEvent) => pointer(event, 'up'), leave = (event: PointerEvent) => pointer(event, 'leave'); const blur = () => instance?.pointer('leave', 0, 0, false); function key(event: KeyboardEvent) { if ( event.target !== host || options.current.paused || media.matches || ![ 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', ' ', 'Enter', ].includes(event.key) ) return; event.preventDefault(); if (event.key === 'Home') { hand.x = 0.5; hand.y = 0.35; blur(); return; } hand.x = limit( hand.x + (event.key === 'ArrowLeft' ? -0.08 : event.key === 'ArrowRight' ? 0.08 : 0), 0.1, 0.9, ); hand.y = limit( hand.y + (event.key === 'ArrowUp' ? -0.08 : event.key === 'ArrowDown' ? 0.08 : 0), 0.1, 0.9, ); instance?.pointer( event.key === ' ' || event.key === 'Enter' ? 'down' : 'move', hand.x * host.clientWidth, hand.y * host.clientHeight, false, ); } sync.current = changed; media.addEventListener('change', changed); document.addEventListener('visibilitychange', updateVisibility); host.addEventListener('pointermove', move); host.addEventListener('pointerdown', down); host.addEventListener('pointerup', up); host.addEventListener('pointercancel', leave); host.addEventListener('pointerleave', leave); host.addEventListener('blur', blur); host.addEventListener('keydown', key); layout(); return () => { gone = true; sync.current = null; bitmap.onload = bitmap.onerror = null; resize.disconnect(); intersection.disconnect(); media.removeEventListener('change', changed); document.removeEventListener('visibilitychange', updateVisibility); host.removeEventListener('pointermove', move); host.removeEventListener('pointerdown', down); host.removeEventListener('pointerup', up); host.removeEventListener('pointercancel', leave); host.removeEventListener('pointerleave', leave); host.removeEventListener('blur', blur); host.removeEventListener('keydown', key); instance?.destroy(); canvas.remove(); delete host.dataset.gl; delete host.dataset.particles; }; }, [src, compact]); useEffect( () => sync.current?.(), [ paused, strength, radius, particleSpread, turbulence, liquid, returnSpeed, speed, dotSize, particleDensity, restStyle, sculptureScale, ], ); return (

Move or touch to draw liquid trails through the artwork. Arrow keys move the disturbance; Space stirs the material and Home lets it settle.

); } const styles = `.liquid-relic{position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden;touch-action:pan-y;background:radial-gradient(ellipse at 50% 52%,#33333333,transparent 65%),#0b0b0b}.liquid-relic .lr-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 600ms cubic-bezier(.22,1,.36,1);pointer-events:none}.liquid-relic .lr-fallback{position:absolute;inset:5%;width:90%;height:90%;max-width:none;object-fit:contain;user-select:none;pointer-events:none;opacity:1;transition:opacity 600ms cubic-bezier(.22,1,.36,1)}.liquid-relic[data-gl=on] .lr-canvas{opacity:1}.liquid-relic[data-gl=on] .lr-fallback{opacity:0}.liquid-relic .lr-help{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.liquid-relic:focus-visible{outline:1px solid #fff;outline-offset:-5px}@media(prefers-reduced-motion:reduce){.liquid-relic .lr-canvas,.liquid-relic .lr-fallback{transition:none}}html[data-theme=light] .liquid-relic{background:radial-gradient(ellipse at 50% 47%,#fff,#f1eee8 74%)}html[data-theme=light] .liquid-relic:focus-visible{outline-color:#302c28}`; 18:T46ff,/** * Motiqo material engine: an advected elastic lattice deforms the intact image * and releases colored filaments along the stroke. CPU springs reconstruct * the artwork; instanced WebGL2 ribbons follow each particle's velocity. */ import { SURFACE_VERTEX, SURFACE_FRAGMENT, GRAIN_VERTEX, GRAIN_FRAGMENT, } from './liquid-particle-shaders'; import { MaterialWake } from './liquid-material-wake'; export type Rect = { x: number; y: number; w: number; h: number }; export interface EngineOptions { paused?: boolean; compact?: boolean; interactive: boolean; strength: number; radius: number; density: number; dotSize: number; spread: number; turbulence: number; returnSpeed: number; streaks: boolean; restStyle: 'image' | 'particles'; ambient: boolean; ambientIntensity: number; speed: number; intro: boolean; reducedMotion: boolean; bg: [number, number, number]; imgBg: [number, number, number] | null; liquid: number; } type Program = { program: WebGLProgram; uniforms: Record; }; const clamp = (v: number, a: number, b: number) => Math.max(a, Math.min(b, v)); export class LiquidEngine { onFirstFrame: (() => void) | null = null; lastImage: HTMLImageElement | null = null; get particleCount() { return this.anchors.length / 2; } private gl: WebGL2RenderingContext; private options: EngineOptions; private surface: Program | null = null; private grains: Program | null = null; private texture: WebGLTexture | null = null; private wakeTexture: WebGLTexture | null = null; private wakeField = new MaterialWake(); private material = new Float32Array(3); private vao: WebGLVertexArrayObject | null = null; private buffers: WebGLBuffer[] = []; private anchors = new Float32Array(0); private positions = new Float32Array(0); private velocities = new Float32Array(0); private colors = new Float32Array(0); private variations = new Float32Array(0); private rect: Rect = { x: 0, y: 0, w: 1, h: 1 }; private sampleCount = 1; private width = 1; private height = 1; private dpr = 1; private presented = false; private frame = 0; private last = 0; private time = 0; private visible = true; private dead = false; private lost = false; private target = { x: 0, y: 0, active: 0, down: false }; private hand = { x: 0, y: 0, active: 0 }; constructor( private canvas: HTMLCanvasElement, options: EngineOptions, private failure: () => void, ) { this.options = { ...options }; const gl = canvas.getContext('webgl2', { alpha: true, antialias: false, premultipliedAlpha: true, }); if (!gl) throw new Error('WebGL2 unavailable'); this.gl = gl; try { this.allocate(); } catch (error) { this.release(); throw error; } canvas.addEventListener('webglcontextlost', this.contextLost); canvas.addEventListener('webglcontextrestored', this.contextRestored); } private program(vertex: string, fragment: string): Program { const gl = this.gl, program = gl.createProgram(); if (!program) throw new Error('Program allocation failed'); const shaders: WebGLShader[] = []; try { for (const [type, source] of [ [gl.VERTEX_SHADER, vertex], [gl.FRAGMENT_SHADER, fragment], ] as const) { const shader = gl.createShader(type); if (!shader) throw new Error('Shader allocation failed'); shaders.push(shader); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error('Particle shader compilation failed'); gl.attachShader(program, shader); } gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error('Particle program link failed'); const uniforms: Program['uniforms'] = {}; for (let i = 0; i < gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); i++) { const info = gl.getActiveUniform(program, i); if (info) uniforms[info.name] = gl.getUniformLocation(program, info.name); } return { program, uniforms }; } catch (error) { gl.deleteProgram(program); throw error; } finally { shaders.forEach((shader) => gl.deleteShader(shader)); } } private allocate() { const gl = this.gl; this.surface = this.program(SURFACE_VERTEX, SURFACE_FRAGMENT); this.grains = this.program(GRAIN_VERTEX, GRAIN_FRAGMENT); this.texture = gl.createTexture(); this.wakeTexture = gl.createTexture(); this.vao = gl.createVertexArray(); if (!this.texture || !this.wakeTexture || !this.vao) throw new Error('Particle resource allocation failed'); gl.bindTexture(gl.TEXTURE_2D, this.wakeTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 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.bindVertexArray(this.vao); for (let i = 0; i < 3; i++) { const buffer = gl.createBuffer(); if (!buffer) throw new Error('Particle buffer allocation failed'); this.buffers.push(buffer); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.enableVertexAttribArray(i); gl.vertexAttribPointer(i, i === 2 ? 2 : 4, gl.FLOAT, false, 0, 0); gl.vertexAttribDivisor(i, 1); } gl.bindVertexArray(null); } private release() { const gl = this.gl; this.buffers.forEach((buffer) => gl.deleteBuffer(buffer)); this.buffers = []; if (this.vao) gl.deleteVertexArray(this.vao); if (this.texture) gl.deleteTexture(this.texture); if (this.wakeTexture) gl.deleteTexture(this.wakeTexture); if (this.surface) gl.deleteProgram(this.surface.program); if (this.grains) gl.deleteProgram(this.grains.program); this.vao = null; this.texture = null; this.wakeTexture = null; this.surface = null; this.grains = null; } private upload() { if (!this.lastImage) return; const gl = this.gl; gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.lastImage); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 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.bindBuffer(gl.ARRAY_BUFFER, this.buffers[1]); gl.bufferData(gl.ARRAY_BUFFER, this.colors, gl.STATIC_DRAW); } private sample() { if (!this.lastImage) return; const image = this.lastImage, budget = Math.round( (this.options.compact ? 32000 : 100000) * clamp(this.options.density, 0.15, 1.2), ); const aspect = clamp(image.naturalWidth / image.naturalHeight, 0.1, 10); const w = Math.max(2, Math.round(Math.sqrt(budget * aspect))), h = Math.max(2, Math.round(budget / w)); this.sampleCount = w * h; const sample = document.createElement('canvas'); sample.width = w; sample.height = h; const context = sample.getContext('2d', { willReadFrequently: true }); if (!context) throw new Error('Image sampling unavailable'); context.drawImage(image, 0, 0, w, h); const data = context.getImageData(0, 0, w, h).data; const anchors: number[] = [], colors: number[] = [], variations: number[] = []; for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) { const offset = (y * w + x) * 4; if (data[offset + 3] < 20) continue; if ( this.options.imgBg && Math.hypot(...this.options.imgBg.map((c, i) => data[offset + i] / 255 - c)) < 0.08 ) continue; let hash = Math.imul(x + 1, 374761393) ^ Math.imul(y + 1, 668265263); hash = Math.imul(hash ^ (hash >>> 16), 0x7feb352d); hash = Math.imul(hash ^ (hash >>> 15), 0x846ca68b); hash = (hash ^ (hash >>> 16)) >>> 0; const jx = (hash & 65535) / 65535 - 0.5, jy = (hash >>> 16) / 65535 - 0.5; anchors.push((x + 0.5 + jx * 0.7) / w, (y + 0.5 + jy * 0.7) / h); variations.push(jx, jy); colors.push( data[offset] / 255, data[offset + 1] / 255, data[offset + 2] / 255, data[offset + 3] / 255, ); } this.anchors = new Float32Array(anchors); this.colors = new Float32Array(colors); this.variations = new Float32Array(variations); this.positions = new Float32Array(this.particleCount * 4); this.velocities = new Float32Array(this.particleCount * 2); this.reset(); this.upload(); } private reset() { for (let i = 0; i < this.particleCount; i++) { this.positions[i * 4] = this.rect.x + this.anchors[i * 2] * this.rect.w; this.positions[i * 4 + 1] = this.rect.y + this.anchors[i * 2 + 1] * this.rect.h; this.positions[i * 4 + 2] = this.options.restStyle === 'particles' ? 1 : 0; this.positions[i * 4 + 3] = 0; } this.velocities.fill(0); this.hand.active = 0; this.target.active = 0; this.wakeField.clear(); } setImage(image: HTMLImageElement) { if (this.dead) return; this.lastImage = image; this.sample(); this.wake(); } resize(width: number, height: number, rect: Rect) { if (this.dead) return; if ( this.width === width && this.height === height && this.rect.x === rect.x && this.rect.y === rect.y && this.rect.w === rect.w && this.rect.h === rect.h ) return; this.width = Math.max(1, width); this.height = Math.max(1, height); this.rect = { ...rect }; this.dpr = Math.min( window.devicePixelRatio || 1, 2, Math.sqrt(2400000 / (this.width * this.height)), ); this.canvas.width = Math.max(1, Math.round(this.width * this.dpr)); this.canvas.height = Math.max(1, Math.round(this.height * this.dpr)); this.reset(); this.wake(); } setOptions(options: Partial) { if (this.dead) return; const previous = this.options; this.options = { ...previous, ...options }; if ( this.lastImage && (previous.density !== this.options.density || previous.compact !== this.options.compact || previous.imgBg !== this.options.imgBg) ) this.sample(); else if (previous.restStyle !== this.options.restStyle) this.reset(); if (this.options.reducedMotion) { this.stop(); this.reset(); if (this.visible && !this.lost && this.lastImage) this.draw(); } else if (this.options.paused) this.stop(); else this.wake(); } setVisible(visible: boolean) { this.visible = visible; if (visible) this.wake(); else this.stop(); } pointer( type: 'move' | 'down' | 'up' | 'leave', x: number, y: number, touch: boolean, ) { if ( this.dead || this.options.paused || this.options.reducedMotion || !this.options.interactive ) return; if (!this.target.active && !this.hand.active && type !== 'leave') { this.hand.x = x; this.hand.y = y; } this.target = { x: type === 'leave' ? this.hand.x : clamp(x, 0, this.width), y: type === 'leave' ? this.hand.y : clamp(y, 0, this.height), active: type === 'leave' || (touch && type === 'up') ? 0 : 1, down: type === 'down' || (type === 'move' && this.target.down), }; this.wake(); } private stop() { if (this.frame) cancelAnimationFrame(this.frame); this.frame = 0; this.last = 0; } private wake() { if (this.dead || this.lost || !this.visible || !this.lastImage || this.frame) return; if (this.options.reducedMotion || this.options.paused) { this.draw(); return; } this.frame = requestAnimationFrame(this.tick); } private tick = (timestamp: number) => { this.frame = 0; if (this.dead || this.lost || !this.visible || this.options.paused) return; const dt = Math.min(this.last ? (timestamp - this.last) / 1000 : 1 / 60, 1 / 30) * clamp(this.options.speed, 0.25, 3); this.last = timestamp; this.time += dt; const moving = this.integrate(dt); this.draw(); if (moving || this.target.active || this.options.ambient) this.frame = requestAnimationFrame(this.tick); else this.last = 0; }; private integrate(dt: number) { const o = this.options, follow = 1 - Math.exp(-14 * dt); const fromX = this.hand.x, fromY = this.hand.y; this.hand.x += (this.target.x - this.hand.x) * follow; this.hand.y += (this.target.y - this.hand.y) * follow; this.hand.active += (this.target.active - this.hand.active) * follow; if (this.hand.active < 0.001 && !this.target.active) this.hand.active = 0; this.wakeField.step( dt, this.width, this.height, fromX, fromY, this.hand.x, this.hand.y, this.hand.active, this.target.down, o, this.time, ); const spring = 48 * o.returnSpeed, damping = Math.exp(-10 * dt); let energy = this.wakeField.activity; for (let i = 0; i < this.particleCount; i++) { const p = i * 4, v = i * 2, hx = this.rect.x + this.anchors[v] * this.rect.w, hy = this.rect.y + this.anchors[v + 1] * this.rect.h; this.wakeField.sample(hx, hy, this.width, this.height, this.material); const breakup = this.material[2]; const scatter = breakup * o.spread * o.turbulence * 28; const fx = this.material[0] + this.variations[v] * scatter; const fy = this.material[1] + this.variations[v + 1] * scatter; const phase = i * 2.39996323; const ambient = o.ambient ? o.ambientIntensity * Math.sin(this.time + phase) * 5 : 0; this.velocities[v] = (this.velocities[v] + (hx + fx + ambient - this.positions[p]) * spring * dt) * damping; this.velocities[v + 1] = (this.velocities[v + 1] + (hy + fy - this.positions[p + 1]) * spring * dt) * damping; this.positions[p] += this.velocities[v] * dt; this.positions[p + 1] += this.velocities[v + 1] * dt; const displacement = Math.hypot( this.positions[p] - hx, this.positions[p + 1] - hy, ); this.positions[p + 2] = o.restStyle === 'particles' ? 1 : breakup; this.positions[p + 3] = o.streaks ? Math.hypot(this.velocities[v], this.velocities[v + 1]) * 0.028 : 0; energy = Math.max( energy, displacement, Math.abs(this.velocities[v]), Math.abs(this.velocities[v + 1]), ); } if (energy < 0.02 && !this.target.active && !o.ambient) { this.reset(); return false; } return true; } private draw() { if (this.dead || this.lost || !this.lastImage || !this.surface || !this.grains) return; const gl = this.gl, s = this.surface, g = this.grains, o = this.options; gl.viewport(0, 0, this.canvas.width, this.canvas.height); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.bindVertexArray(null); gl.useProgram(s.program); gl.uniform2f(s.uniforms.uViewport, this.width, this.height); gl.uniform4f(s.uniforms.uRect, this.rect.x, this.rect.y, this.rect.w, this.rect.h); gl.uniform1f(s.uniforms.uRest, o.restStyle === 'particles' ? 1 : 0); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, this.wakeTexture); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, this.wakeField.size, this.wakeField.size, 0, gl.RGBA, gl.UNSIGNED_BYTE, this.wakeField.pixels, ); gl.uniform1i(s.uniforms.uWake, 1); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.uniform1i(s.uniforms.uImage, 0); gl.drawArrays(gl.TRIANGLES, 0, 6); gl.useProgram(g.program); gl.bindVertexArray(this.vao); gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[0]); gl.bufferData(gl.ARRAY_BUFFER, this.positions, gl.DYNAMIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[2]); gl.bufferData(gl.ARRAY_BUFFER, this.velocities, gl.DYNAMIC_DRAW); gl.uniform2f(g.uniforms.uViewport, this.width, this.height); gl.uniform1f(g.uniforms.uDpr, this.dpr); gl.uniform1f( g.uniforms.uDot, o.dotSize * Math.max( 0.8, Math.sqrt((this.rect.w * this.rect.h) / Math.max(1, this.sampleCount)), ) * 1.15, ); gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.particleCount); gl.bindVertexArray(null); if (!this.presented) { this.presented = true; this.onFirstFrame?.(); } } private contextLost = (event: Event) => { event.preventDefault(); this.lost = true; this.presented = false; this.stop(); this.failure(); }; private contextRestored = () => { if (this.dead) return; try { this.release(); this.allocate(); this.lost = false; this.upload(); this.reset(); this.wake(); } catch { this.release(); this.lost = true; this.failure(); } }; destroy() { if (this.dead) return; this.dead = true; this.stop(); this.onFirstFrame = null; this.canvas.removeEventListener('webglcontextlost', this.contextLost); this.canvas.removeEventListener('webglcontextrestored', this.contextRestored); this.release(); this.gl.getExtension('WEBGL_lose_context')?.loseContext(); this.lastImage = null; this.anchors = new Float32Array(0); this.positions = new Float32Array(0); this.velocities = new Float32Array(0); this.colors = new Float32Array(0); this.variations = new Float32Array(0); } } 19:T11c1,/** Motiqo's elastic material lattice. Strokes transport deformation and breakup * through neighboring cells; the material then relaxes back into its artwork. */ export class MaterialWake { readonly size = 56; readonly pixels = new Uint8Array(this.size * this.size * 4); private state = new Float32Array(this.size * this.size * 3); private next = new Float32Array(this.state.length); private scratch = new Float32Array(3); activity = 0; constructor() { this.clear(); } clear() { this.state.fill(0); this.next.fill(0); this.activity = 0; for (let i = 0; i < this.pixels.length; i += 4) { this.pixels[i] = this.pixels[i + 1] = 128; this.pixels[i + 2] = 0; this.pixels[i + 3] = 255; } } sample(x: number, y: number, width: number, height: number, out: Float32Array) { const n = this.size, gx = Math.max(0, Math.min(n - 1, (x / width) * n - 0.5)), gy = Math.max(0, Math.min(n - 1, (y / height) * n - 0.5)); const ix = Math.floor(gx), iy = Math.floor(gy), tx = gx - ix, ty = gy - iy; const a = (iy * n + ix) * 3, b = (iy * n + Math.min(n - 1, ix + 1)) * 3, c = (Math.min(n - 1, iy + 1) * n + ix) * 3, d = (Math.min(n - 1, iy + 1) * n + Math.min(n - 1, ix + 1)) * 3; for (let k = 0; k < 3; k++) out[k] = (this.state[a + k] * (1 - tx) + this.state[b + k] * tx) * (1 - ty) + (this.state[c + k] * (1 - tx) + this.state[d + k] * tx) * ty; } step( dt: number, width: number, height: number, fromX: number, fromY: number, x: number, y: number, presence: number, pressed: boolean, options: { radius: number; strength: number; liquid: number; spread: number; turbulence: number; returnSpeed: number; }, time: number, ) { const n = this.size, dx = x - fromX, dy = y - fromY, travel = dx * dx + dy * dy; const radius = Math.max(1, options.radius * 0.72), decay = Math.exp(-dt * (1.8 + options.returnSpeed * 1.6)); const speed = Math.min(1, Math.sqrt(travel) / Math.max(0.001, dt) / 650), limit = Math.min(126, Math.min(width, height) * 0.17); this.activity = 0; for (let row = 0; row < n; row++) for (let col = 0; col < n; col++) { const index = (row * n + col) * 3, px = ((col + 0.5) / n) * width, py = ((row + 0.5) / n) * height; this.sample( px - this.state[index] * dt * 1.8, py - this.state[index + 1] * dt * 1.8, width, height, this.scratch, ); const along = travel > 0.0001 ? Math.max(0, Math.min(1, ((px - fromX) * dx + (py - fromY) * dy) / travel)) : 1; const rx = px - fromX - along * dx, ry = py - fromY - along * dy; const influence = Math.exp(-(rx * rx + ry * ry) / (radius * radius)) * presence * options.strength; const twist = (pressed ? 30 : 9) * options.liquid * dt; const ripple = Math.sin(px * 0.022 + time * 1.7) * Math.cos(py * 0.019 - time) * options.turbulence; let ox = this.scratch[0] * decay + influence * (dx * 0.52 * options.liquid - (ry / radius) * twist + ripple * dt * 5); let oy = this.scratch[1] * decay + influence * (dy * 0.52 * options.liquid + (rx / radius) * twist - ripple * dt * 5); let breakup = Math.max( this.scratch[2] * decay, Math.min( 1, influence * (speed * 0.85 + (pressed ? 0.32 : 0)) * options.spread, ), ); ox = Math.max(-limit, Math.min(limit, ox)); oy = Math.max(-limit, Math.min(limit, oy)); if (Math.abs(ox) < 0.015) ox = 0; if (Math.abs(oy) < 0.015) oy = 0; if (breakup < 0.002) breakup = 0; this.next[index] = ox; this.next[index + 1] = oy; this.next[index + 2] = breakup; this.activity = Math.max( this.activity, Math.abs(ox), Math.abs(oy), breakup * 20, ); const pixel = (row * n + col) * 4; this.pixels[pixel] = Math.round(128 + (ox / 128) * 127); this.pixels[pixel + 1] = Math.round(128 + (oy / 128) * 127); this.pixels[pixel + 2] = Math.round(breakup * 255); } const previous = this.state; this.state = this.next; this.next = previous; } } 1a:T909,/** Motiqo: continuous material reconstruction and velocity-aligned filaments. */ export const SURFACE_VERTEX = `#version 300 es precision highp float; out vec2 uv; void main(){ vec2 corners[6]=vec2[6](vec2(0,0),vec2(1,0),vec2(0,1),vec2(0,1),vec2(1,0),vec2(1,1)); uv=corners[gl_VertexID]; gl_Position=vec4(uv*vec2(2,-2)+vec2(-1,1),0,1); }`; export const SURFACE_FRAGMENT = `#version 300 es precision highp float; uniform sampler2D uImage; uniform sampler2D uWake; uniform vec2 uViewport; uniform vec4 uRect; uniform float uRest; in vec2 uv; out vec4 color; void main(){ vec4 material=texture(uWake,uv); vec2 offset=(material.rg*255.-128.)/127.*128.; vec2 home=(uv*uViewport-offset-uRect.xy)/uRect.zw; if(any(lessThan(home,vec2(0)))||any(greaterThan(home,vec2(1)))){color=vec4(0);return;} vec4 pixel=texture(uImage,home); float released=texture(uWake,(uRect.xy+home*uRect.zw)/uViewport).b; float alpha=pixel.a*(1.-max(uRest,released)); color=vec4(pixel.rgb*alpha,alpha); }`; export const GRAIN_VERTEX = `#version 300 es precision highp float; layout(location=0) in vec4 aGrain; layout(location=1) in vec4 aColor; layout(location=2) in vec2 aVelocity; uniform vec2 uViewport; uniform float uDot; uniform float uDpr; out vec2 local; out float halfLength; out float radius; out vec4 tint; void main(){ vec2 corners[6]=vec2[6](vec2(-1,-1),vec2(1,-1),vec2(-1,1),vec2(-1,1),vec2(1,-1),vec2(1,1)); float speed=length(aVelocity); vec2 axis=speed>.01?aVelocity/speed:vec2(1,0); radius=max(.45,uDot*.5); halfLength=min(aGrain.w,12.); local=corners[gl_VertexID]*vec2(radius+halfLength+1./uDpr,radius+1./uDpr); vec2 p=aGrain.xy+axis*(local.x-halfLength*.45)+vec2(-axis.y,axis.x)*local.y; gl_Position=vec4(p/uViewport*vec2(2,-2)+vec2(-1,1),0,1); float sheen=min(.18,speed*.0006); tint=vec4(min(vec3(1),aColor.rgb*(1.+sheen)),aColor.a*aGrain.z); }`; export const GRAIN_FRAGMENT = `#version 300 es precision highp float; in vec2 local; in float halfLength; in float radius; in vec4 tint; uniform float uDpr; out vec4 color; void main(){ vec2 nearest=vec2(max(0.,abs(local.x)-halfLength),local.y); float coverage=clamp((radius-length(nearest))*uDpr+.5,0.,1.); float taper=1.-.28*smoothstep(-halfLength,halfLength+radius,-local.x); float alpha=tint.a*coverage*taper; color=vec4(tint.rgb*alpha,alpha); }`; 1b:T1846, b:["$","$L16",null,{"initialView":"preview","originalSource":{"liquid-relic":[{"name":"liquid-relic.tsx","code":"$17"},{"name":"liquid-particle-engine.ts","code":"$18"},{"name":"liquid-material-wake.ts","code":"$19"},{"name":"liquid-particle-shaders.ts","code":"$1a"},{"name":"liquid-relic.svg","code":"$1b"}]},"initialElement":"liquid-relic","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]