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:T6c0c,'use client'; import React, { useCallback, useEffect, useId, useRef, useState } from 'react'; import { createNativeGL, type GLPass } from './native-gl'; import { effectRuntime } from './effect-runtime'; export interface TidalLensProps { brand?: string; title?: string; subtitle?: string; image?: string; distortion?: number; dispersion?: number; speed?: number; autoPlay?: boolean; showIntro?: boolean; compact?: boolean; paused?: boolean; className?: string; style?: React.CSSProperties; } export interface RippleWave { x: number; y: number; radius: number; age: number; life: number; strength: number; } const MAX_WAVES = 14; const DEFAULT_IMAGE = '/media/gallery/image-16.webp'; const DEFAULT_BRAND = 'TIDAL LENS'; const DEFAULT_TITLE = 'LIQUID LIGHT.\nSTILL HORIZON.'; const DEFAULT_SUBTITLE = 'An optical surface study shaped by pointer velocity, subtle chromatic refraction, and calm typographic balance.'; function clamp(value: number, lo: number, hi: number): number { if (!Number.isFinite(value)) return lo; return Math.min(hi, Math.max(lo, value)); } function sanitizeImageUrl(url: string | undefined): string { if (!url) return DEFAULT_IMAGE; const trimmed = url.trim(); if (trimmed.startsWith('/') && !trimmed.startsWith('//')) return trimmed; try { const parsed = new URL(trimmed); if (parsed.protocol === 'https:' || parsed.protocol === 'http:') { return parsed.toString(); } } catch { return DEFAULT_IMAGE; } return DEFAULT_IMAGE; } /** * Exact 1:1 conversion from client pointer coordinates to WebGL2 fragment vUv coordinates: * vUv.x = [0 left .. 1 right], vUv.y = [0 bottom .. 1 top]. */ export function clientToShaderUV( clientX: number, clientY: number, rect: { left: number; top: number; width: number; height: number }, ): { x: number; y: number } { const w = Math.max(1, rect.width); const h = Math.max(1, rect.height); return { x: clamp((clientX - rect.left) / w, 0, 1), y: clamp(1 - (clientY - rect.top) / h, 0, 1), }; } export function createShowcaseWaves(): RippleWave[] { return [ { x: 0.38, y: 0.44, radius: 0.14, age: 0.36, life: 1.75, strength: 0.9 }, { x: 0.62, y: 0.56, radius: 0.19, age: 0.54, life: 1.85, strength: 0.78 }, { x: 0.51, y: 0.48, radius: 0.08, age: 0.2, life: 1.55, strength: 0.96 }, ]; } export function spawnRippleWave( waves: RippleWave[], x: number, y: number, strength = 0.85, life = 1.55, ): RippleWave[] { const next: RippleWave = { x: clamp(x, 0.01, 0.99), y: clamp(y, 0.01, 0.99), radius: 0.008, age: 0, life: clamp(life, 0.5, 3.2), strength: clamp(strength, 0.15, 1.5), }; const updated = [next, ...waves]; if (updated.length > MAX_WAVES) updated.length = MAX_WAVES; return updated; } export function stepRippleWaves( waves: RippleWave[], dt: number, speed = 1, ): RippleWave[] { const stepDt = clamp(dt, 0.001, 0.05) * clamp(speed, 0.2, 2.5); const alive: RippleWave[] = []; for (let i = 0; i < waves.length; i++) { const w = waves[i]; const age = w.age + stepDt; if (age >= w.life) continue; const expansionRate = 0.2 + 0.04 * w.strength; alive.push({ ...w, age, radius: w.radius + stepDt * expansionRate, }); } return alive; } function paintSeascapeFallbackCanvas( canvas: HTMLCanvasElement, img: HTMLImageElement | null, ): void { const ctx = canvas.getContext('2d'); if (!ctx) return; const w = canvas.width; const h = canvas.height; const grad = ctx.createLinearGradient(0, 0, 0, h); grad.addColorStop(0, '#0f1f3a'); grad.addColorStop(0.45, '#1d385c'); grad.addColorStop(0.75, '#4b5669'); grad.addColorStop(1, '#0c1626'); ctx.fillStyle = grad; ctx.fillRect(0, 0, w, h); if (img && img.complete && img.naturalWidth > 0) { const imgRatio = img.naturalWidth / img.naturalHeight; const boxRatio = w / h; let drawW = w; let drawH = h; let drawX = 0; let drawY = 0; if (imgRatio > boxRatio) { drawW = h * imgRatio; drawX = -(drawW - w) * 0.5; } else { drawH = w / imgRatio; drawY = -(drawH - h) * 0.5; } ctx.drawImage(img, drawX, drawY, drawW, drawH); const shade = ctx.createLinearGradient(0, 0, 0, h); shade.addColorStop(0, 'rgba(8, 12, 22, 0.34)'); shade.addColorStop(0.5, 'rgba(8, 10, 18, 0.2)'); shade.addColorStop(1, 'rgba(8, 10, 16, 0.44)'); ctx.fillStyle = shade; ctx.fillRect(0, 0, w, h); } } const TIDAL_FRAG_BODY = ` uniform sampler2D uTex; uniform float uAspect; uniform float uDistortion; uniform float uDispersion; uniform float uTime; uniform float uWaveCount; uniform vec4 uCursor; uniform vec4 uWaves[${MAX_WAVES}]; void main() { vec2 uv = vUv; vec2 totalDisp = vec2(0.0); float specularRim = 0.0; // Immediate smooth pointer liquid wake under cursor tip if (uCursor.w > 0.005) { vec2 cd = (uv - uCursor.xy) * vec2(uAspect, 1.0); float cDist = length(cd); vec2 cDir = cDist > 0.0001 ? cd / cDist : vec2(0.0, 1.0); float cWake = exp(-(cDist * cDist) / 0.0042) * sin(cDist * 70.0 - uTime * 7.0); float wakeAmp = (0.0042 + 0.0038 * uCursor.z) * uCursor.w * uDistortion; totalDisp += vec2(cDir.x / max(uAspect, 0.2), cDir.y) * (cWake * wakeAmp); specularRim += max(0.0, cWake) * 0.22 * uCursor.w; } // Refined localized concentric wave packets trailing cursor & clicks for (int i = 0; i < ${MAX_WAVES}; i++) { if (float(i) >= uWaveCount - 0.1) break; vec4 w = uWaves[i]; float radius = w.z; float fade = w.w; if (fade <= 0.001) continue; vec2 delta = (uv - w.xy) * vec2(uAspect, 1.0); float dist = length(delta); vec2 dir = dist > 0.0001 ? delta / dist : vec2(0.0, 1.0); float band = 0.018 + radius * 0.072; float diff = dist - radius; float envelope = exp(-(diff * diff) / (band * band)); float slope = (-2.0 * diff / (band * band)) * envelope; float innerMask = exp(-abs(diff) * 26.0) * smoothstep(0.006, 0.045, dist); float subOsc = sin(diff * 76.0 - uTime * 3.5) * innerMask; float wavePush = (slope * 0.00048 + subOsc * 0.0046) * fade * uDistortion; totalDisp += vec2(dir.x / max(uAspect, 0.2), dir.y) * wavePush; float crestLight = clamp(dot(dir, normalize(vec2(-0.55, 0.72))) * 0.45 + 0.65, 0.25, 1.15); float ridge = pow(envelope, 2.5) * crestLight + max(0.0, subOsc) * 0.26; specularRim += ridge * fade; } // Bounded displacement so refraction stays crisp and glassy float mag = length(totalDisp); if (mag > 0.018) { totalDisp *= 0.018 / mag; } vec2 uvR = clamp(uv + totalDisp * (1.0 + uDispersion), 0.001, 0.999); vec2 uvG = clamp(uv + totalDisp, 0.001, 0.999); vec2 uvB = clamp(uv + totalDisp * (1.0 - uDispersion), 0.001, 0.999); float r = texture(uTex, uvR).r; float g = texture(uTex, uvG).g; float b = texture(uTex, uvB).b; vec3 color = vec3(r, g, b); // Subtle glassy highlight along wave meniscus color += vec3(0.94, 0.97, 1.0) * clamp(specularRim * 0.22 * uDistortion, 0.0, 0.36); fragColor = vec4(color, 1.0); } `; export function TidalLens({ brand = DEFAULT_BRAND, title = DEFAULT_TITLE, subtitle = DEFAULT_SUBTITLE, image = DEFAULT_IMAGE, distortion = 0.85, dispersion = 0.2, speed = 1, autoPlay = true, showIntro = true, compact = false, paused = false, className = '', style, }: TidalLensProps) { const scopeId = useId().replace(/:/g, ''); const hostRef = useRef(null); const canvasRef = useRef(null); const curtainRef = useRef(null); const curtainCountRef = useRef(null); const safeImage = sanitizeImageUrl(image); const safeDistortion = clamp(distortion, 0.15, 2.0); const safeDispersion = clamp(dispersion, 0, 1.0); const safeSpeed = clamp(speed, 0.25, 2.5); const [reducedMotion, setReducedMotion] = useState(false); const [webglOff, setWebglOff] = useState(false); const [fallbackWaves, setFallbackWaves] = useState(() => createShowcaseWaves(), ); const [introDone, setIntroDone] = useState(!showIntro || compact || paused); const wavesRef = useRef(createShowcaseWaves()); const cursorRef = useRef({ active: false, targetX: 0.5, targetY: 0.5, smoothX: 0.5, smoothY: 0.5, lastSpawnX: 0.5, lastSpawnY: 0.5, speed: 0, presence: 0, lastInteractTs: 0, }); const autoSpawnClockRef = useRef(0); const cachedImgRef = useRef<{ src: string; img: HTMLImageElement } | null>(null); const invalidateRef = useRef<(() => void) | null>(null); const liveParamsRef = useRef({ distortion: safeDistortion, dispersion: safeDispersion, speed: safeSpeed, autoPlay, }); liveParamsRef.current = { distortion: safeDistortion, dispersion: safeDispersion, speed: safeSpeed, autoPlay, }; useEffect(() => { if (typeof window === 'undefined' || !window.matchMedia) return; const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); const sync = () => setReducedMotion(Boolean(mq.matches)); sync(); if (typeof mq.addEventListener === 'function') { mq.addEventListener('change', sync); return () => mq.removeEventListener('change', sync); } mq.addListener(sync); return () => mq.removeListener(sync); }, []); const still = paused || reducedMotion; const shouldPlayIntro = showIntro && !compact && !still; // Smooth 60fps DOM curtain reveal without React per-frame state updates useEffect(() => { if (!shouldPlayIntro) { setIntroDone(true); return; } setIntroDone(false); const startTs = performance.now(); const duration = 980 / clamp(safeSpeed, 0.5, 2); let rafId = 0; const tick = (now: number) => { const t = clamp((now - startTs) / duration, 0, 1); const countPct = Math.min(100, Math.round(clamp(t / 0.5, 0, 1) * 100)); const slideT = clamp((t - 0.54) / 0.46, 0, 1); const y = -(slideT * slideT * (3 - 2 * slideT)) * 106; if (curtainCountRef.current) { curtainCountRef.current.textContent = String(countPct).padStart(3, '0'); } if (curtainRef.current) { curtainRef.current.style.transform = `translate3d(0, ${y.toFixed(2)}%, 0)`; } if (t < 1) { rafId = requestAnimationFrame(tick); } else { setIntroDone(true); } }; rafId = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafId); }, [shouldPlayIntro, safeSpeed]); useEffect(() => { if (still) { wavesRef.current = createShowcaseWaves(); setFallbackWaves(wavesRef.current); invalidateRef.current?.(); } }, [still]); // WebGL2 optical wave surface via native-gl + effectRuntime useEffect(() => { const host = hostRef.current; const canvas = canvasRef.current; if (!host || !canvas) return; let glApi: ReturnType | null = null; let pass: GLPass | null = null; try { glApi = createNativeGL(canvas, false); pass = glApi.pass(TIDAL_FRAG_BODY); } catch { setWebglOff(true); host.dataset.ready = 'true'; return; } setWebglOff(false); const bgCanvas = document.createElement('canvas'); bgCanvas.width = compact ? 760 : 1280; bgCanvas.height = compact ? 428 : 720; let loadedImg: HTMLImageElement | null = cachedImgRef.current && cachedImgRef.current.src === safeImage ? cachedImgRef.current.img : null; let disposed = false; paintSeascapeFallbackCanvas(bgCanvas, loadedImg); const bgTex = glApi.texture(); glApi.upload(bgTex, bgCanvas); if (!loadedImg) { const img = new Image(); if (safeImage.startsWith('http://') || safeImage.startsWith('https://')) { img.crossOrigin = 'anonymous'; } img.onload = () => { cachedImgRef.current = { src: safeImage, img }; if (disposed || !glApi) return; loadedImg = img; paintSeascapeFallbackCanvas(bgCanvas, loadedImg); glApi.upload(bgTex, bgCanvas); runtime.invalidate(); }; img.onerror = () => { loadedImg = null; }; img.src = safeImage; } const waveUniform = new Float32Array(MAX_WAVES * 4); let aspect = 16 / 9; const runtime = effectRuntime( host, canvas, (time, dt) => { if (!glApi || !pass || disposed) return false; const p = liveParamsRef.current; const cur = cursorRef.current; if (!paused && !reducedMotion) { // 60fps cursor tracking + exact trail emission in shader UV space const chase = Math.min(1, Math.max(0.01, dt) * 18); const prevX = cur.smoothX; const prevY = cur.smoothY; cur.smoothX += (cur.targetX - cur.smoothX) * chase; cur.smoothY += (cur.targetY - cur.smoothY) * chase; const frameDist = Math.hypot(cur.smoothX - prevX, cur.smoothY - prevY); const instSpeed = dt > 0 ? clamp(frameDist / dt, 0, 3) : 0; cur.speed += (instSpeed - cur.speed) * Math.min(1, dt * 10); cur.presence += ((cur.active ? 1 : 0) - cur.presence) * Math.min(1, dt * 8); if (cur.active) { const trailDist = Math.hypot( cur.smoothX - cur.lastSpawnX, cur.smoothY - cur.lastSpawnY, ); if (trailDist > 0.022) { cur.lastSpawnX = cur.smoothX; cur.lastSpawnY = cur.smoothY; const str = clamp(0.42 + cur.speed * 0.28, 0.42, 1.05); wavesRef.current = spawnRippleWave( wavesRef.current, cur.smoothX, cur.smoothY, str, 1.45, ); } } wavesRef.current = stepRippleWaves(wavesRef.current, dt, p.speed); const idleMs = performance.now() - cur.lastInteractTs; if (p.autoPlay && (!cur.active || idleMs > 2200)) { autoSpawnClockRef.current += dt * p.speed; if (autoSpawnClockRef.current >= 1.25 || wavesRef.current.length === 0) { autoSpawnClockRef.current = 0; const rx = 0.28 + (Math.sin(time * 1.4) + 1) * 0.5 * 0.46; const ry = 0.34 + (Math.cos(time * 1.1) + 1) * 0.5 * 0.34; wavesRef.current = spawnRippleWave(wavesRef.current, rx, ry, 0.85, 1.85); } } } else if (wavesRef.current.length === 0) { wavesRef.current = createShowcaseWaves(); } const list = wavesRef.current; waveUniform.fill(0); for (let i = 0; i < Math.min(MAX_WAVES, list.length); i++) { const w = list[i]; const normAge = clamp(w.age / w.life, 0, 1); const fade = Math.sin(normAge * Math.PI) * (1 - normAge * 0.25) * w.strength; waveUniform[i * 4 + 0] = w.x; waveUniform[i * 4 + 1] = w.y; waveUniform[i * 4 + 2] = w.radius; waveUniform[i * 4 + 3] = Math.max(0, fade); } glApi.gl.viewport(0, 0, canvas.width, canvas.height); glApi.draw(pass, null, { uTex: { texture: bgTex }, uAspect: aspect, uDistortion: p.distortion, uDispersion: p.dispersion, uTime: time, uWaveCount: Math.min(MAX_WAVES, list.length), uCursor: [cur.smoothX, cur.smoothY, cur.speed, cur.presence], uWaves: { vec4Array: waveUniform }, }); }, () => paused || reducedMotion, (width, height) => { aspect = Math.max(0.25, width / Math.max(1, height)); }, compact, ); invalidateRef.current = () => runtime.invalidate(); runtime.invalidate(); return () => { disposed = true; invalidateRef.current = null; runtime.dispose(); glApi?.dispose(); }; }, [compact, paused, reducedMotion, safeImage]); useEffect(() => { invalidateRef.current?.(); }, [safeDistortion, safeDispersion, safeSpeed, autoPlay]); const emitWaveAt = useCallback( (shaderX: number, shaderY: number, strength = 0.95) => { wavesRef.current = spawnRippleWave( wavesRef.current, shaderX, shaderY, strength, 1.55, ); if (webglOff) { setFallbackWaves(wavesRef.current); } invalidateRef.current?.(); }, [webglOff], ); const handlePointerMove = (event: React.PointerEvent) => { const rect = event.currentTarget.getBoundingClientRect(); if (!rect.width || !rect.height) return; const uv = clientToShaderUV(event.clientX, event.clientY, rect); const cur = cursorRef.current; if (!cur.active) { cur.smoothX = uv.x; cur.smoothY = uv.y; cur.lastSpawnX = uv.x; cur.lastSpawnY = uv.y; } cur.active = true; cur.targetX = uv.x; cur.targetY = uv.y; cur.lastInteractTs = performance.now(); if (webglOff) { const dist = Math.hypot(uv.x - cur.lastSpawnX, uv.y - cur.lastSpawnY); if (dist > 0.05) { cur.lastSpawnX = uv.x; cur.lastSpawnY = uv.y; emitWaveAt(uv.x, uv.y, 0.8); } } else if (still) { invalidateRef.current?.(); } }; const handlePointerDown = (event: React.PointerEvent) => { if (!introDone) setIntroDone(true); const rect = event.currentTarget.getBoundingClientRect(); if (!rect.width || !rect.height) return; const uv = clientToShaderUV(event.clientX, event.clientY, rect); const cur = cursorRef.current; cur.active = true; cur.targetX = uv.x; cur.targetY = uv.y; cur.smoothX = uv.x; cur.smoothY = uv.y; cur.lastSpawnX = uv.x; cur.lastSpawnY = uv.y; cur.lastInteractTs = performance.now(); emitWaveAt(uv.x, uv.y, 1.25); }; const handlePointerLeave = () => { cursorRef.current.active = false; }; const handleKeyDown = (event: React.KeyboardEvent) => { switch (event.key) { case ' ': case 'Enter': event.preventDefault(); setIntroDone(true); emitWaveAt(0.5, 0.5, 1.25); break; case 'ArrowLeft': event.preventDefault(); emitWaveAt(0.28, 0.5, 1.0); break; case 'ArrowRight': event.preventDefault(); emitWaveAt(0.72, 0.5, 1.0); break; case 'ArrowUp': event.preventDefault(); emitWaveAt(0.5, 0.72, 1.0); break; case 'ArrowDown': event.preventDefault(); emitWaveAt(0.5, 0.28, 1.0); break; case 'Home': event.preventDefault(); wavesRef.current = createShowcaseWaves(); setFallbackWaves(wavesRef.current); invalidateRef.current?.(); break; default: break; } }; const titleLines = title.split(/\r?\n/); const scopeSelector = `[data-tidal-lens-id="${scopeId}"]`; return (

{!webglOff ? (

); } export default TidalLens; 18: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, ]; } 19: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,{"viewer":{"user":null,"pro":false,"plan":null,"renewsAt":null,"cancelAtPeriodEnd":false,"provider":null},"initialView":"preview","originalSource":{"tidal-lens":[{"name":"tidal-lens.tsx","code":"$17"},{"name":"native-gl.ts","code":"$18"},{"name":"effect-runtime.ts","code":"$19"}]},"initialElement":"tidal-lens","initialConfiguration":"$undefined","initialSaved":false,"initialTag":"","initialGroup":"$undefined","initialFree":false}]