@ctrl-ui/react 0.8.0

package/dist/dynamic-notification-liquid.js

@@ -0,0 +1,682 @@
+import { DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL } from "./dynamic-notification-siri-wave.js";
+import { LIQUID_GLASS_OPTICS_GLSL } from "./lib/liquid-glass-optics.js";
+//#region src/dynamic-notification-liquid.ts
+const VERTEX_SHADER = `
+attribute vec2 a_position;
+varying vec2 v_uv;
+void main() {
+  /* v_uv is y-DOWN (v=0 = top) to match the 2D-canvas texture orientation */
+  v_uv = vec2(a_position.x * 0.5 + 0.5, 0.5 - a_position.y * 0.5);
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform sampler2D u_sharpTex;
+uniform sampler2D u_blurTex;
+uniform vec2 u_size;        /* panel size, css px */
+uniform vec2 u_panelOffset; /* panel top-left inside the scene, css px */
+uniform vec2 u_sceneSize;   /* scene size, css px */
+uniform float u_radius;     /* corner radius, css px */
+uniform float u_zRadius;    /* inner refraction band cap, css px */
+uniform float u_refract;
+uniform float u_chroma;
+uniform float u_edgeDarkening;
+uniform float u_spec;
+uniform float u_fresnel;
+uniform float u_edgeHL;
+uniform float u_time;
+uniform float u_aurora;
+uniform float u_reveal;
+uniform float u_settle;
+uniform float u_lift;
+uniform float u_ribbonHorizon;
+
+varying vec2 v_uv;
+
+${LIQUID_GLASS_OPTICS_GLSL}
+${DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL}
+
+vec2 sceneUV(vec2 posCss) {
+  return clamp(posCss / u_sceneSize, 0.0, 1.0);
+}
+
+void main() {
+  vec2 local = (v_uv - 0.5) * u_size;
+  vec2 half_ = u_size * 0.5;
+  float r = min(u_radius, min(half_.x, half_.y));
+  float sdf = liquidSurfaceSDF(local, half_, r, 2.0);
+
+  /* mask clips only shape; resting Clear material has no separate shadow stage. */
+  float mask = 1.0 - smoothstep(-1.5, 0.5, sdf);
+  if (mask <= 0.0) {
+    gl_FragColor = vec4(0.0);
+    return;
+  }
+
+  float materialScale = smoothstep(40.0, 120.0, u_size.y);
+  float edgeWidth = liquidEdgeWidth(u_size, 0.36, u_zRadius);
+  float opticalInside = liquidOpticalInsideDistance(local, half_, r, 2.0);
+  float lens = liquidEdgeLens(opticalInside, edgeWidth);
+  vec2 boundaryNormal = liquidInwardOpticalNormal(local, half_, r, 2.0);
+
+  vec2 refrPx = liquidRefractedOffset(boundaryNormal, opticalInside, edgeWidth, u_refract);
+  vec3 N = liquidLensSurfaceNormal(boundaryNormal, opticalInside, edgeWidth);
+  vec2 keyDirection = normalize(vec2(0.707106, -0.707106));
+  float outerRim = 1.0 - smoothstep(0.35, 1.35, opticalInside);
+  float innerRim = exp(-pow((opticalInside - 2.0) / 0.9, 2.0));
+
+  float caS = u_chroma * 10.0 * lens;
+  vec2 caD = N.xy * caS;
+  vec2 base = u_panelOffset + v_uv * u_size + refrPx;
+
+  vec3 sharp = vec3(
+    texture2D(u_sharpTex, sceneUV(base + caD)).r,
+    texture2D(u_sharpTex, sceneUV(base)).g,
+    texture2D(u_sharpTex, sceneUV(base - caD)).b
+  );
+  vec3 blur = vec3(
+    texture2D(u_blurTex, sceneUV(base + caD)).r,
+    texture2D(u_blurTex, sceneUV(base)).g,
+    texture2D(u_blurTex, sceneUV(base - caD)).b
+  );
+  float diffusion = mix(0.08, 0.14, materialScale) * mix(0.25, 1.0, lens);
+  vec3 col = mix(sharp, blur, diffusion);
+
+  /* Map transmitted luminance to measured Clear-material endpoints while preserving hue. */
+  float transmittedLuma = dot(col, vec3(0.2126, 0.7152, 0.0722));
+  float environmentLuma = dot(blur, vec3(0.2126, 0.7152, 0.0722));
+  float lightEnvironment = smoothstep(0.38, 0.72, environmentLuma);
+  float blackEndpoint = mix(0.05, 0.20, lightEnvironment);
+  float whiteEndpoint = mix(0.80, 0.95, lightEnvironment);
+  float mappedLuma = mix(blackEndpoint, whiteEndpoint, transmittedLuma);
+  col = clamp(col + vec3(mappedLuma - transmittedLuma), 0.0, 1.0);
+
+  /* Ink and ribbon share refracted coordinate so their horizon stays joined at edges. */
+  vec2 auroraUv = clamp(v_uv + N.xy * lens * 0.012, vec2(0.0), vec2(1.0));
+  float yUp = 1.0 - auroraUv.y;
+  float inkThinking = mix(0.10, 0.985, smoothstep(u_ribbonHorizon - 0.10, u_ribbonHorizon + 0.10, yUp));
+  float inkExpanded = mix(0.24, 0.97, smoothstep(0.00, 0.30, yUp));
+  float ink = mix(0.985, mix(inkThinking, inkExpanded, u_settle), u_reveal);
+  vec3 materialColor = mix(col, vec3(0.004, 0.004, 0.006), ink);
+
+  float keyArc = pow(max(dot(boundaryNormal, keyDirection), 0.0), 6.0);
+  float fillArc = pow(max(dot(boundaryNormal, -keyDirection), 0.0), 8.0) * 0.28;
+  float shadowArc = pow(max(dot(boundaryNormal, -keyDirection), 0.0), 6.0);
+  materialColor *= 1.0 - innerRim * shadowArc * u_edgeDarkening;
+  float highlight = outerRim * u_edgeHL * 0.22 + innerRim * (keyArc * u_spec + fillArc * u_spec * 1.3);
+  float grazing = outerRim * u_fresnel * 0.025;
+  vec3 rimLight = mix(vec3(1.0), blur, 0.12);
+
+  vec3 auroraEmission = dynamicNotificationSiriWave(vec2(auroraUv.x, yUp), u_size, u_time, u_ribbonHorizon, u_lift)
+    * u_aurora * (1.0 - u_lift);
+
+  vec3 material = materialColor + rimLight * highlight + vec3(grazing) + auroraEmission;
+  gl_FragColor = vec4(material * mask, mask);
+}
+`;
+function compileShader(gl, type, source) {
+	const shader = gl.createShader(type);
+	if (!shader) return null;
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		gl.deleteShader(shader);
+		return null;
+	}
+	return shader;
+}
+function createSceneTexture(gl) {
+	const texture = gl.createTexture();
+	if (!texture) return null;
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+	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);
+	return texture;
+}
+function buildProgram(gl) {
+	const vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+	const fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+	if (!vertex || !fragment) return null;
+	const program = gl.createProgram();
+	const buffer = gl.createBuffer();
+	const sharpTexture = createSceneTexture(gl);
+	const blurTexture = createSceneTexture(gl);
+	if (!program || !buffer || !sharpTexture || !blurTexture) return null;
+	gl.attachShader(program, vertex);
+	gl.attachShader(program, fragment);
+	gl.linkProgram(program);
+	gl.deleteShader(vertex);
+	gl.deleteShader(fragment);
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return null;
+	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+		-1,
+		-1,
+		1,
+		-1,
+		-1,
+		1,
+		1,
+		1
+	]), gl.STATIC_DRAW);
+	const position = gl.getAttribLocation(program, "a_position");
+	gl.enableVertexAttribArray(position);
+	gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+	return {
+		program,
+		buffer,
+		sharpTexture,
+		blurTexture,
+		sharpTex: gl.getUniformLocation(program, "u_sharpTex"),
+		blurTex: gl.getUniformLocation(program, "u_blurTex"),
+		size: gl.getUniformLocation(program, "u_size"),
+		panelOffset: gl.getUniformLocation(program, "u_panelOffset"),
+		sceneSize: gl.getUniformLocation(program, "u_sceneSize"),
+		radius: gl.getUniformLocation(program, "u_radius"),
+		zRadius: gl.getUniformLocation(program, "u_zRadius"),
+		refract: gl.getUniformLocation(program, "u_refract"),
+		chroma: gl.getUniformLocation(program, "u_chroma"),
+		edgeDarkening: gl.getUniformLocation(program, "u_edgeDarkening"),
+		spec: gl.getUniformLocation(program, "u_spec"),
+		fresnel: gl.getUniformLocation(program, "u_fresnel"),
+		edgeHL: gl.getUniformLocation(program, "u_edgeHL"),
+		time: gl.getUniformLocation(program, "u_time"),
+		aurora: gl.getUniformLocation(program, "u_aurora"),
+		reveal: gl.getUniformLocation(program, "u_reveal"),
+		settle: gl.getUniformLocation(program, "u_settle"),
+		lift: gl.getUniformLocation(program, "u_lift"),
+		ribbonHorizon: gl.getUniformLocation(program, "u_ribbonHorizon")
+	};
+}
+function auroraTarget(state) {
+	return state === "thinking" ? 1 : 0;
+}
+function revealTarget(state) {
+	return state === "collapsed" ? 0 : 1;
+}
+function settleTarget(state) {
+	return state === "expanded" ? 1 : 0;
+}
+function approachAt60Hz(current, target, response, deltaMs) {
+	const frameScale = Math.max(0, deltaMs) / (1e3 / 60);
+	return current + (target - current) * (1 - (1 - response) ** frameScale);
+}
+const EXCLUDE_SELECTOR = "[data-control-ui=\"dynamic-notification\"]";
+function cssImageUrls(value) {
+	return Array.from(value.matchAll(/url\((["']?)(.*?)\1\)/g), (match) => match[2]?.trim()).filter((url) => Boolean(url && !url.startsWith("data:") && !url.startsWith("#")));
+}
+function sceneImageUrls(scene) {
+	const urls = /* @__PURE__ */ new Set();
+	for (const element of [scene, ...scene.querySelectorAll("*")]) {
+		if (element.closest(EXCLUDE_SELECTOR)) continue;
+		if (element instanceof HTMLImageElement && element.currentSrc && !element.currentSrc.startsWith("data:")) urls.add(element.currentSrc);
+		const computed = getComputedStyle(element);
+		for (let index = 0; index < computed.length; index += 1) for (const url of cssImageUrls(computed.getPropertyValue(computed.item(index)))) urls.add(url);
+	}
+	return urls;
+}
+function blobDataUrl(blob) {
+	return new Promise((resolve) => {
+		const reader = new FileReader();
+		reader.addEventListener("load", () => resolve(typeof reader.result === "string" ? reader.result : null), { once: true });
+		reader.addEventListener("error", () => resolve(null), { once: true });
+		reader.readAsDataURL(blob);
+	});
+}
+async function fetchImageDataUrl(url) {
+	try {
+		const resolved = new URL(url, document.baseURI);
+		const sameOrigin = resolved.origin === window.location.origin;
+		const response = await fetch(resolved, {
+			cache: "force-cache",
+			credentials: sameOrigin ? "same-origin" : "omit",
+			mode: sameOrigin ? "same-origin" : "cors"
+		});
+		if (!response.ok) return null;
+		return blobDataUrl(await response.blob());
+	} catch {
+		return null;
+	}
+}
+async function embedSceneImages(scene) {
+	const urls = [...sceneImageUrls(scene)];
+	const dataUrls = await Promise.all(urls.map(fetchImageDataUrl));
+	const images = /* @__PURE__ */ new Map();
+	for (let index = 0; index < urls.length; index += 1) {
+		const url = urls[index];
+		const dataUrl = dataUrls[index];
+		if (!url || !dataUrl) return null;
+		images.set(url, dataUrl);
+	}
+	return images;
+}
+function embedCssImages(value, images) {
+	return value.replace(/url\((["']?)(.*?)\1\)/g, (match, _quote, url) => {
+		const embedded = images.get(url.trim());
+		return embedded ? `url("${embedded}")` : match;
+	});
+}
+function cloneCanvas(source) {
+	try {
+		const snapshot = document.createElement("img");
+		snapshot.src = source.toDataURL();
+		snapshot.setAttribute("style", getComputedStyle(source).cssText);
+		return snapshot;
+	} catch {
+		return null;
+	}
+}
+function computedStyleText(source, images) {
+	const computed = getComputedStyle(source);
+	const parts = [];
+	for (let index = 0; index < computed.length; index += 1) {
+		const property = computed.item(index);
+		parts.push(`${property}: ${embedCssImages(computed.getPropertyValue(property), images)};`);
+	}
+	return parts.join(" ");
+}
+function appendClonedChildren(source, target, images) {
+	for (const child of source.childNodes) if (child instanceof Element) {
+		const cloned = cloneTree(child, images);
+		if (cloned) target.appendChild(cloned);
+	} else if (child.nodeType === Node.TEXT_NODE) target.appendChild(child.cloneNode(false));
+}
+function cloneTree(source, images) {
+	if (source.matches(EXCLUDE_SELECTOR)) return null;
+	if (source instanceof HTMLCanvasElement) return cloneCanvas(source);
+	const node = source.cloneNode(false);
+	if (!(node instanceof Element)) return null;
+	node.setAttribute("style", computedStyleText(source, images));
+	if (source instanceof HTMLImageElement && node instanceof HTMLImageElement) {
+		const embedded = images.get(source.currentSrc);
+		if (embedded) node.src = embedded;
+		node.removeAttribute("srcset");
+		node.removeAttribute("sizes");
+	}
+	if (source instanceof HTMLSourceElement && source.parentElement instanceof HTMLPictureElement) {
+		node.removeAttribute("srcset");
+		node.removeAttribute("sizes");
+	}
+	appendClonedChildren(source, node, images);
+	return node;
+}
+function scaleCanvas(source, width, height) {
+	const step = document.createElement("canvas");
+	step.width = width;
+	step.height = height;
+	const context = step.getContext("2d");
+	if (!context) return null;
+	context.imageSmoothingEnabled = true;
+	context.imageSmoothingQuality = "high";
+	context.drawImage(source, 0, 0, width, height);
+	return step;
+}
+function sceneCaptureDimensions(scene, scale) {
+	const rect = scene.getBoundingClientRect();
+	const width = Math.max(1, Math.round(rect.width));
+	const height = Math.max(1, Math.round(rect.height));
+	return {
+		width,
+		height,
+		rasterWidth: Math.max(1, Math.round(width * scale)),
+		rasterHeight: Math.max(1, Math.round(height * scale))
+	};
+}
+function prepareSceneClone(scene, dimensions, images) {
+	const clone = cloneTree(scene, images);
+	if (!(clone instanceof HTMLElement)) return null;
+	clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+	clone.style.width = `${dimensions.width}px`;
+	clone.style.height = `${dimensions.height}px`;
+	clone.style.margin = "0";
+	clone.style.boxSizing = "border-box";
+	return clone;
+}
+async function decodeSceneImage(clone, dimensions) {
+	const markup = new XMLSerializer().serializeToString(clone);
+	const { width, height, rasterWidth, rasterHeight } = dimensions;
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${rasterWidth}" height="${rasterHeight}" viewBox="0 0 ${width} ${height}"><foreignObject width="${width}" height="${height}">${markup}</foreignObject></svg>`;
+	const image = new Image();
+	image.decoding = "async";
+	image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+	try {
+		await image.decode();
+		return image;
+	} catch {
+		return null;
+	}
+}
+function drawSharpScene(image, dimensions) {
+	const sharp = document.createElement("canvas");
+	sharp.width = dimensions.rasterWidth;
+	sharp.height = dimensions.rasterHeight;
+	const context = sharp.getContext("2d");
+	if (!context) return null;
+	context.drawImage(image, 0, 0, sharp.width, sharp.height);
+	return sharp;
+}
+function downsampleForFrost(sharp, frost) {
+	const targetWidth = Math.max(1, Math.round(sharp.width / frost));
+	const targetHeight = Math.max(1, Math.round(sharp.height / frost));
+	let small = sharp;
+	let stepWidth = sharp.width;
+	let stepHeight = sharp.height;
+	while (small && stepWidth * .5 >= targetWidth) {
+		stepWidth = Math.max(targetWidth, Math.round(stepWidth * .5));
+		stepHeight = Math.max(targetHeight, Math.round(stepHeight * .5));
+		small = scaleCanvas(small, stepWidth, stepHeight);
+	}
+	if (small && (small.width !== targetWidth || small.height !== targetHeight)) small = scaleCanvas(small, targetWidth, targetHeight);
+	if (!small) return null;
+	const bounced = scaleCanvas(small, Math.max(1, Math.round(targetWidth / 2)), Math.max(1, Math.round(targetHeight / 2)));
+	return bounced ? scaleCanvas(bounced, targetWidth, targetHeight) ?? small : small;
+}
+function drawFrostedScene(sharp, frost) {
+	const frosted = document.createElement("canvas");
+	frosted.width = sharp.width;
+	frosted.height = sharp.height;
+	const context = frosted.getContext("2d");
+	if (!context) return null;
+	if (frost <= 1) {
+		context.drawImage(sharp, 0, 0);
+		return frosted;
+	}
+	const smoothed = downsampleForFrost(sharp, frost);
+	if (smoothed) {
+		context.imageSmoothingEnabled = true;
+		context.imageSmoothingQuality = "high";
+		context.drawImage(smoothed, 0, 0, frosted.width, frosted.height);
+	} else context.drawImage(sharp, 0, 0);
+	return frosted;
+}
+async function captureScene(scene, scale, frost) {
+	const images = await embedSceneImages(scene);
+	if (!images) return null;
+	const dimensions = sceneCaptureDimensions(scene, scale);
+	const clone = prepareSceneClone(scene, dimensions, images);
+	if (!clone) return null;
+	const image = await decodeSceneImage(clone, dimensions);
+	if (!image) return null;
+	const sharp = drawSharpScene(image, dimensions);
+	if (!sharp) return null;
+	const frosted = drawFrostedScene(sharp, frost);
+	if (!frosted) return null;
+	return {
+		sharp,
+		frosted
+	};
+}
+function createDynamicNotificationLiquid(canvas, options = {}) {
+	const { refraction = .85, chromaticAberration = 0, zRadius = 32, edgeDarkening = .05, specular = .11, fresnel = .35, edgeHighlight = .16, frost = 4, maxDpr = 2 } = options;
+	const gl = canvas.getContext("webgl", {
+		alpha: true,
+		premultipliedAlpha: true,
+		antialias: true
+	});
+	if (!gl) {
+		canvas.dataset.glassFailed = "webgl";
+		return () => {
+			delete canvas.dataset.glassFailed;
+		};
+	}
+	const closestScene = canvas.closest("[data-dn-scene]");
+	const scene = closestScene instanceof HTMLElement ? closestScene : document.body;
+	let contextLost = gl.isContextLost();
+	let liquid = contextLost ? null : buildProgram(gl);
+	if (!contextLost && !liquid) {
+		canvas.dataset.glassFailed = "shader";
+		return () => {
+			delete canvas.dataset.glassFailed;
+		};
+	}
+	let destroyed = false;
+	let intersecting = true;
+	let pageVisible = !document.hidden;
+	let rafId = 0;
+	let dpr = 1;
+	let radius = 0;
+	const initialState = canvas.parentElement?.dataset.state;
+	let aurora = auroraTarget(initialState);
+	let reveal = revealTarget(initialState);
+	let settle = settleTarget(initialState);
+	let lift = 1 - aurora;
+	let staticFrameDrawn = false;
+	let captured = null;
+	let textureFresh = false;
+	let captureToken = 0;
+	let captureTimer = 0;
+	const startedAt = performance.now();
+	let previousFrameAt = startedAt;
+	const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+	function reducedMotion() {
+		return reducedMotionQuery.matches || canvas.closest("[data-motion=\"reduced\"]") !== null;
+	}
+	function targetRadius(host) {
+		const parsed = Number.parseFloat(getComputedStyle(host).borderTopLeftRadius);
+		return Number.isFinite(parsed) ? parsed : 0;
+	}
+	function resize() {
+		dpr = Math.min(window.devicePixelRatio || 1, maxDpr);
+		const width = Math.max(1, Math.round(canvas.clientWidth * dpr));
+		const height = Math.max(1, Math.round(canvas.clientHeight * dpr));
+		if (canvas.width !== width || canvas.height !== height) {
+			canvas.width = width;
+			canvas.height = height;
+		}
+	}
+	function uploadTexture() {
+		if (!gl || !liquid || contextLost || !captured) return;
+		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+		gl.bindTexture(gl.TEXTURE_2D, liquid.sharpTexture);
+		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, captured.sharp);
+		gl.bindTexture(gl.TEXTURE_2D, liquid.blurTexture);
+		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, captured.frosted);
+		textureFresh = true;
+	}
+	function recapture() {
+		captureToken += 1;
+		const token = captureToken;
+		const rect = scene.getBoundingClientRect();
+		const supersample = Math.min((window.devicePixelRatio || 1) * 1.5, 3, 4096 / Math.max(rect.width, rect.height, 1));
+		captureScene(scene, Math.max(1, supersample), frost).then((result) => {
+			if (destroyed || token !== captureToken) return;
+			if (!result) {
+				captured = null;
+				textureFresh = false;
+				delete canvas.dataset.glassReady;
+				canvas.dataset.glassFailed = "capture";
+				return;
+			}
+			captured = result;
+			delete canvas.dataset.glassFailed;
+			uploadTexture();
+			invalidate();
+		});
+	}
+	function scheduleRecapture() {
+		window.clearTimeout(captureTimer);
+		captureTimer = window.setTimeout(recapture, 200);
+	}
+	function advanceMotion(host, reduced, deltaMs) {
+		const state = host.dataset.state;
+		const targetAurora = auroraTarget(state);
+		const targets = {
+			radius: targetRadius(host),
+			aurora: targetAurora,
+			reveal: revealTarget(state),
+			settle: settleTarget(state),
+			lift: targetAurora >= .5 ? 0 : 1
+		};
+		radius = reduced ? targets.radius : approachAt60Hz(radius, targets.radius, .25, deltaMs);
+		aurora = reduced ? targets.aurora : approachAt60Hz(aurora, targets.aurora, .06, deltaMs);
+		reveal = reduced ? targets.reveal : approachAt60Hz(reveal, targets.reveal, .07, deltaMs);
+		settle = reduced ? targets.settle : approachAt60Hz(settle, targets.settle, .07, deltaMs);
+		if (reduced) lift = targets.lift;
+		else if (targets.lift === 1) lift = Math.min(1, lift + deltaMs * .00216);
+		else lift = approachAt60Hz(lift, 0, .28, deltaMs);
+		return targets;
+	}
+	function shouldAnimate(host, reduced, targets) {
+		return !reduced && (host.dataset.state === "thinking" || Math.abs(radius - targets.radius) > .05 || Math.abs(aurora - targets.aurora) > .002 || Math.abs(reveal - targets.reveal) > .002 || Math.abs(settle - targets.settle) > .002 || Math.abs(lift - targets.lift) > .002);
+	}
+	function draw() {
+		if (!gl || !liquid || contextLost || !textureFresh) return false;
+		const host = canvas.parentElement;
+		if (!host) return false;
+		resize();
+		const hostRect = host.getBoundingClientRect();
+		const sceneRect = scene.getBoundingClientRect();
+		if (sceneRect.width < 1 || sceneRect.height < 1) return false;
+		gl.viewport(0, 0, canvas.width, canvas.height);
+		gl.clearColor(0, 0, 0, 0);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+		gl.useProgram(liquid.program);
+		const reduced = reducedMotion();
+		const now = performance.now();
+		const deltaMs = Math.min(100, now - previousFrameAt);
+		previousFrameAt = now;
+		const targets = advanceMotion(host, reduced, deltaMs);
+		gl.activeTexture(gl.TEXTURE0);
+		gl.bindTexture(gl.TEXTURE_2D, liquid.sharpTexture);
+		gl.activeTexture(gl.TEXTURE1);
+		gl.bindTexture(gl.TEXTURE_2D, liquid.blurTexture);
+		gl.uniform1i(liquid.sharpTex, 0);
+		gl.uniform1i(liquid.blurTex, 1);
+		gl.uniform2f(liquid.size, Math.max(1, canvas.clientWidth), Math.max(1, canvas.clientHeight));
+		gl.uniform2f(liquid.panelOffset, hostRect.left - sceneRect.left, hostRect.top - sceneRect.top);
+		gl.uniform2f(liquid.sceneSize, sceneRect.width, sceneRect.height);
+		gl.uniform1f(liquid.radius, radius);
+		gl.uniform1f(liquid.zRadius, zRadius);
+		gl.uniform1f(liquid.refract, refraction);
+		gl.uniform1f(liquid.chroma, chromaticAberration);
+		gl.uniform1f(liquid.edgeDarkening, edgeDarkening);
+		gl.uniform1f(liquid.spec, specular);
+		gl.uniform1f(liquid.fresnel, fresnel);
+		gl.uniform1f(liquid.edgeHL, edgeHighlight);
+		gl.uniform1f(liquid.time, reduced ? 4.2 : (now - startedAt) / 1e3);
+		gl.uniform1f(liquid.aurora, aurora);
+		gl.uniform1f(liquid.reveal, reveal);
+		gl.uniform1f(liquid.settle, settle);
+		gl.uniform1f(liquid.lift, lift);
+		gl.uniform1f(liquid.ribbonHorizon, .5);
+		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+		delete canvas.dataset.glassFailed;
+		if (canvas.dataset.glassReady !== "true") canvas.dataset.glassReady = "true";
+		return shouldAnimate(host, reduced, targets);
+	}
+	function visible() {
+		return intersecting && pageVisible;
+	}
+	function tick() {
+		rafId = 0;
+		if (destroyed || !visible() || contextLost) return;
+		if (!draw()) {
+			staticFrameDrawn = true;
+			return;
+		}
+		staticFrameDrawn = false;
+		rafId = requestAnimationFrame(tick);
+	}
+	function invalidate() {
+		staticFrameDrawn = false;
+		if (destroyed || !visible() || contextLost || rafId !== 0) return;
+		rafId = requestAnimationFrame(tick);
+	}
+	function handleVisibility() {
+		pageVisible = !document.hidden;
+		invalidate();
+	}
+	function handleContextLost(event) {
+		event.preventDefault();
+		contextLost = true;
+		textureFresh = false;
+		delete canvas.dataset.glassReady;
+		canvas.dataset.glassFailed = "context";
+		if (rafId !== 0) cancelAnimationFrame(rafId);
+		rafId = 0;
+	}
+	function handleContextRestored() {
+		if (!gl) return;
+		contextLost = false;
+		liquid = buildProgram(gl);
+		if (!liquid) {
+			canvas.dataset.glassFailed = "shader";
+			return;
+		}
+		uploadTexture();
+		invalidate();
+	}
+	const resizeObserver = new ResizeObserver(() => {
+		invalidate();
+	});
+	resizeObserver.observe(canvas);
+	const sceneResizeObserver = new ResizeObserver(() => {
+		scheduleRecapture();
+	});
+	sceneResizeObserver.observe(scene);
+	const sceneMutationObserver = new MutationObserver((mutations) => {
+		for (const mutation of mutations) {
+			const target = mutation.target;
+			if ((target instanceof Element ? target : target.parentElement)?.closest(EXCLUDE_SELECTOR)) continue;
+			scheduleRecapture();
+			return;
+		}
+	});
+	sceneMutationObserver.observe(scene, {
+		attributes: true,
+		characterData: true,
+		childList: true,
+		subtree: true
+	});
+	const intersectionObserver = new IntersectionObserver((entries) => {
+		for (const entry of entries) intersecting = entry.isIntersecting;
+		invalidate();
+	}, { rootMargin: "64px" });
+	intersectionObserver.observe(canvas);
+	const motionObserver = new MutationObserver(() => {
+		if (!staticFrameDrawn || !reducedMotion()) invalidate();
+	});
+	motionObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["data-motion"]
+	});
+	function handleMotionPreference() {
+		invalidate();
+	}
+	document.addEventListener("visibilitychange", handleVisibility);
+	reducedMotionQuery.addEventListener("change", handleMotionPreference);
+	canvas.addEventListener("webglcontextlost", handleContextLost);
+	canvas.addEventListener("webglcontextrestored", handleContextRestored);
+	recapture();
+	invalidate();
+	return () => {
+		destroyed = true;
+		if (rafId !== 0) cancelAnimationFrame(rafId);
+		window.clearTimeout(captureTimer);
+		resizeObserver.disconnect();
+		sceneResizeObserver.disconnect();
+		sceneMutationObserver.disconnect();
+		intersectionObserver.disconnect();
+		motionObserver.disconnect();
+		document.removeEventListener("visibilitychange", handleVisibility);
+		reducedMotionQuery.removeEventListener("change", handleMotionPreference);
+		canvas.removeEventListener("webglcontextlost", handleContextLost);
+		canvas.removeEventListener("webglcontextrestored", handleContextRestored);
+		delete canvas.dataset.glassReady;
+		delete canvas.dataset.glassFailed;
+		if (liquid && !gl.isContextLost()) {
+			gl.deleteProgram(liquid.program);
+			gl.deleteBuffer(liquid.buffer);
+			gl.deleteTexture(liquid.sharpTexture);
+			gl.deleteTexture(liquid.blurTexture);
+		}
+		liquid = null;
+		captured = null;
+	};
+}
+//#endregion
+export { createDynamicNotificationLiquid };

package/dist/dynamic-notification-siri-wave.d.ts

@@ -0,0 +1,4 @@
+//#region src/dynamic-notification-siri-wave.d.ts
+declare const DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL = "\nconst float SIRI_PI = 3.14159265359;\nconst float SIRI_AMPLITUDE = 0.32;\nconst float SIRI_FREQUENCY = 1.1;\nconst float SIRI_ABERRATION_FREQUENCY = 1.0;\nconst float SIRI_SPEED = 2.4;\nconst float SIRI_WAVE_SCALE = 0.6;\nconst float SIRI_ABERRATION = 2.6;\nconst float SIRI_THICKNESS = 3.0;\nconst float SIRI_INTENSITY = 2.0;\nconst float SIRI_FALLOFF = 1.7;\nconst float SIRI_EDGE_MASK = 0.4;\nconst float SIRI_BAND_FILL = 30000.0;\nconst float SIRI_BAND_THICKNESS = 0.08;\nconst float SIRI_SOFTNESS = 2.5;\nconst float SIRI_LOW_AMPLITUDE = 6.0;\nconst float SIRI_LOW_INTENSITY = 1.5;\nconst float SIRI_MID_ABERRATION = 0.8;\nconst float SIRI_MID_ABERRATION_AMPLITUDE = 0.05;\nconst float SIRI_MID_SOFTNESS = 0.4;\nconst float SIRI_HIGH_ABERRATION = 0.5;\nconst float SIRI_HIGH_ABERRATION_AMPLITUDE = 0.06;\n\nvec3 siriSpectrum(int strand) {\n  float x = float(strand);\n  return clamp(vec3(abs(x - 3.0) - 1.0, 2.0 - abs(x - 2.0), 2.0 - abs(x - 4.0)), 0.0, 1.0);\n}\n\nvec3 dynamicNotificationSiriWave(vec2 uv, vec2 resolution, float time, float horizon, float lift) {\n  float aspect = resolution.x / max(resolution.y, 1.0);\n  vec2 p = vec2((uv.x * 2.0 - 1.0) * aspect, (uv.y - horizon + lift * 0.55) * 2.0);\n  float screenY = p.y;\n  p /= max(SIRI_WAVE_SCALE, 0.1);\n\n  float low = clamp(0.45 + 0.45 * sin(time * 0.8) * sin(time * 0.37 + 1.0), 0.0, 1.0);\n  float mid = clamp(0.40 + 0.40 * sin(time * 1.7 + 2.0) * sin(time * 0.53), 0.0, 1.0);\n  float high = clamp(0.30 + 0.30 * sin(time * 2.9 + 4.0) * sin(time * 0.71 + 2.0), 0.0, 1.0);\n  float drift = mod(time, 20.0 * SIRI_PI) * SIRI_SPEED;\n\n  float horizontalPosition = uv.x * 2.0 - 1.0;\n  float envelope = cos(SIRI_PI * 0.5 * min(abs(0.9 * horizontalPosition), 1.0));\n  envelope *= envelope;\n\n  float primaryAmplitude = SIRI_AMPLITUDE + 0.01 * low * SIRI_LOW_AMPLITUDE;\n  float strandAmplitude = primaryAmplitude + mid * SIRI_MID_ABERRATION_AMPLITUDE + high * SIRI_HIGH_ABERRATION_AMPLITUDE;\n  float aberration = SIRI_ABERRATION + mid * SIRI_MID_ABERRATION + high * SIRI_HIGH_ABERRATION;\n  float thickness = 0.01 * SIRI_THICKNESS;\n  float intensity = 0.01 * (SIRI_INTENSITY + low * SIRI_LOW_INTENSITY);\n  float softness = 0.01 * max(0.0, SIRI_SOFTNESS + mid * SIRI_MID_SOFTNESS);\n  float primaryY = primaryAmplitude * envelope * sin(p.x * SIRI_FREQUENCY + drift);\n  float bandAmount = 1e-4 * SIRI_BAND_FILL * intensity;\n\n  vec3 numerator = vec3(0.0);\n  vec3 denominator = vec3(0.0);\n  for (int strand = 0; strand < 4; strand++) {\n    vec3 hue = siriSpectrum(strand);\n    denominator += hue;\n    float phase = mix(-aberration, aberration, float(strand) / 3.0);\n    float strandY = strandAmplitude * envelope * sin(p.x * SIRI_ABERRATION_FREQUENCY + drift + phase);\n    float distanceToStrand = abs(p.y - strandY);\n    float line = intensity / (sqrt(distanceToStrand * distanceToStrand + softness * softness) + thickness);\n    float bandLow = min(primaryY, strandY);\n    float bandHigh = max(primaryY, strandY);\n    float distanceToBand = max(0.0, max(p.y - bandHigh, bandLow - p.y));\n    float band = bandAmount / (distanceToBand + SIRI_BAND_THICKNESS);\n    numerator += hue * (line + band);\n  }\n\n  vec3 color = numerator / max(denominator, vec3(0.0001));\n  float primaryDistance = abs(p.y - primaryY);\n  color += 0.5 * intensity / (sqrt(primaryDistance * primaryDistance + softness * softness) + thickness);\n  color = pow(max(color, 0.0), vec3(1.5));\n\n  float edgeFadePosition = clamp((abs(screenY) - 1.0) / -SIRI_EDGE_MASK, 0.0, 1.0);\n  float edgeFade = edgeFadePosition * edgeFadePosition * (3.0 - 2.0 * edgeFadePosition);\n  color *= edgeFade * exp(-pow(horizontalPosition * SIRI_FALLOFF, 2.0));\n  return color;\n}\n";
+//#endregion
+export { DYNAMIC_NOTIFICATION_SIRI_WAVE_GLSL };