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:T34d8,'use client'; import { useEffect, useRef, useState, type CSSProperties } from 'react'; import { createNativeGL, nativeClamp } from './native-gl'; import { effectRuntime } from './effect-runtime'; import { galleryFragment } from './gallery-shaders'; import { galleryCover, galleryWrap, paintGalleryStudy, type GallerySlide, } from './carousel-art'; export type OpticalGalleryProps = { slides?: GallerySlide[]; duration?: number; strength?: number; autoplay?: number; ink?: string; paused?: boolean; compact?: boolean; className?: string; style?: CSSProperties; height?: number | string; onChange?: (index: number) => void; ariaLabel?: string; }; type Props = OpticalGalleryProps & { mode: 'water' | 'iris'; defaults: GallerySlide[]; }; /** Shared resource ownership; the two public galleries have different optical transitions. */ export function OpticalGallery({ slides, defaults, mode, duration = 1450, strength = 1, autoplay = 0, ink = '#f4f0e8', paused = false, compact = false, className = '', style, height, onChange, ariaLabel, }: Props) { const collection = slides?.length ? slides : defaults, root = useRef(null), canvas = useRef(null); const [index, setIndex] = useState(0), [generation, restart] = useState(0), [fallback, setFallback] = useState(), [fallbackNext, setFallbackNext] = useState(); const request = useRef<(dir: number, origin?: [number, number]) => void>(() => {}), sync = useRef<() => void>(() => {}), down = useRef<{ x: number; y: number } | null>(null); const options = useRef({ duration, strength, autoplay, paused, onChange }); options.current = { duration, strength, autoplay, paused, onChange }; useEffect(() => { const host = root.current!, surface = canvas.current!; let dead = false, visible = true, focused = false, hovered = false, active = 0, elapsed = 0, idle = 0, transition: { from: number; to: number; origin: [number, number]; p: number; } | null = null, queued: number | null = null; let gpu: ReturnType | undefined, pass: ReturnType['pass']> | undefined; const textures: WebGLTexture[] = [], sizes: [number, number][] = [], urls: string[] = [], images: HTMLImageElement[] = []; setIndex(0); delete host.dataset.ready; try { gpu = createNativeGL(surface); pass = gpu.pass(galleryFragment); setFallback(undefined); } catch { gpu?.dispose(); gpu = undefined; } let loaded = false; const reduced = matchMedia('(prefers-reduced-motion: reduce)'); const begin = (target: number, origin: [number, number] = [0.5, 0.5]) => { if (!loaded || collection.length < 2) return; const to = galleryWrap(target, collection.length); if (transition) { queued = to; return; } if (to === active) return; idle = 0; setIndex(to); options.current.onChange?.(to); if (reduced.matches || options.current.paused) { active = to; if (!gpu) setFallback(urls[to]); setFallbackNext(undefined); clock.invalidate(); return; } transition = { from: active, to, origin, p: 0 }; host.dataset.transitioning = 'true'; host.dataset.slide = String(to); elapsed = 0; if (!gpu) { setFallback(urls[active]); setFallbackNext(urls[to]); } clock.invalidate(); }; request.current = (dir, origin) => begin((transition?.to ?? active) + dir, origin); const clock = effectRuntime( host, surface, (_, dt) => { if (!loaded) return false; // Count from the start of each reveal, including its animation time. if ( options.current.autoplay > 0 && !hovered && !focused && visible && !reduced.matches && !options.current.paused ) { idle += dt * 1000; if (!transition && idle >= Math.max(1800, options.current.autoplay)) begin(active + 1, [0.5, 0.5]); } if (transition) { elapsed += dt * 1000; transition.p = reduced.matches || options.current.paused ? 1 : Math.min(1, elapsed / nativeClamp(options.current.duration, 200, 5000)); if (!gpu) host.style.setProperty('--gallery-reveal', String(transition.p)); } if (gpu && pass) { const aspect = surface.width / surface.height, a = transition?.from ?? active, b = transition?.to ?? active; gpu.draw(pass, null, { uFrom: { texture: textures[a] }, uTo: { texture: textures[b] }, uResolution: [surface.width, surface.height], uFromCover: galleryCover(aspect, sizes[a][0] / sizes[a][1]), uToCover: galleryCover(aspect, sizes[b][0] / sizes[b][1]), uOrigin: transition?.origin ?? [0.5, 0.5], uProgress: transition?.p ?? 0, uMode: mode === 'water' ? 0 : 1, uStrength: nativeClamp(options.current.strength, 0, 2), uTime: 0, }); } if (transition?.p === 1) { active = transition.to; transition = null; if (!gpu) setFallback(urls[active]); setFallbackNext(undefined); delete host.dataset.transitioning; if (queued !== null) { const next = queued; queued = null; begin(next); } } }, () => options.current.paused, undefined, compact, ); sync.current = clock.invalidate; Promise.all( collection.map(async (slide, i) => { const study = paintGalleryStudy(slide); let image: HTMLImageElement | HTMLCanvasElement = study; if (slide.image) { const img = new Image(); images.push(img); img.crossOrigin = 'anonymous'; const ok = await new Promise((resolve) => { img.onload = () => resolve(true); img.onerror = () => resolve(false); img.src = slide.image!; }); if (ok) image = img; } if (dead) return; sizes[i] = [image.width, image.height]; urls[i] = image instanceof HTMLCanvasElement ? image.toDataURL('image/jpeg', 0.9) : image.src; if (gpu) { const tex = gpu.texture(); try { gpu.upload(tex, image); } catch { gpu.upload(tex, study); } textures[i] = tex; } }), ) .then(() => { if (dead) return; loaded = true; host.dataset.slide = '0'; if (!gpu) setFallback(urls[0]); clock.invalidate(); }) .catch(() => { if (!dead) { host.dataset.failed = 'true'; setFallback(''); } }); const enter = () => { hovered = true; }, leave = () => { hovered = false; }, focus = () => { focused = true; }, blur = (e: FocusEvent) => { if (!host.contains(e.relatedTarget as Node)) focused = false; }; host.addEventListener('pointerenter', enter); host.addEventListener('pointerleave', leave); host.addEventListener('focusin', focus); host.addEventListener('focusout', blur); const observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; }); observer.observe(host); const lost = (e: Event) => { e.preventDefault(); gpu?.dispose(); gpu = undefined; setFallback(urls[active]); clock.invalidate(); }; const restore = () => restart((n) => n + 1); surface.addEventListener('webglcontextlost', lost); surface.addEventListener('webglcontextrestored', restore); return () => { dead = true; request.current = () => {}; sync.current = () => {}; clock.dispose(); observer.disconnect(); gpu?.dispose(); images.forEach((img) => { img.onload = null; img.onerror = null; img.src = ''; }); host.removeEventListener('pointerenter', enter); host.removeEventListener('pointerleave', leave); host.removeEventListener('focusin', focus); host.removeEventListener('focusout', blur); surface.removeEventListener('webglcontextlost', lost); surface.removeEventListener('webglcontextrestored', restore); }; }, [collection, mode, compact, generation]); useEffect(() => sync.current(), [duration, strength, autoplay, paused]); const current = collection[galleryWrap(index, collection.length)]; return (

{ if (e.target !== e.currentTarget) return; if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') { e.preventDefault(); request.current(e.key === 'ArrowRight' ? 1 : -1); } }} onPointerDown={(e) => { if ((e.target as HTMLElement).closest('button')) return; down.current = { x: e.clientX, y: e.clientY }; }} onPointerUp={(e) => { const start = down.current; down.current = null; if (!start || (e.target as HTMLElement).closest('button')) return; const rect = e.currentTarget.getBoundingClientRect(), dx = e.clientX - start.x, dy = e.clientY - start.y; if (Math.abs(dy) > Math.max(35, Math.abs(dx))) return; const x = (e.clientX - rect.left) / rect.width, y = 1 - (e.clientY - rect.top) / rect.height; request.current(Math.abs(dx) > 35 ? (dx < 0 ? 1 : -1) : x < 0.33 ? -1 : 1, [ x, y, ]); }} onPointerCancel={() => { down.current = null; }} >

); } const styles = ` .mq-gallery{position:relative;isolation:isolate;width:100%;height:100%;min-height:240px;overflow:hidden;background:#080b10;color:var(--gallery-ink);font-family:inherit;touch-action:pan-y;outline:none;container-type:inline-size} .mq-gallery:focus-visible{outline:2px solid var(--gallery-ink);outline-offset:-4px} .mq-gallery>canvas,.mq-gallery-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .mq-gallery-fallback-next{opacity:var(--gallery-reveal,0)} .mq-gallery-navigation{position:absolute;bottom:clamp(18px,5cqw,32px);left:50%;translate:-50% 0;display:flex;gap:10px;padding:6px;border:1px solid #ffffff24;border-radius:99px;background:#080b102e;backdrop-filter:blur(16px);box-shadow:0 4px 24px #0002} .mq-gallery-navigation button{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #ffffff26;color:inherit;background:#080b1040;cursor:pointer;transition:background .3s,border-color .3s,scale .3s;line-height:1} .mq-gallery-navigation button:hover{background:#ffffff25;border-color:#ffffff70;scale:1.06}.mq-gallery-navigation button:active{transform:none;scale:.95}.mq-gallery-navigation button:disabled{opacity:.3;cursor:default} .mq-gallery-navigation svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;transform:none} .mq-gallery button:focus-visible{outline:2px solid currentColor;outline-offset:4px} .mq-gallery-sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden} .mq-gallery-compact .mq-gallery-navigation{bottom:16px;padding:4px;gap:6px}.mq-gallery-compact .mq-gallery-navigation button{width:36px;height:36px} @media(prefers-reduced-motion:reduce){.mq-gallery button{transition:none}} `; 18:T1327,/** Original, asset-free Motiqo studies. Custom photographs can replace any study. */ export type GallerySlide = { image?: string; title?: string; caption?: string; alt?: string; palette?: 'tide' | 'ember' | 'glacier' | 'violet'; seed?: number; }; export const tidalSlides: GallerySlide[] = [ { image: '/media/gallery/image-01.webp', alt: 'Motiqo image study 1', }, { image: '/media/gallery/image-02.webp', alt: 'Motiqo image study 2', }, { image: '/media/gallery/image-03.webp', alt: 'Motiqo image study 3', }, { image: '/media/gallery/image-04.webp', alt: 'Motiqo image study 4', }, { image: '/media/gallery/image-05.webp', alt: 'Motiqo image study 5', }, { image: '/media/gallery/image-06.webp', alt: 'Motiqo image study 6', }, ]; export const irisSlides: GallerySlide[] = [ { image: '/media/gallery/image-04.webp', alt: 'Motiqo image study 4', }, { image: '/media/gallery/image-05.webp', alt: 'Motiqo image study 5', }, { image: '/media/gallery/image-06.webp', alt: 'Motiqo image study 6', }, { image: '/media/gallery/image-01.webp', alt: 'Motiqo image study 1', }, { image: '/media/gallery/image-02.webp', alt: 'Motiqo image study 2', }, { image: '/media/gallery/image-03.webp', alt: 'Motiqo image study 3', }, ]; export function galleryWrap(index: number, count: number) { return count > 0 ? ((index % count) + count) % count : 0; } export function galleryCover(box: number, image: number): [number, number] { return box > image ? [1, image / box] : [box / image, 1]; } function random(seed: number) { let n = seed | 0; return () => { n = (Math.imul(n ^ (n >>> 15), 1 | n) + 0x6d2b79f5) | 0; return ((n ^ (n >>> 14)) >>> 0) / 4294967296; }; } export function paintGalleryStudy(slide: GallerySlide) { const c = document.createElement('canvas'); c.width = 1200; c.height = 900; const g = c.getContext('2d')!; const colors = { tide: ['#071c2b', '#b3ced0', '#0d4f60', '#061e2c', '#d9ebe3'], ember: ['#251f38', '#edb18d', '#9a605c', '#282c46', '#ffe5b7'], glacier: ['#132e4b', '#d1e6e4', '#6490a2', '#153449', '#efffff'], violet: ['#161930', '#bd9eae', '#5c648a', '#1d284a', '#e2d5e3'], }[slide.palette ?? 'tide']; const r = random(slide.seed ?? 17), sky = g.createLinearGradient(0, 0, 0, 650); sky.addColorStop(0, colors[0]); sky.addColorStop(1, colors[1]); g.fillStyle = sky; g.fillRect(0, 0, 1200, 900); const sx = 760 + r() * 160, sy = 210 + r() * 70; const haze = g.createRadialGradient(sx, sy, 5, sx, sy, 460); haze.addColorStop(0, colors[4] + '8a'); haze.addColorStop(0.35, colors[1] + '2a'); haze.addColorStop(1, colors[1] + '00'); g.fillStyle = haze; g.fillRect(0, 0, 1200, 800); g.fillStyle = colors[4] + 'b0'; g.beginPath(); g.arc(sx, sy, 32, 0, Math.PI * 2); g.fill(); // Long atmospheric wisps, interrupted by the darker land masses below. for (let j = 0; j < 75; j++) { const y = r() * 490; g.strokeStyle = colors[1] + Math.floor(r() * 12 + 2) .toString(16) .padStart(2, '0'); g.lineWidth = 2 + r() * 9; g.beginPath(); g.ellipse(r() * 1200, y, 140 + r() * 500, 1 + r() * 3, -0.05, 0, Math.PI * 2); g.stroke(); } for (let layer = 0; layer < 7; layer++) { const phase = r() * 7, base = 400 + layer * 38; g.fillStyle = colors[layer < 3 ? 2 : 3] + ['55', '77', '99', 'aa', 'cc', 'ee', 'ff'][layer]; g.beginPath(); g.moveTo(0, 900); for (let x = 0; x <= 1200; x += 3) { const u = x / 1200, peak = Math.pow(Math.max(0, Math.sin(u * 4.1 + phase)), 3); const y = base - peak * (120 + layer * 14) - Math.sin(u * 17 + phase) * 23 - Math.sin(u * 53 + phase) * 5; g.lineTo(x, y); } g.lineTo(1200, 900); g.closePath(); g.fill(); } const sea = g.createLinearGradient(0, 565, 0, 900); sea.addColorStop(0, colors[1]); sea.addColorStop(0.06, colors[2]); sea.addColorStop(1, colors[0]); g.fillStyle = sea; g.beginPath(); g.moveTo(380, 565); g.bezierCurveTo(670, 585, 140, 790, 0, 900); g.lineTo(1200, 900); g.lineTo(1200, 565); g.fill(); g.save(); g.clip(); for (let i = 0; i < 2400; i++) { const y = 565 + r() * 335, x = r() * 1200; g.strokeStyle = colors[4] + Math.floor(6 + r() * 24) .toString(16) .padStart(2, '0'); g.lineWidth = 0.4 + r() * 0.7; g.beginPath(); g.moveTo(x, y); g.lineTo(x + 3 + r() * (y - 550) * 0.25, y); g.stroke(); } g.restore(); const pixels = g.getImageData(0, 0, 1200, 900); for (let i = 0; i < pixels.data.length; i += 4) { const grain = (r() - 0.5) * 9; for (let k = 0; k < 3; k++) pixels.data[i + k] += grain; } g.putImageData(pixels, 0, 0); return c; } 19:T675,export const galleryFragment = ` uniform sampler2D uFrom,uTo; uniform vec2 uResolution,uFromCover,uToCover,uOrigin; uniform float uProgress,uMode,uStrength,uTime; vec3 imageAt(sampler2D tex,vec2 uv,vec2 cover){return texture(tex,(uv-.5)*cover+.5).rgb;} void main(){ vec2 uv=vUv,aspect=vec2(uResolution.x/uResolution.y,1.); vec2 p=(uv-uOrigin)*aspect;float distanceToOrigin=length(p); float farthest=length(max(uOrigin,1.-uOrigin)*aspect); float t=clamp(uProgress,0.,1.);float radius=mix(-.1,farthest+.15,t); float delta=distanceToOrigin-radius; vec2 direction=p/max(distanceToOrigin,.001)/aspect; float envelope=sin(t*3.14159265); vec2 offset=vec2(0.);float mask=0.,glint=0.; if(uMode<.5){ float wave=sin(delta*62.-t*15.)*exp(-abs(delta)*16.); float wake=sin(delta*115.+t*8.)*exp(-abs(delta+.065)*23.)*.28; offset=direction*(wave+wake)*.026*uStrength*envelope; mask=1.-smoothstep(-.025,.025,delta); glint=pow(max(0.,cos(delta*62.-t*15.)),10.)*exp(-abs(delta)*22.)*.18*envelope; }else{ float angle=atan(p.y,p.x);float blade=cos(angle*6.+t*.75); float iris=radius+(blade*.014+sin(angle*12.+t)*.003)*envelope; float edge=distanceToOrigin-iris; mask=1.-smoothstep(-.002,.002,edge); offset=direction*exp(-abs(edge)*70.)*.018*envelope; glint=exp(-abs(edge)*350.)*.36*envelope; } if(t<=0.)mask=0.;if(t>=1.)mask=1.; vec3 a=imageAt(uFrom,uv+offset,uFromCover),b=imageAt(uTo,uv-offset*.7,uToCover); vec3 col=mix(a,b,mask); if(uMode<.5){col.r+=imageAt(uTo,uv+offset*1.4,uToCover).r*abs(offset.x)*1.3;} col+=glint*vec3(.76,.9,1.); float vignette=1.-.26*pow(length((uv-.5)*1.2),1.7);col*=vignette; fragColor=vec4(col,1.); }`; 1a: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, ]; } 1b: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); }, }; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"water-ripple-carousel":[{"name":"water-ripple-carousel.tsx","code":"'use client';\nimport { OpticalGallery, type OpticalGalleryProps } from './optical-gallery';\nimport { tidalSlides } from './carousel-art';\nexport type { GallerySlide } from './carousel-art';\nexport type WaterRippleCarouselProps = OpticalGalleryProps;\n/** Tidal: a refractive wavefront with a smaller trailing capillary wake. */\nexport default function WaterRippleCarousel({\n autoplay = 2500,\n ...props\n}: WaterRippleCarouselProps) {\n return (\n \n );\n}\n"},{"name":"optical-gallery.tsx","code":"$17"},{"name":"carousel-art.ts","code":"$18"},{"name":"gallery-shaders.ts","code":"$19"},{"name":"native-gl.ts","code":"$1a"},{"name":"effect-runtime.ts","code":"$1b"}]},"initialElement":"water-ripple-carousel","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]