4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T6373,"use client"; import { useEffect, useRef, useState, useSyncExternalStore, type ReactNode, } from "react"; import { createRectCache } from "../rect-cache"; export interface DropletsOptions { /** How much rain falls, from a light drizzle to a downpour (0 to 1.25). */ intensity?: number; /** Animation speed multiplier. */ speed?: number; /** Size of the droplet pattern. Higher means smaller drops. */ scale?: number; /** Width of the droplets and their trails. */ dropWidth?: number; /** How elongated the falling droplets are. */ dropLength?: number; /** How strongly droplets refract the content behind them. */ refraction?: number; /** Background blur outside the droplets, like a fogged up window. */ blur?: number; /** Darkens the edges of the canvas (0 to 1). */ vignette?: number; /** How fast the running drops slide down. */ fallSpeed?: number; /** Horizontal wiggle of the running drops. */ wiggle?: number; /** Multiplier for the small static droplets. */ staticDrops?: number; /** Wipe drops off the glass with the pointer. */ interactive?: boolean; /** Radius of the cursor wipe, relative to the screen height. */ interactionRadius?: number; /** How strongly the cursor wipes drops off the glass (0 to 1). */ interactionStrength?: number; /** How much the wipe distorts the content behind it. */ interactionDistortion?: number; /** Tint color layered over the content as [r, g, b] in 0-1 range. */ tint?: [number, number, number]; /** Strength of the tint (0 to 1). */ tintStrength?: number; } export interface DropletsElements { /** Canvas with layoutsubtree that hosts the HTML content. */ source: HTMLCanvasElement; /** The element inside the source canvas that gets captured. */ content: HTMLElement; /** Canvas the WebGL effect renders to. */ output: HTMLCanvasElement; } export interface DropletsInstance { /** Update effect options live. */ setOptions: (options: DropletsOptions) => void; /** Re-read canvas size. Call when the element is resized. */ resize: () => void; /** Stop the loop and release all GPU resources. */ destroy: () => void; } const DEFAULTS: Required = { intensity: 0.5, speed: 1, scale: 0.4, dropWidth: 1, dropLength: 1, refraction: 0.2, blur: 0, vignette: 0, fallSpeed: 1, wiggle: 1, staticDrops: 0.2, interactive: true, interactionRadius: 0.3, interactionStrength: 0.6, interactionDistortion: 3, tint: [1, 1, 1], tintStrength: 0, }; type PaintableCanvas = HTMLCanvasElement & { onpaint?: (() => void) | null; requestPaint?: () => void; }; type ElementImageContext = CanvasRenderingContext2D & { drawElementImage?: (element: Element, x: number, y: number) => void; }; const VERT = `#version 300 es precision highp float; layout(location = 0) in vec2 aPos; out vec2 vUv; void main () { vUv = aPos * 0.5 + 0.5; gl_Position = vec4(aPos, 0.0, 1.0); }`; const FRAG = `#version 300 es precision highp float; in vec2 vUv; out vec4 outColor; uniform sampler2D uContent; uniform vec2 uResolution; uniform vec2 uOffset; uniform float uTime; uniform float uIntensity; uniform float uScale; uniform float uDropWidth; uniform float uDropLength; uniform float uRefraction; uniform float uBlur; uniform float uVignette; uniform float uFallSpeed; uniform float uWiggle; uniform float uStaticDrops; uniform float uMaxX; uniform sampler2D uTrail; uniform float uWipe; uniform float uWipeDistort; uniform vec3 uTint; uniform float uTintStrength; uniform float uHasContent; #define S(a, b, t) smoothstep(a, b, t) vec3 N13 (float p) { vec3 p3 = fract(vec3(p) * vec3(0.1031, 0.11369, 0.13787)); p3 += dot(p3, p3.yzx + 19.19); return fract(vec3( (p3.x + p3.y) * p3.z, (p3.x + p3.z) * p3.y, (p3.y + p3.z) * p3.x )); } float N (float t) { return fract(sin(t * 12345.564) * 7658.76); } float Saw (float b, float t) { return S(0.0, b, t) * S(1.0, b, t); } float sdEgg (vec2 p, float ra, float rb) { const float k = 1.7320508; p.x = abs(p.x); float r = ra - rb; return ((p.y < 0.0) ? length(vec2(p.x, p.y)) - r : (k * (p.x + r) < p.y) ? length(vec2(p.x, p.y - k * r)) : length(vec2(p.x + r, p.y)) - 2.0 * r) - rb; } vec2 DropLayer (vec2 uv, float t) { vec2 UV = uv; vec2 a = vec2(6.0, 1.0); vec2 grid = a * 2.0; vec2 id = floor(uv * grid); float gridFall = N(id.x) / 3.0 + 0.5; uv.y += t * gridFall / a.y; id = floor(uv * grid); uv.y += N(id.x); id = floor(uv * grid); vec2 st = fract(uv * grid) - vec2(0.5, 0.0); vec3 n = N13(id.x * 35.2 + id.y * 2376.1); float x = n.x - 0.5; float lambda = UV.y * 20.0; float wiggle = sin(lambda + sin(lambda)); x += wiggle * (0.5 - abs(x)) * (n.z - 0.5) * uWiggle; x *= 0.6; float slowStart = 0.85; float ti = fract(t * (gridFall + 0.1) + n.z); float y = (Saw(slowStart, ti) - 0.5) * 0.9 + 0.5; vec2 p = vec2(x, y); float dropShape = (ti > slowStart) ? -sin(6.2831853 * ti / (1.0 - slowStart)) * 0.5 - 0.5 : 0.0; float d = sdEgg((st - p) * a.yx / vec2(uDropWidth, uDropLength), 0.0, dropShape); float diameter = N(id.x + id.y) / 7.0 + 0.2; float mainDrop = S(diameter / 1.5, 0.0, d); float r2 = S(1.0, y, st.y); float r = sqrt(r2); float cd = abs(st.x - x); float thickness = diameter * 0.95 * uDropWidth; float trail = S(thickness * r, 0.0, cd); float trailFront = S(-0.02, 0.02, st.y - y); trail *= r2 * trailFront * 0.5; y = UV.y; float trail2 = S((thickness - 0.15) * r, 0.0, cd); trail2 *= trailFront * n.z; float rndX = N(id.x) / 1.5 + 0.5; float rndY = N(st.y) / 40.0 + 0.05; y = fract(y * 11.0 * rndX) + (st.y - 0.5); float dd = length(st - vec2(x, y)); float droplets = S(trail2 + rndY, 0.0, dd); float m = mainDrop + droplets * r * trailFront; return vec2(m, trail); } float StaticDrops (vec2 uv, float t) { uv *= 40.0; vec2 id = floor(uv); vec3 n = N13(id.x * 107.45 + id.y * 3543.654); vec2 p = (n.xy - 0.5) * 0.6; uv = fract(uv) - 0.5; float d = length(uv - p); float drop = S(0.3 * clamp(uDropWidth, 0.4, 1.4), 0.0, d); float fade = Saw(0.1, fract(t + n.y)); float intensity = fract(n.x * 27.0); return drop * fade * intensity; } vec2 Drops (vec2 uv, float t, float tFall, float l0, float l1, float l2, float wipe) { float s = StaticDrops(uv, t) * l0 * (1.0 - wipe); vec2 m1 = DropLayer(uv, tFall) * (l1 * (1.0 - wipe * 0.8)); vec2 m2 = DropLayer(uv * 1.85, tFall) * (l2 * (1.0 - wipe * 0.8)); float c = s + m1.x + m2.x; c = S(0.3, 1.0, c); return vec2(c, m1.y + m2.y); } void main () { vec2 uv = vUv; if (uv.x > uMaxX) { outColor = vec4(0.0); return; } vec2 aspectUv = (uv + uOffset - 0.5) * vec2(uResolution.x / uResolution.y, 1.0); float t = uTime * 0.2; float dropScale = clamp(min(uResolution.x, uResolution.y) / 900.0, 0.75, 1.35) * uScale; vec2 scaledUv = aspectUv * dropScale; float rainAmount = clamp(uIntensity, 0.0, 1.25); float staticDrops = S(-0.5, 1.0, rainAmount) * 2.0 * uStaticDrops; float layer1 = S(0.25, 0.75, rainAmount); float layer2 = S(0.0, 0.5, rainAmount); float tFall = t * uFallSpeed; float wipeMask = texture(uTrail, uv).r; float wipe = wipeMask * clamp(uWipe, 0.0, 1.0); vec2 c = Drops(scaledUv, t, tFall, staticDrops, layer1, layer2, wipe); vec2 e = vec2(0.001, 0.0); float cx = Drops(scaledUv + e, t, tFall, staticDrops, layer1, layer2, wipe).x; float cy = Drops(scaledUv + e.yx, t, tFall, staticDrops, layer1, layer2, wipe).x; vec2 normal = vec2(cx - c.x, cy - c.x); vec2 e2 = vec2(0.012, 0.0); float wx = texture(uTrail, uv + e2).r; float wy = texture(uTrail, uv + e2.yx).r; normal += vec2(wipeMask - wx, wipeMask - wy) * 0.05 * uWipeDistort * clamp(uWipe, 0.0, 1.0); vec2 refractedUv = clamp(uv + normal * uRefraction, vec2(0.001), vec2(uMaxX - 0.004, 0.999)); float fog = clamp(uBlur, 0.0, 8.0) * mix(0.7, 1.0, rainAmount); float back = fog * (1.0 - clamp(c.y * 2.0, 0.0, 1.0)) * (1.0 - wipe); float focus = mix(back, 0.0, S(0.1, 0.2, c.x)); if (uHasContent < 0.5) { float mask = S(0.02, 0.14, c.x); vec3 n3 = normalize(vec3(normal * 42.0, 1.0)); vec3 L = normalize(vec3(-0.35, 0.75, 0.55)); float spec = pow(max(dot(reflect(vec3(0.0, 0.0, -1.0), n3), L), 0.0), 34.0); float rim = clamp(length(normal) * 26.0, 0.0, 1.0); vec3 dropCol = mix(vec3(0.72), uTint, clamp(uTintStrength, 0.0, 1.0)); vec3 colF = dropCol * (0.12 + 0.5 * rim) + vec3(spec); float alphaF = mask * clamp(0.1 + rim * 0.5 + spec * 0.9, 0.0, 1.0); outColor = vec4(clamp(colF, 0.0, 1.0) * alphaF, alphaF); return; } vec4 content = textureLod(uContent, vec2(refractedUv.x, 1.0 - refractedUv.y), focus); vec3 col = content.rgb; col = mix(col, uTint, clamp(uTintStrength, 0.0, 1.0) * 0.35); vec2 vignetteUv = uv - 0.5; col *= 1.0 - dot(vignetteUv, vignetteUv) * clamp(uVignette, 0.0, 1.0) * 2.0; outColor = vec4(col * content.a, content.a); }`; const TRAIL_FRAG = `#version 300 es precision highp float; in vec2 vUv; out vec4 outColor; uniform sampler2D uPrev; uniform vec2 uFrom; uniform vec2 uTo; uniform float uAspect; uniform float uRadius; uniform float uDecay; uniform float uDrain; uniform float uSplat; float capsule (vec2 p, vec2 a, vec2 b) { vec2 pa = p - a; vec2 ba = b - a; float h = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-6), 0.0, 1.0); return length(pa - ba * h); } void main () { float prev = max(texture(uPrev, vUv).r * uDecay - uDrain, 0.0); vec2 p = vec2(vUv.x * uAspect, vUv.y); vec2 a = vec2(uFrom.x * uAspect, uFrom.y); vec2 b = vec2(uTo.x * uAspect, uTo.y); float d = capsule(p, a, b); float m = smoothstep(uRadius, uRadius * 0.5, d) * uSplat; outColor = vec4(max(prev, m), 0.0, 0.0, 1.0); }`; export function supportsHtmlInCanvas(): boolean { if (typeof document === "undefined") return false; const probe = document.createElement("canvas") as PaintableCanvas; const ctx = probe.getContext("2d") as ElementImageContext | null; return Boolean( ctx && typeof ctx.drawElementImage === "function" && typeof probe.requestPaint === "function", ); } export function createDroplets( elements: DropletsElements, options: DropletsOptions = {}, ): DropletsInstance | null { const config = { ...DEFAULTS, ...options }; const { source, content, output } = elements; const gl = output.getContext("webgl2", { alpha: true, depth: false, stencil: false, antialias: false, premultipliedAlpha: true, }); if (!gl || gl.isContextLost()) return null; const sourceCtx = source.getContext("2d") as ElementImageContext | null; const paintable = source as PaintableCanvas; const htmlInCanvas = Boolean( sourceCtx && typeof sourceCtx.drawElementImage === "function" && typeof paintable.requestPaint === "function", ); let contentDirty = false; let wake = () => {}; if (htmlInCanvas) { paintable.onpaint = () => { try { sourceCtx!.reset(); sourceCtx!.drawElementImage!(content, 0, 0); contentDirty = true; wake(); } catch {} }; } function compile(type: number, text: string): WebGLShader { const shader = gl!.createShader(type)!; gl!.shaderSource(shader, text); gl!.compileShader(shader); if (!gl!.getShaderParameter(shader, gl!.COMPILE_STATUS)) { console.error("Droplets shader error:", gl!.getShaderInfoLog(shader)); } return shader; } const vertexShader = compile(gl.VERTEX_SHADER, VERT); const fragmentShader = compile(gl.FRAGMENT_SHADER, FRAG); const trailShader = compile(gl.FRAGMENT_SHADER, TRAIL_FRAG); function link(fragment: WebGLShader) { const prog = gl!.createProgram()!; gl!.attachShader(prog, vertexShader); gl!.attachShader(prog, fragment); gl!.linkProgram(prog); const locations: Record = {}; const total = gl!.getProgramParameter(prog, gl!.ACTIVE_UNIFORMS); for (let i = 0; i < total; i++) { const info = gl!.getActiveUniform(prog, i)!; locations[info.name] = gl!.getUniformLocation(prog, info.name)!; } return { program: prog, uniforms: locations }; } const { program, uniforms } = link(fragmentShader); const { program: trailProgram, uniforms: trailUniforms } = link(trailShader); const quad = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, quad); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW, ); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); const contentTexture = gl.createTexture()!; gl.bindTexture(gl.TEXTURE_2D, contentTexture); gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_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.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]), ); gl.generateMipmap(gl.TEXTURE_2D); let contentMaxX = 1; function syncCanvasSize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const width = Math.max(1, Math.round(output.clientWidth * dpr)); const height = Math.max(1, Math.round(output.clientHeight * dpr)); if (output.width !== width || output.height !== height) { output.width = width; output.height = height; } contentMaxX = Math.min( 1, Math.max(0.05, content.clientWidth / Math.max(output.clientWidth, 1)), ); if (htmlInCanvas) { const cssWidth = Math.max(1, Math.round(source.clientWidth)); const cssHeight = Math.max(1, Math.round(source.clientHeight)); if (source.width !== cssWidth * dpr || source.height !== cssHeight * dpr) { source.width = cssWidth * dpr; source.height = cssHeight * dpr; } paintable.requestPaint!(); } } syncCanvasSize(); let trailWidth = 0; let trailHeight = 0; const trailTextures: WebGLTexture[] = []; const trailFramebuffers: WebGLFramebuffer[] = []; let trailIndex = 0; function ensureTrailTargets() { const width = Math.max(1, Math.round(output.width / 4)); const height = Math.max(1, Math.round(output.height / 4)); if (width === trailWidth && height === trailHeight && trailTextures.length) return; trailWidth = width; trailHeight = height; for (const texture of trailTextures) gl!.deleteTexture(texture); for (const framebuffer of trailFramebuffers) gl!.deleteFramebuffer(framebuffer); trailTextures.length = 0; trailFramebuffers.length = 0; for (let i = 0; i < 2; i++) { const texture = gl!.createTexture()!; gl!.bindTexture(gl!.TEXTURE_2D, texture); 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!.texImage2D( gl!.TEXTURE_2D, 0, gl!.RGBA, width, height, 0, gl!.RGBA, gl!.UNSIGNED_BYTE, null, ); const framebuffer = gl!.createFramebuffer()!; gl!.bindFramebuffer(gl!.FRAMEBUFFER, framebuffer); gl!.framebufferTexture2D( gl!.FRAMEBUFFER, gl!.COLOR_ATTACHMENT0, gl!.TEXTURE_2D, texture, 0, ); gl!.clearColor(0, 0, 0, 1); gl!.clear(gl!.COLOR_BUFFER_BIT); trailTextures.push(texture); trailFramebuffers.push(framebuffer); } gl!.bindFramebuffer(gl!.FRAMEBUFFER, null); } const pointer = { x: 0.5, y: 0.5, px: 0.5, py: 0.5, seen: false, moved: false, }; function updateTrail(delta: number) { ensureTrailTargets(); gl!.useProgram(trailProgram); gl!.activeTexture(gl!.TEXTURE0); gl!.bindTexture(gl!.TEXTURE_2D, trailTextures[trailIndex]); gl!.uniform1i(trailUniforms.uPrev, 0); gl!.uniform1f(trailUniforms.uDecay, Math.exp(-delta * 0.5)); gl!.uniform1f(trailUniforms.uDrain, delta * 0.3); gl!.uniform1f( trailUniforms.uAspect, output.width / Math.max(output.height, 1), ); gl!.uniform2f(trailUniforms.uFrom, pointer.px, pointer.py); gl!.uniform2f(trailUniforms.uTo, pointer.x, pointer.y); gl!.uniform1f( trailUniforms.uRadius, Math.max(config.interactionRadius, 0.01), ); gl!.uniform1f( trailUniforms.uSplat, config.interactive && pointer.moved ? 1 : 0, ); gl!.bindFramebuffer(gl!.FRAMEBUFFER, trailFramebuffers[1 - trailIndex]); gl!.viewport(0, 0, trailWidth, trailHeight); gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4); gl!.bindFramebuffer(gl!.FRAMEBUFFER, null); trailIndex = 1 - trailIndex; pointer.px = pointer.x; pointer.py = pointer.y; pointer.moved = false; } function uploadContent() { if (!htmlInCanvas || !contentDirty) return; contentDirty = false; gl!.bindTexture(gl!.TEXTURE_2D, contentTexture); gl!.texImage2D( gl!.TEXTURE_2D, 0, gl!.RGBA, gl!.RGBA, gl!.UNSIGNED_BYTE, source, ); gl!.generateMipmap(gl!.TEXTURE_2D); } function render(timeSec: number) { uploadContent(); gl!.useProgram(program); gl!.activeTexture(gl!.TEXTURE0); gl!.bindTexture(gl!.TEXTURE_2D, contentTexture); gl!.uniform1i(uniforms.uContent, 0); gl!.uniform1f(uniforms.uHasContent, htmlInCanvas ? 1 : 0); gl!.uniform2f(uniforms.uResolution, output.width, output.height); gl!.uniform2f( uniforms.uOffset, content.scrollLeft / Math.max(content.clientWidth, 1), -content.scrollTop / Math.max(content.clientHeight, 1), ); gl!.uniform1f(uniforms.uTime, timeSec); gl!.uniform1f(uniforms.uIntensity, config.intensity); gl!.uniform1f(uniforms.uScale, Math.max(config.scale, 0.01)); gl!.uniform1f(uniforms.uDropWidth, Math.max(config.dropWidth, 0.05)); gl!.uniform1f(uniforms.uDropLength, Math.max(config.dropLength, 0.05)); gl!.uniform1f(uniforms.uRefraction, config.refraction); gl!.uniform1f(uniforms.uBlur, Math.max(config.blur, 0)); gl!.uniform1f(uniforms.uVignette, config.vignette); gl!.uniform1f(uniforms.uFallSpeed, config.fallSpeed); gl!.uniform1f(uniforms.uWiggle, config.wiggle); gl!.uniform1f(uniforms.uStaticDrops, config.staticDrops); gl!.uniform1f(uniforms.uMaxX, contentMaxX); gl!.activeTexture(gl!.TEXTURE1); gl!.bindTexture(gl!.TEXTURE_2D, trailTextures[trailIndex]); gl!.uniform1i(uniforms.uTrail, 1); gl!.uniform1f( uniforms.uWipe, config.interactive ? Math.min(Math.max(config.interactionStrength, 0), 1) : 0, ); gl!.uniform1f( uniforms.uWipeDistort, Math.max(config.interactionDistortion, 0), ); gl!.uniform3f( uniforms.uTint, config.tint[0], config.tint[1], config.tint[2], ); gl!.uniform1f(uniforms.uTintStrength, config.tintStrength); gl!.bindFramebuffer(gl!.FRAMEBUFFER, null); gl!.viewport(0, 0, output.width, output.height); gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4); } let raf = 0; let lastTime = performance.now(); let elapsed = 0; let destroyed = false; let running = false; let visible = true; const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); let reducedMotion = motionQuery.matches; function frame(now: number) { if (destroyed) return; if (!visible) { running = false; return; } const delta = Math.min((now - lastTime) / 1000, 1 / 30); lastTime = now; elapsed += delta * config.speed; updateTrail(delta); render(elapsed); if (reducedMotion && !contentDirty) { running = false; return; } raf = requestAnimationFrame(frame); } function start() { if (destroyed || running || !visible) return; running = true; lastTime = performance.now(); raf = requestAnimationFrame(frame); } wake = start; start(); function onMotionChange() { reducedMotion = motionQuery.matches; start(); } motionQuery.addEventListener("change", onMotionChange); const observer = new ResizeObserver(() => { syncCanvasSize(); start(); }); observer.observe(output); observer.observe(content); const intersection = new IntersectionObserver((entries) => { visible = entries[entries.length - 1]?.isIntersecting ?? true; if (visible) start(); }); intersection.observe(output); const listenTarget = output.parentElement ?? output; const rectCache = createRectCache(output); function onPointerMove(event: PointerEvent) { if (!config.interactive || reducedMotion) return; const rect = rectCache.current; const x = (event.clientX - rect.left) / Math.max(rect.width, 1); const y = 1 - (event.clientY - rect.top) / Math.max(rect.height, 1); if (!pointer.seen) { pointer.seen = true; pointer.px = x; pointer.py = y; } pointer.x = x; pointer.y = y; pointer.moved = true; start(); } function onPointerLeave() { pointer.seen = false; } listenTarget.addEventListener("pointermove", onPointerMove, { passive: true }); listenTarget.addEventListener("pointerleave", onPointerLeave, { passive: true }); content.addEventListener("scroll", start, { passive: true }); return { setOptions(next) { if ( !Object.entries(next).some( ([key, value]) => config[key as keyof DropletsOptions] !== value, ) ) return; Object.assign(config, next); start(); }, resize() { syncCanvasSize(); start(); }, destroy() { destroyed = true; rectCache.destroy(); cancelAnimationFrame(raf); observer.disconnect(); intersection.disconnect(); motionQuery.removeEventListener("change", onMotionChange); listenTarget.removeEventListener("pointermove", onPointerMove); listenTarget.removeEventListener("pointerleave", onPointerLeave); content.removeEventListener("scroll", start); gl!.deleteTexture(contentTexture); for (const texture of trailTextures) gl!.deleteTexture(texture); for (const framebuffer of trailFramebuffers) gl!.deleteFramebuffer(framebuffer); gl!.deleteProgram(program); gl!.deleteProgram(trailProgram); gl!.deleteShader(vertexShader); gl!.deleteShader(fragmentShader); gl!.deleteShader(trailShader); gl!.deleteBuffer(quad); if (htmlInCanvas) paintable.onpaint = null; }, }; } export interface DropletsProps extends DropletsOptions { children: ReactNode; className?: string; style?: React.CSSProperties; } const emptySubscribe = () => () => {}; export function Droplets({ children, className, style, ...options }: DropletsProps) { const sourceRef = useRef(null); const contentRef = useRef(null); const outputRef = useRef(null); const instanceRef = useRef(null); const [initialOptions] = useState(options); const [failed, setFailed] = useState(false); const supported = useSyncExternalStore( emptySubscribe, supportsHtmlInCanvas, () => false, ); const native = supported && !failed; useEffect(() => { const source = sourceRef.current; const content = contentRef.current; const output = outputRef.current; if (!source || !content || !output) return; instanceRef.current = createDroplets( { source, content, output }, initialOptions, ); if (native && !instanceRef.current) setFailed(true); return () => { instanceRef.current?.destroy(); instanceRef.current = null; }; }, [initialOptions, native]); useEffect(() => { instanceRef.current?.setOptions(options); }); return (

{!native ? (

{children}

) : null}

); } export default Droplets; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"components/canvasui/Droplets.tsx","content":"$50","type":"registry:component","target":"components/canvasui/Droplets.tsx"}],"className":"h-[70svh] min-h-80"}]]}]