ngwr 15.1.0 → 15.2.0

package/fesm2022/ngwr-bits-iridescence.mjs

@@ -0,0 +1,591 @@
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, ElementRef, NgZone, PLATFORM_ID, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, effect, inject, input, signal, untracked, viewChild } from "@angular/core";
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { isPlatformBrowser } from "@angular/common";
+import { clamp, numAttr, resolveCssColor, resolveCssColorChannels, watchColorScheme } from "ngwr/utils";
+import { WrPlatform } from "ngwr/platform";
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*
+* After the Iridescence background idea on reactbits.dev
+* (https://www.reactbits.dev/backgrounds/iridescence). The shader is written for
+* ngwr from scratch: folded silk under a raking light, with the motion, the
+* inputs and the names this library's own.
+*
+* WebGL2 rather than a 2D canvas, deliberately, unlike `wr-threads` and
+* `wr-ripple-grid`. Those draw a few dozen strokes; this works out every pixel,
+* every frame, which is a job for a fragment shader and no job for a 2D context.
+*/
+const VERT = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+const FRAG = `#version 300 es
+precision highp float;
+uniform vec2 uResolution;
+uniform vec3 uPhase;
+uniform vec2 uPointer;
+uniform vec3 uColor;
+out vec4 fragColor;
+
+// Folded silk. A height field of draped folds is lit by a raking key light; hue is a small, luma-free offset
+// driven by the fold slope. No finite differences: every stage carries its gradient by the chain rule, so the
+// normal costs one evaluation of the cloth instead of three.
+
+// One stage of the warp: moves v by a sine of u, and carries the gradient of v along with it.
+void shear(inout float v, inout vec2 gv, float u, vec2 gu, float amp, float k, float phi) {
+  v += amp * sin(k * u + phi);
+  gv += amp * k * cos(k * u + phi) * gu;
+}
+
+// One family of folds added to the height. Negative skew bends the sine so the flank facing the light is short
+// and bright and the other long and soft, which is the drape's crest and valley. t tapers the family, gt is its
+// gradient.
+void pleat(inout float h, inout vec2 g, float u, vec2 gu, float skew, float amp, float t, vec2 gt) {
+  float b = u + skew * sin(u);
+  float s = sin(b);
+  h += amp * t * s;
+  g += amp * (t * cos(b) * (1.0 + skew * cos(u)) * gu + s * gt);
+}
+
+void main() {
+  vec2 p = (2.0 * gl_FragCoord.xy - uResolution) / min(uResolution.x, uResolution.y);
+  vec3 ph = uPhase;
+  vec2 st = uPointer;
+
+  // Drape axis: q.x runs along the folds, q.y across them. gx and gy are the gradients of q.x and q.y.
+  vec2 gx = vec2(0.86, 0.51);
+  vec2 gy = vec2(-0.51, 0.86);
+  vec2 q = vec2(dot(p, gx), dot(p, gy)) + st * vec2(0.5, 0.8);
+
+  // The warp. The pointer enters each stage differently, so stirring bends the folds instead of sliding the
+  // picture. Sums like ph.y - ph.x are still integer multiples, so seam free, and give slow beats: the large
+  // displacements run on those so the cloth does not stream.
+
+  // A long sweep: the whole drape bends once across the frame.
+  shear(q.y, gy, q.x, gx, 0.42, 0.60, ph.x + 1.6 * st.x);
+
+  // Gather: spacing across the drape swells and tightens along its length, so folds fan out from a pinch.
+  float ga = 0.85 * q.x + ph.y - ph.x + 1.2 * st.y;
+  float gs = 0.20 * sin(ga);
+  gy = (1.0 + gs) * gy + q.y * 0.20 * 0.85 * cos(ga) * gx;
+  q.y *= 1.0 + gs;
+
+  // A slip along the folds, so tapers and crossings do not line up across the width.
+  shear(q.x, gx, q.y, gy, 0.22, 1.10, -ph.y - 0.8 * st.y);
+
+  // Differential bend: this one reads q.y too, so neighbouring folds bend apart and bunch instead of running
+  // as parallel stripes.
+  shear(q.y, gy, q.x + 0.8 * q.y, gx + 0.8 * gy, 0.24, 1.15, ph.z - ph.y - 2.0 * st.x);
+
+  // Height, three scales of cloth: a big billow slightly off axis that decides where the light pools, the main
+  // folds, and a fine echo. Each main fold is gated across the drape as well as along it, so some stand proud
+  // and others die out; that hierarchy is what stops it reading as stripes. The tapers run on the fast phase:
+  // folds swell and relax in place more than they travel.
+  float h = 0.0;
+  vec2 g = vec2(0.0);
+  pleat(h, g, 2.3 * q.y - 0.8 * q.x - ph.x + 2.5 * st.y - 1.5 * st.x, 2.3 * gy - 0.8 * gx, -0.2, 0.62, 1.0, vec2(0.0));
+  float a = 0.9 * q.x + 1.3 * q.y - ph.z;
+  pleat(h, g, 5.0 * q.y + ph.x, 5.0 * gy, -0.36, 0.50, 0.68 + 0.32 * sin(a), 0.32 * cos(a) * (0.9 * gx + 1.3 * gy));
+  a = 1.1 * q.y + 0.6 * q.x + 1.9 + ph.z;
+  pleat(h, g, 9.5 * q.y + 0.5 * q.x - ph.y, 9.5 * gy + 0.5 * gx, -0.34, 0.20, 0.55 + 0.45 * sin(a),
+        0.45 * cos(a) * (1.1 * gy + 0.6 * gx));
+
+  // Raking key light: a flat patch sits mid-tone, the two flanks of a crest go opposite ways. The sheen is a broad
+  // lobe that rides the lit flank. A weak bounce from the far side keeps the shaded flank from going to slate.
+  const vec3 L = normalize(vec3(-0.50, 0.72, 0.48));
+  const vec3 H = normalize(L + vec3(0.0, 0.0, 1.0));
+  const vec3 B = normalize(vec3(0.42, -0.60, 0.68));
+  vec3 n = normalize(vec3(-0.27 * g, 1.0));
+  float body = pow(0.5 + 0.5 * dot(n, L), 1.35);
+  float sheen = pow(max(dot(n, H), 0.0), 26.0);
+  float bounce = pow(max(dot(n, B), 0.0), 8.0);
+
+  // Valleys sit in their own shade whatever the light does; this keeps depth in the dark tint.
+  float lum = (0.21 + 1.12 * body) * (0.90 + 0.15 * h) + 0.30 * sheen + 0.08 * bounce;
+
+  // Shot silk: the hue turns with the slope seen from the light, pale rose on the lit flank, lilac on the flat,
+  // periwinkle in the shade. The drift along the warped cloth wanders further where it is lit, so pale sky and rose
+  // zones follow the folds while the shade holds its colour: a warm highlight or a green-heavy shade would grey
+  // or flatten under the dark tint.
+  float slope = dot(g, vec2(-0.57, 0.82));
+  float turn = 0.42 * slope / sqrt(1.0 + 0.18 * slope * slope);
+  float drift = sin(1.25 * q.y + 0.55 * q.x + ph.z - ph.y);
+  float theta = 1.68 + 0.85 * turn - 0.2 * turn * turn + (0.15 + 0.85 * body) * drift;
+  vec3 tone = cos(theta + vec3(0.0, 2.1, 4.2));
+
+  // The offset has its luma removed, so colour draws no shapes of its own and the folds stay pure luminance.
+  tone -= dot(tone, vec3(0.2126, 0.7152, 0.0722));
+
+  // Chroma lives in the shade and the mid-tones; the highlight goes nearly white, which is what makes it pearl.
+  vec3 col = lum * (1.0 + (0.46 - 0.28 * body - 0.08 * sheen) * tone);
+
+  // Soft shoulder, so a highlight rolls off instead of clipping to a flat white shape.
+  col = col / (1.0 + 0.26 * col * col);
+
+  // Interleaved gradient noise, plus or minus half an 8-bit step: a large dark hero spreads a few levels of tint over
+  // hundreds of pixels and bands. Static, off the pixel and never a phase, so it cannot shimmer or cost a held frame a redraw.
+  float dither = fract(52.9829189 * fract(dot(gl_FragCoord.xy, vec2(0.06711056, 0.00583715)))) - 0.5;
+
+  fragColor = vec4(col * uColor + dither / 255.0, 1.0);
+}
+`;
+const THEME_COLOR = "var(--wr-iridescence-color)";
+const FALLBACK_COLOR = "rgb(255, 255, 255)";
+const TAU = Math.PI * 2;
+const RATE = [
+	.187,
+	.283,
+	.441
+];
+const FRAME_MS = 1e3 / 60;
+const MAX_FRAME_MS = 50;
+const REACH = .1;
+const POINTER_TAU_MS = 250;
+const POINTER_EPSILON = 1e-4;
+const MAX_PIXELS = 2e6;
+function wrap(angle) {
+	const turn = angle % TAU;
+	const wrapped = turn < 0 ? turn + TAU : turn;
+	return wrapped < TAU ? wrapped : 0;
+}
+var WrIridescence = class WrIridescence {
+	color = input(null, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	speed = input(1, {
+		...ngDevMode ? { debugName: "speed" } : /* istanbul ignore next */ {},
+		transform: numAttr(1)
+	});
+	amplitude = input(1, {
+		...ngDevMode ? { debugName: "amplitude" } : /* istanbul ignore next */ {},
+		transform: numAttr(1)
+	});
+	followPointer = input(true, {
+		...ngDevMode ? { debugName: "followPointer" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	standInColor = computed(() => (this.color() ?? "").trim() || null, ...ngDevMode ? [{ debugName: "standInColor" }] : /* istanbul ignore next */ []);
+	expression = computed(() => (this.color() ?? "").trim() || THEME_COLOR, ...ngDevMode ? [{ debugName: "expression" }] : /* istanbul ignore next */ []);
+	listening = computed(() => !this.platform.prefersReducedMotion() && this.followPointer() && this.amplitude() !== 0, ...ngDevMode ? [{ debugName: "listening" }] : /* istanbul ignore next */ []);
+	moving = computed(() => !this.platform.prefersReducedMotion() && (this.speed() !== 0 || this.listening()), ...ngDevMode ? [{ debugName: "moving" }] : /* istanbul ignore next */ []);
+	painted = signal(false, ...ngDevMode ? [{ debugName: "painted" }] : /* istanbul ignore next */ []);
+	canvasRef = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvasRef" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef);
+	zone = inject(NgZone);
+	destroyRef = inject(DestroyRef);
+	platform = inject(WrPlatform);
+	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+	gl = null;
+	gpu = null;
+	bitmap = {
+		width: 0,
+		height: 0
+	};
+	rafId = 0;
+	phase = [
+		0,
+		0,
+		0
+	];
+	pointer = {
+		x: 0,
+		y: 0,
+		aimX: 0,
+		aimY: 0
+	};
+	lastMove = null;
+	resolved = "";
+	channels = [
+		1,
+		1,
+		1
+	];
+	dirty = true;
+	booted = signal(false, ...ngDevMode ? [{ debugName: "booted" }] : /* istanbul ignore next */ []);
+	onScreen = signal(true, ...ngDevMode ? [{ debugName: "onScreen" }] : /* istanbul ignore next */ []);
+	hasBox = signal(false, ...ngDevMode ? [{ debugName: "hasBox" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (!this.isBrowser) return;
+		afterNextRender(() => this.zone.runOutsideAngular(() => this.boot()));
+		afterRenderEffect(() => {
+			if (!this.booted()) return;
+			const moving = this.moving();
+			this.expression();
+			untracked(() => this.repaint(moving));
+		});
+		watchColorScheme(() => {
+			if (this.booted()) this.repaint(this.moving());
+		});
+		effect((onCleanup) => {
+			if (!this.booted() || !this.onScreen() || !this.hasBox() || !this.moving()) return;
+			const follow = this.listening();
+			onCleanup(untracked(() => this.zone.runOutsideAngular(() => this.animate(follow))));
+		});
+	}
+	boot() {
+		const canvas = this.canvasRef().nativeElement;
+		const gl = canvas.getContext("webgl2", {
+			alpha: true,
+			antialias: false,
+			depth: false,
+			stencil: false
+		});
+		if (!gl) return;
+		this.gl = gl;
+		this.gpu = this.build(gl);
+		if (!this.gpu && !gl.isContextLost()) {
+			this.release(gl);
+			return;
+		}
+		const onLost = (event) => {
+			event.preventDefault();
+			this.gpu = null;
+			this.booted.set(false);
+			this.painted.set(false);
+		};
+		const onRestored = () => {
+			this.gpu = this.build(gl);
+			if (this.gpu) this.booted.set(true);
+		};
+		canvas.addEventListener("webglcontextlost", onLost);
+		canvas.addEventListener("webglcontextrestored", onRestored);
+		const hostEl = this.host.nativeElement;
+		this.fit(hostEl.clientWidth, hostEl.clientHeight);
+		const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver((entries) => {
+			const rect = entries[entries.length - 1]?.contentRect;
+			if (rect && this.fit(rect.width, rect.height)) this.draw();
+		});
+		ro?.observe(hostEl);
+		const io = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => {
+			const { isIntersecting, intersectionRatio } = entries[entries.length - 1];
+			this.onScreen.set(isIntersecting && intersectionRatio > 0);
+		}, { threshold: [0, 1e-9] });
+		io?.observe(canvas);
+		this.destroyRef.onDestroy(() => {
+			ro?.disconnect();
+			io?.disconnect();
+			canvas.removeEventListener("webglcontextlost", onLost);
+			canvas.removeEventListener("webglcontextrestored", onRestored);
+			this.release(gl);
+		});
+		if (this.gpu) this.booted.set(true);
+	}
+	build(gl) {
+		const vert = this.compile(gl, gl.VERTEX_SHADER, VERT);
+		const frag = this.compile(gl, gl.FRAGMENT_SHADER, FRAG);
+		const program = vert && frag ? gl.createProgram() : null;
+		if (vert && frag && program) {
+			gl.attachShader(program, vert);
+			gl.attachShader(program, frag);
+			gl.linkProgram(program);
+		}
+		gl.deleteShader(vert);
+		gl.deleteShader(frag);
+		if (!program) return null;
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+			if (!gl.isContextLost()) console.error("wr-iridescence program error:", gl.getProgramInfoLog(program));
+			gl.deleteProgram(program);
+			return null;
+		}
+		gl.useProgram(program);
+		const buffer = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			3,
+			-1,
+			-1,
+			3
+		]), gl.STATIC_DRAW);
+		const position = gl.getAttribLocation(program, "position");
+		gl.enableVertexAttribArray(position);
+		gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+		return {
+			program,
+			buffer,
+			resolution: gl.getUniformLocation(program, "uResolution"),
+			phase: gl.getUniformLocation(program, "uPhase"),
+			pointer: gl.getUniformLocation(program, "uPointer"),
+			color: gl.getUniformLocation(program, "uColor")
+		};
+	}
+	compile(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)) return shader;
+		if (!gl.isContextLost()) console.error("wr-iridescence shader error:", gl.getShaderInfoLog(shader));
+		gl.deleteShader(shader);
+		return null;
+	}
+	release(gl) {
+		if (this.gpu) {
+			gl.deleteProgram(this.gpu.program);
+			gl.deleteBuffer(this.gpu.buffer);
+		}
+		gl.getExtension("WEBGL_lose_context")?.loseContext();
+		this.gpu = null;
+		this.gl = null;
+	}
+	fit(width, height) {
+		const area = width * height;
+		const scale = area > MAX_PIXELS ? Math.sqrt(MAX_PIXELS / area) : 1;
+		const bitmapWidth = Math.floor(width * scale);
+		const bitmapHeight = Math.floor(height * scale);
+		if (bitmapWidth === this.bitmap.width && bitmapHeight === this.bitmap.height) return false;
+		this.bitmap = {
+			width: bitmapWidth,
+			height: bitmapHeight
+		};
+		this.hasBox.set(bitmapWidth > 0 && bitmapHeight > 0);
+		const canvas = this.canvasRef().nativeElement;
+		canvas.width = bitmapWidth;
+		canvas.height = bitmapHeight;
+		return true;
+	}
+	animate(follow) {
+		const stopPointer = follow ? this.listenToPointer() : null;
+		let last = -1;
+		let stopped = false;
+		this.dirty = true;
+		const tick = (now) => {
+			if (stopped) return;
+			const elapsed = now - last;
+			const step = last < 0 || elapsed <= 0 ? FRAME_MS : Math.min(MAX_FRAME_MS, elapsed);
+			last = now;
+			const turned = this.turn(step);
+			const stirred = this.easePointer(step);
+			if (this.dirty || turned || stirred) this.draw();
+			this.rafId = requestAnimationFrame(tick);
+		};
+		this.rafId = requestAnimationFrame(tick);
+		return () => {
+			stopped = true;
+			cancelAnimationFrame(this.rafId);
+			this.rafId = 0;
+			stopPointer?.();
+		};
+	}
+	turn(step) {
+		const speed = this.speed();
+		if (speed === 0) return false;
+		const seconds = step / 1e3;
+		for (let i = 0; i < RATE.length; i++) this.phase[i] = wrap(this.phase[i] + seconds * RATE[i] * speed);
+		return true;
+	}
+	listenToPointer() {
+		const hostEl = this.host.nativeElement;
+		const root = hostEl.getRootNode();
+		const target = hostEl.parentElement ?? (root instanceof ShadowRoot && root.host instanceof HTMLElement ? root.host : null);
+		const onMove = (event) => {
+			this.lastMove = {
+				x: event.clientX,
+				y: event.clientY
+			};
+		};
+		const onLeave = () => this.aimAtRest();
+		target?.addEventListener("pointermove", onMove, { passive: true });
+		target?.addEventListener("pointerleave", onLeave, { passive: true });
+		target?.addEventListener("pointercancel", onLeave, { passive: true });
+		return () => {
+			target?.removeEventListener("pointermove", onMove);
+			target?.removeEventListener("pointerleave", onLeave);
+			target?.removeEventListener("pointercancel", onLeave);
+			this.aimAtRest();
+		};
+	}
+	aimAtRest() {
+		this.lastMove = null;
+		this.pointer.aimX = 0;
+		this.pointer.aimY = 0;
+	}
+	easePointer(step) {
+		const pointer = this.pointer;
+		if (this.lastMove) {
+			const rect = this.host.nativeElement.getBoundingClientRect();
+			const u = rect.width > 0 ? clamp((this.lastMove.x - rect.left) / rect.width, 0, 1) : .5;
+			const v = rect.height > 0 ? clamp((this.lastMove.y - rect.top) / rect.height, 0, 1) : .5;
+			pointer.aimX = (u - .5) * 2 * REACH;
+			pointer.aimY = (.5 - v) * 2 * REACH;
+			this.lastMove = null;
+		}
+		const amplitude = this.amplitude();
+		const targetX = pointer.aimX * amplitude;
+		const targetY = pointer.aimY * amplitude;
+		if (!Number.isFinite(targetX) || !Number.isFinite(targetY)) return false;
+		if (pointer.x === targetX && pointer.y === targetY) return false;
+		const share = 1 - Math.exp(-step / POINTER_TAU_MS);
+		pointer.x += (targetX - pointer.x) * share;
+		pointer.y += (targetY - pointer.y) * share;
+		if (Math.abs(targetX - pointer.x) < POINTER_EPSILON && Math.abs(targetY - pointer.y) < POINTER_EPSILON) {
+			pointer.x = targetX;
+			pointer.y = targetY;
+		}
+		return true;
+	}
+	repaint(moving) {
+		if (moving) {
+			this.dirty = true;
+			return;
+		}
+		this.aimAtRest();
+		this.pointer.x = 0;
+		this.pointer.y = 0;
+		this.draw();
+	}
+	draw() {
+		const { gl, gpu } = this;
+		const { width, height } = this.bitmap;
+		if (!gl || !gpu || width === 0 || height === 0) return;
+		const [r, g, b] = this.tint();
+		gl.viewport(0, 0, width, height);
+		gl.uniform2f(gpu.resolution, width, height);
+		gl.uniform3f(gpu.phase, this.phase[0], this.phase[1], this.phase[2]);
+		gl.uniform2f(gpu.pointer, this.pointer.x, this.pointer.y);
+		gl.uniform3f(gpu.color, r, g, b);
+		gl.drawArrays(gl.TRIANGLES, 0, 3);
+		this.dirty = false;
+		if (!this.painted()) this.painted.set(true);
+	}
+	tint() {
+		const canvas = this.canvasRef().nativeElement;
+		const resolved = resolveCssColor(canvas, this.expression(), FALLBACK_COLOR);
+		if (resolved !== this.resolved) {
+			this.resolved = resolved;
+			this.channels = resolveCssColorChannels(canvas, resolved, FALLBACK_COLOR);
+		}
+		return this.channels;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WrIridescence,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.4",
+		type: WrIridescence,
+		isStandalone: true,
+		selector: "wr-iridescence",
+		inputs: {
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			speed: {
+				classPropertyName: "speed",
+				publicName: "speed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			amplitude: {
+				classPropertyName: "amplitude",
+				publicName: "amplitude",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			followPointer: {
+				classPropertyName: "followPointer",
+				publicName: "followPointer",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"style.--wr-iridescence-input-color": "standInColor()",
+				"class.wr-iridescence--painted": "painted()"
+			},
+			classAttribute: "wr-iridescence"
+		},
+		viewQueries: [{
+			propertyName: "canvasRef",
+			first: true,
+			predicate: ["canvas"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<canvas #canvas class=\"wr-iridescence__canvas\" aria-hidden=\"true\"></canvas>",
+		isInline: true,
+		styles: [".wr-iridescence{--wr-iridescence-color: light-dark(#ffffff, #5c669e);position:absolute;inset:0;z-index:0;display:block;overflow:hidden;pointer-events:none;background-color:var(--wr-iridescence-input-color, var(--wr-iridescence-color));background-image:linear-gradient(59deg,#e6dcf0 0%,transparent 35%,transparent 65%,#d6d0ea 100%),linear-gradient(329deg,#e9dbef,#c49cd1,#f2e6f3,#b2bcde 48%,#7387b2 60%,#d5c7e7 74%,#c6bce4 86%,#ebddf0);background-blend-mode:multiply}.wr-iridescence__canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity var(--wr-duration-slower) var(--wr-ease-in-out)}.wr-iridescence--painted .wr-iridescence__canvas{opacity:1}@media(prefers-reduced-motion:reduce){.wr-iridescence__canvas{transition:none}}@media(forced-colors:active){.wr-iridescence__canvas{display:none;forced-color-adjust:none}}\n"],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WrIridescence,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wr-iridescence",
+			template: "<canvas #canvas class=\"wr-iridescence__canvas\" aria-hidden=\"true\"></canvas>",
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "wr-iridescence",
+				"[style.--wr-iridescence-input-color]": "standInColor()",
+				"[class.wr-iridescence--painted]": "painted()"
+			},
+			styles: [".wr-iridescence{--wr-iridescence-color: light-dark(#ffffff, #5c669e);position:absolute;inset:0;z-index:0;display:block;overflow:hidden;pointer-events:none;background-color:var(--wr-iridescence-input-color, var(--wr-iridescence-color));background-image:linear-gradient(59deg,#e6dcf0 0%,transparent 35%,transparent 65%,#d6d0ea 100%),linear-gradient(329deg,#e9dbef,#c49cd1,#f2e6f3,#b2bcde 48%,#7387b2 60%,#d5c7e7 74%,#c6bce4 86%,#ebddf0);background-blend-mode:multiply}.wr-iridescence__canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity var(--wr-duration-slower) var(--wr-ease-in-out)}.wr-iridescence--painted .wr-iridescence__canvas{opacity:1}@media(prefers-reduced-motion:reduce){.wr-iridescence__canvas{transition:none}}@media(forced-colors:active){.wr-iridescence__canvas{display:none;forced-color-adjust:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		speed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "speed",
+				required: false
+			}]
+		}],
+		amplitude: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "amplitude",
+				required: false
+			}]
+		}],
+		followPointer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "followPointer",
+				required: false
+			}]
+		}],
+		canvasRef: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}]
+	}
+});
+export { WrIridescence };
+
+//# sourceMappingURL=ngwr-bits-iridescence.mjs.map