@basmilius/sparkle 2.1.0 → 2.3.0

package/dist/index.mjs

@@ -1,141 +1,33 @@
 import { hexToRGB, mulberry32 } from "@basmilius/utils";
-//#region src/layer.ts
-var SimulationLayer = class {
-	fade = null;
-	onResize(_width, _height) {}
-	onMount(_canvas) {}
-	onUnmount(_canvas) {}
-	withFade(fade) {
-		this.fade = fade;
-		return this;
-	}
-};
-//#endregion
-//#region src/aurora/consts.ts
-const MULBERRY$23 = mulberry32(13);
-//#endregion
-//#region src/aurora/layer.ts
-const DEFAULT_COLORS$4 = [
-	"#9922ff",
-	"#4455ff",
-	"#0077ee",
-	"#00aabb",
-	"#22ddff"
-];
-const TOP_HUE = 265;
-var AuroraLayer = class extends SimulationLayer {
-	#speed;
-	#intensity;
-	#waveAmplitude;
-	#verticalPosition;
-	#time = 0;
-	#bands = [];
-	constructor(config = {}) {
-		super();
-		const bandCount = config.bands ?? 5;
-		const colors = config.colors ?? DEFAULT_COLORS$4;
-		this.#speed = config.speed ?? 1;
-		this.#intensity = config.intensity ?? .8;
-		this.#waveAmplitude = config.waveAmplitude ?? 1;
-		this.#verticalPosition = config.verticalPosition ?? .68;
-		const clusterCenters = [.35, .65];
-		for (let i = 0; i < bandCount; i++) {
-			const color = colors[i % colors.length];
-			const [r, g, b] = hexToRGB(color);
-			const hue = this.#rgbToHue(r, g, b);
-			const cluster = clusterCenters[i % clusterCenters.length];
-			this.#bands.push({
-				x: cluster + (MULBERRY$23.next() - .5) * .22,
-				baseY: this.#verticalPosition + (MULBERRY$23.next() - .5) * .08,
-				height: .5 + MULBERRY$23.next() * .3,
-				sigma: 160 + MULBERRY$23.next() * 110,
-				phase1: MULBERRY$23.next() * Math.PI * 2,
-				phase2: MULBERRY$23.next() * Math.PI * 2,
-				amplitude1: .015 + MULBERRY$23.next() * .025,
-				frequency1: .003 + MULBERRY$23.next() * .004,
-				speed: (.4 + MULBERRY$23.next() * .6) * this.#speed,
-				hue,
-				opacity: (.5 + MULBERRY$23.next() * .3) * this.#intensity
-			});
-		}
-	}
-	tick(dt, width, height) {
-		this.#time += .016 * dt * this.#speed;
-		for (const band of this.#bands) {
-			band.phase1 += .005 * band.speed * dt;
-			band.phase2 += .008 * band.speed * dt;
-		}
-	}
-	draw(ctx, width, height) {
-		const bg = ctx.createLinearGradient(0, 0, 0, height);
-		bg.addColorStop(0, "#000000");
-		bg.addColorStop(.5, "#050012");
-		bg.addColorStop(1, "#0a0025");
-		ctx.fillStyle = bg;
-		ctx.fillRect(0, 0, width, height);
-		ctx.globalCompositeOperation = "screen";
-		const step = 4;
-		const scale = width / 1920;
-		for (const band of this.#bands) {
-			const swayX = band.amplitude1 * width * Math.sin(band.phase1);
-			const cx = band.x * width + swayX;
-			const baseY = band.baseY * height;
-			const rayHeight = band.height * height * (height / 800);
-			const sigma = band.sigma * scale;
-			const cutoff = sigma * 3.5;
-			const sigmaSq2 = 2 * sigma * sigma;
-			const midHue = (band.hue + TOP_HUE) / 2;
-			const waveRange = height * .035 * this.#waveAmplitude;
-			const xStart = Math.max(0, Math.floor((cx - cutoff) / step) * step);
-			const xEnd = Math.min(width, Math.ceil((cx + cutoff) / step) * step);
-			for (let x = xStart; x < xEnd; x += step) {
-				const dx = x - cx;
-				const alpha = Math.exp(-dx * dx / sigmaSq2);
-				if (alpha < .015) continue;
-				const colBase = baseY + Math.sin(band.frequency1 * x + band.phase2) * waveRange;
-				const colTop = colBase - rayHeight;
-				const fadeBottom = colBase + rayHeight * .1;
-				const eff = alpha * band.opacity;
-				const gradient = ctx.createLinearGradient(0, fadeBottom, 0, colTop);
-				gradient.addColorStop(0, `hsla(${band.hue}, 100%, 90%, 0)`);
-				gradient.addColorStop(.04, `hsla(${band.hue}, 100%, 90%, ${eff * .55})`);
-				gradient.addColorStop(.1, `hsla(${band.hue}, 90%, 72%, ${eff})`);
-				gradient.addColorStop(.32, `hsla(${band.hue}, 85%, 62%, ${eff * .75})`);
-				gradient.addColorStop(.62, `hsla(${midHue}, 80%, 56%, ${eff * .35})`);
-				gradient.addColorStop(.86, `hsla(${TOP_HUE}, 75%, 50%, ${eff * .12})`);
-				gradient.addColorStop(1, `hsla(${TOP_HUE}, 70%, 45%, 0)`);
-				ctx.fillStyle = gradient;
-				ctx.fillRect(x, colTop, step, fadeBottom - colTop + 1);
-			}
-		}
-		ctx.globalCompositeOperation = "source-over";
-	}
-	#rgbToHue(r, g, b) {
-		r /= 255;
-		g /= 255;
-		b /= 255;
-		const max = Math.max(r, g, b);
-		const delta = max - Math.min(r, g, b);
-		if (delta === 0) return 0;
-		let hue;
-		if (max === r) hue = (g - b) / delta % 6;
-		else if (max === g) hue = (b - r) / delta + 2;
-		else hue = (r - g) / delta + 4;
-		hue = Math.round(hue * 60);
-		if (hue < 0) hue += 360;
-		return hue;
-	}
-};
-//#endregion
 //#region src/canvas.ts
 var LimitedFrameRateCanvas = class LimitedFrameRateCanvas {
 	static #globalSpeed = 1;
+	static #globalFrameRate = null;
+	static #showFps = false;
 	static get globalSpeed() {
 		return LimitedFrameRateCanvas.#globalSpeed;
 	}
 	static set globalSpeed(value) {
 		LimitedFrameRateCanvas.#globalSpeed = value;
 	}
+	/**
+	* Global frame rate override for all canvas instances.
+	* null = use each instance's own frame rate.
+	* 0 = unlimited (render as fast as the browser allows).
+	* Any positive number = cap at that many frames per second.
+	*/
+	static get globalFrameRate() {
+		return LimitedFrameRateCanvas.#globalFrameRate;
+	}
+	static set globalFrameRate(value) {
+		LimitedFrameRateCanvas.#globalFrameRate = value;
+	}
+	static get showFps() {
+		return LimitedFrameRateCanvas.#showFps;
+	}
+	static set showFps(value) {
+		LimitedFrameRateCanvas.#showFps = value;
+	}
 	#canvas;
 	#context;
 	#frameRate;
@@ -150,6 +42,9 @@ var LimitedFrameRateCanvas = class LimitedFrameRateCanvas {
 	#isStopped = true;
 	#height = 540;
 	#width = 960;
+	#fps = "0.0";
+	#fpsFrames = 0;
+	#fpsTime = 0;
 	get canvas() {
 		return this.#canvas;
 	}
@@ -168,6 +63,9 @@ var LimitedFrameRateCanvas = class LimitedFrameRateCanvas {
 	set speed(value) {
 		this.#speed = value;
 	}
+	get dpr() {
+		return devicePixelRatio;
+	}
 	get frameRate() {
 		return this.#frameRate;
 	}
@@ -190,7 +88,7 @@ var LimitedFrameRateCanvas = class LimitedFrameRateCanvas {
 		this.#canvas = canvas;
 		this.#context = canvas.getContext("2d", options);
 		this.#frameRate = frameRate;
-		this.#target = 1e3 / frameRate;
+		this.#target = frameRate > 0 ? 1e3 / frameRate : 0;
 		this.onVisibilityChange = this.onVisibilityChange.bind(this);
 		this.onResize = this.onResize.bind(this);
 		document.addEventListener("visibilitychange", this.onVisibilityChange, { passive: true });
@@ -200,12 +98,27 @@ var LimitedFrameRateCanvas = class LimitedFrameRateCanvas {
 		if (this.#isStopped) return;
 		this.#current = Date.now();
 		this.#frame = requestAnimationFrame(this.loop.bind(this));
-		if (this.#then > 0 && this.#current - this.#then + 1 < this.#target) return;
+		const globalRate = LimitedFrameRateCanvas.#globalFrameRate;
+		const effectiveTarget = globalRate !== null ? globalRate > 0 ? 1e3 / globalRate : 0 : this.#target;
+		if (effectiveTarget > 0 && this.#then > 0 && this.#current - this.#then + 1 < effectiveTarget) return;
 		this.#now = this.#current;
 		this.#delta = this.#now - this.#then;
 		++this.#ticks;
 		this.tick();
 		this.draw();
+		if (LimitedFrameRateCanvas.#showFps) {
+			++this.#fpsFrames;
+			if (this.#fpsTime === 0) this.#fpsTime = this.#current;
+			else {
+				const elapsed = this.#current - this.#fpsTime;
+				if (elapsed >= 1e3) {
+					this.#fps = (Math.round(this.#fpsFrames * 1e4 / elapsed) / 10).toFixed(1);
+					this.#fpsFrames = 0;
+					this.#fpsTime = this.#current;
+				}
+			}
+			this.#drawFps();
+		}
 		this.#then = this.#now;
 	}
 	start() {
@@ -217,6 +130,36 @@ var LimitedFrameRateCanvas = class LimitedFrameRateCanvas {
 		this.#isStopped = true;
 		cancelAnimationFrame(this.#frame);
 	}
+	pause() {
+		this.#isStopped = true;
+		cancelAnimationFrame(this.#frame);
+	}
+	resume() {
+		if (this.#isStopped) {
+			this.#isStopped = false;
+			this.#frame = requestAnimationFrame(this.loop.bind(this));
+		}
+	}
+	#drawFps() {
+		const ctx = this.#context;
+		const text = `${this.#fps} FPS`;
+		const x = 9;
+		const y = 9;
+		const paddingX = 6;
+		const paddingY = 4;
+		ctx.save();
+		ctx.font = "700 10px ui-monospace, monospace";
+		const boxWidth = ctx.measureText(text).width + paddingX * 2;
+		const boxHeight = 11 + paddingY * 2;
+		ctx.fillStyle = "rgba(0, 0, 0, 0.45)";
+		ctx.beginPath();
+		ctx.roundRect(x, y, boxWidth, boxHeight, 3);
+		ctx.fill();
+		ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
+		ctx.textBaseline = "middle";
+		ctx.fillText(text, x + paddingX, y + boxHeight / 1.9);
+		ctx.restore();
+	}
 	draw() {
 		throw new Error("LimitedFrameRateCanvas::draw() should be overwritten.");
 	}
@@ -245,18 +188,99 @@ var LimitedFrameRateCanvas = class LimitedFrameRateCanvas {
 	}
 };
 //#endregion
+//#region src/fade.ts
+function parseSide(side) {
+	return typeof side === "number" ? [0, side] : side;
+}
+function applyEdgeFade(ctx, width, height, fade) {
+	ctx.globalCompositeOperation = "destination-out";
+	if (fade.top !== void 0) {
+		const [near, far] = parseSide(fade.top);
+		const nearPx = near * height;
+		const farPx = far * height;
+		if (nearPx > 0) {
+			ctx.fillStyle = "rgba(0,0,0,1)";
+			ctx.fillRect(0, 0, width, nearPx);
+		}
+		if (farPx > nearPx) {
+			const gradient = ctx.createLinearGradient(0, nearPx, 0, farPx);
+			gradient.addColorStop(0, "rgba(0,0,0,1)");
+			gradient.addColorStop(1, "rgba(0,0,0,0)");
+			ctx.fillStyle = gradient;
+			ctx.fillRect(0, nearPx, width, farPx - nearPx);
+		}
+	}
+	if (fade.bottom !== void 0) {
+		const [near, far] = parseSide(fade.bottom);
+		const nearPx = near * height;
+		const farPx = far * height;
+		if (nearPx > 0) {
+			ctx.fillStyle = "rgba(0,0,0,1)";
+			ctx.fillRect(0, height - nearPx, width, nearPx);
+		}
+		if (farPx > nearPx) {
+			const gradient = ctx.createLinearGradient(0, height - farPx, 0, height - nearPx);
+			gradient.addColorStop(0, "rgba(0,0,0,0)");
+			gradient.addColorStop(1, "rgba(0,0,0,1)");
+			ctx.fillStyle = gradient;
+			ctx.fillRect(0, height - farPx, width, farPx - nearPx);
+		}
+	}
+	if (fade.left !== void 0) {
+		const [near, far] = parseSide(fade.left);
+		const nearPx = near * width;
+		const farPx = far * width;
+		if (nearPx > 0) {
+			ctx.fillStyle = "rgba(0,0,0,1)";
+			ctx.fillRect(0, 0, nearPx, height);
+		}
+		if (farPx > nearPx) {
+			const gradient = ctx.createLinearGradient(nearPx, 0, farPx, 0);
+			gradient.addColorStop(0, "rgba(0,0,0,1)");
+			gradient.addColorStop(1, "rgba(0,0,0,0)");
+			ctx.fillStyle = gradient;
+			ctx.fillRect(nearPx, 0, farPx - nearPx, height);
+		}
+	}
+	if (fade.right !== void 0) {
+		const [near, far] = parseSide(fade.right);
+		const nearPx = near * width;
+		const farPx = far * width;
+		if (nearPx > 0) {
+			ctx.fillStyle = "rgba(0,0,0,1)";
+			ctx.fillRect(width - nearPx, 0, nearPx, height);
+		}
+		if (farPx > nearPx) {
+			const gradient = ctx.createLinearGradient(width - farPx, 0, width - nearPx, 0);
+			gradient.addColorStop(0, "rgba(0,0,0,0)");
+			gradient.addColorStop(1, "rgba(0,0,0,1)");
+			ctx.fillStyle = gradient;
+			ctx.fillRect(width - farPx, 0, farPx - nearPx, height);
+		}
+	}
+	ctx.globalCompositeOperation = "source-over";
+}
+//#endregion
 //#region src/simulation-canvas.ts
 var SimulationCanvas = class extends LimitedFrameRateCanvas {
 	#simulation;
+	#contextOptions;
+	#offscreen = null;
+	#offscreenCtx = null;
 	constructor(canvas, simulation, frameRate = 60, options = { colorSpace: "display-p3" }) {
 		super(canvas, frameRate, options);
 		this.#simulation = simulation;
+		this.#contextOptions = options;
 		canvas.style.position = "absolute";
 		canvas.style.top = "0";
 		canvas.style.left = "0";
 		canvas.style.height = "100%";
 		canvas.style.width = "100%";
 	}
+	withFade(fade) {
+		this.#simulation.fade = fade;
+		return this;
+	}
 	start() {
 		this.#simulation.onMount(this.canvas);
 		super.start();
@@ -266,12 +290,23 @@ var SimulationCanvas = class extends LimitedFrameRateCanvas {
 		super.destroy();
 	}
 	draw() {
-		this.canvas.height = this.height;
-		this.canvas.width = this.width;
+		const dpr = this.dpr;
+		this.canvas.height = this.height * dpr;
+		this.canvas.width = this.width * dpr;
 		const ctx = this.context;
-		ctx.save();
-		this.#simulation.draw(ctx, this.width, this.height);
-		ctx.restore();
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		if (this.#simulation.fade) {
+			const offCtx = this.#getOffscreenCtx(this.width * dpr, this.height * dpr);
+			offCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+			offCtx.clearRect(0, 0, this.width, this.height);
+			this.#simulation.draw(offCtx, this.width, this.height);
+			applyEdgeFade(offCtx, this.width, this.height, this.#simulation.fade);
+			ctx.drawImage(this.#offscreen, 0, 0, this.width, this.height);
+		} else {
+			ctx.save();
+			this.#simulation.draw(ctx, this.width, this.height);
+			ctx.restore();
+		}
 	}
 	tick() {
 		const dt = (this.delta > 0 && this.delta < 200 ? this.delta / (1e3 / 60) : 1) * this.speed * LimitedFrameRateCanvas.globalSpeed;
@@ -279,32 +314,230 @@ var SimulationCanvas = class extends LimitedFrameRateCanvas {
 	}
 	onResize() {
 		super.onResize();
+		if (this.#offscreen) {
+			this.#offscreen.width = this.width * this.dpr;
+			this.#offscreen.height = this.height * this.dpr;
+		}
 		this.#simulation.onResize(this.width, this.height);
 	}
+	#getOffscreenCtx(width, height) {
+		if (!this.#offscreen) {
+			this.#offscreen = document.createElement("canvas");
+			this.#offscreen.width = width;
+			this.#offscreen.height = height;
+			this.#offscreenCtx = this.#offscreen.getContext("2d", this.#contextOptions);
+		}
+		return this.#offscreenCtx;
+	}
 };
 //#endregion
-//#region src/aurora/simulation.ts
-var AuroraSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new AuroraLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
+//#region src/effect.ts
+/**
+* Base class for all visual effects. Implements the internal SimulationLayer interface
+* so that effects can be used both standalone (via mount()) and composed in a Scene.
+*
+* @example Standalone usage
+* const snow = new Snow({ particles: 200 });
+* snow.mount(canvas).start();
+*
+* @example Scene composition
+* const scene = new Scene()
+*     .mount(canvas)
+*     .layer(new Aurora())
+*     .layer(new Snow())
+*     .start();
+*/
+var Effect = class {
+	#canvas = null;
+	fade = null;
+	configure(_config) {}
+	onResize(_width, _height) {}
+	onMount(_canvas) {}
+	onUnmount(_canvas) {}
+	/**
+	* Apply an edge fade mask when rendering this effect standalone or in a Scene.
+	*/
+	withFade(fade) {
+		this.fade = fade;
+		return this;
+	}
+	/**
+	* Mount this effect to a canvas element or CSS selector, creating the render loop.
+	* Must be called before start().
+	*/
+	mount(canvas, options = { colorSpace: "display-p3" }, frameRate = 60) {
+		if (typeof canvas === "string") {
+			const el = document.querySelector(canvas);
+			if (!el) throw new Error(`Effect.mount(): no element found for selector "${canvas}".`);
+			canvas = el;
+		}
+		this.#canvas = new SimulationCanvas(canvas, this, frameRate, options);
+		return this;
+	}
+	/**
+	* Remove this effect from its canvas and clean up the render loop.
+	*/
+	unmount() {
+		this.#canvas?.destroy();
+		this.#canvas = null;
+		return this;
+	}
+	/**
+	* Start the render loop. Call mount() first.
+	*/
+	start() {
+		this.#canvas?.start();
+		return this;
+	}
+	/**
+	* Pause rendering without destroying state. Use resume() to continue.
+	*/
+	pause() {
+		this.#canvas?.pause();
+		return this;
+	}
+	/**
+	* Resume rendering after a pause().
+	*/
+	resume() {
+		this.#canvas?.resume();
+		return this;
+	}
+	/**
+	* Stop rendering and call onUnmount(). Safe to call multiple times.
+	*/
+	destroy() {
+		this.unmount();
 	}
 };
 //#endregion
-//#region src/color.ts
-function parseColor(fillStyle) {
-	const canvas = document.createElement("canvas");
-	canvas.width = 1;
-	canvas.height = 1;
-	const ctx = canvas.getContext("2d");
-	ctx.fillStyle = fillStyle;
-	ctx.fillRect(0, 0, 1, 1);
-	const data = ctx.getImageData(0, 0, 1, 1).data;
-	return {
-		r: data[0],
-		g: data[1],
-		b: data[2],
-		a: data[3] / 255
-	};
+//#region src/aurora/consts.ts
+const MULBERRY$23 = mulberry32(13);
+//#endregion
+//#region src/aurora/layer.ts
+const DEFAULT_COLORS$4 = [
+	"#9922ff",
+	"#4455ff",
+	"#0077ee",
+	"#00aabb",
+	"#22ddff"
+];
+const TOP_HUE = 265;
+var Aurora = class extends Effect {
+	#speed;
+	#intensity;
+	#waveAmplitude;
+	#verticalPosition;
+	#bands = [];
+	constructor(config = {}) {
+		super();
+		const bandCount = config.bands ?? 5;
+		const colors = config.colors ?? DEFAULT_COLORS$4;
+		this.#speed = config.speed ?? 1;
+		this.#intensity = config.intensity ?? .8;
+		this.#waveAmplitude = config.waveAmplitude ?? 1;
+		this.#verticalPosition = config.verticalPosition ?? .68;
+		const clusterCenters = [.35, .65];
+		for (let i = 0; i < bandCount; i++) {
+			const color = colors[i % colors.length];
+			const [r, g, b] = hexToRGB(color);
+			const hue = this.#rgbToHue(r, g, b);
+			const cluster = clusterCenters[i % clusterCenters.length];
+			this.#bands.push({
+				x: cluster + (MULBERRY$23.next() - .5) * .22,
+				baseY: (MULBERRY$23.next() - .5) * .08,
+				height: .5 + MULBERRY$23.next() * .3,
+				sigma: 160 + MULBERRY$23.next() * 110,
+				phase1: MULBERRY$23.next() * Math.PI * 2,
+				phase2: MULBERRY$23.next() * Math.PI * 2,
+				amplitude1: .015 + MULBERRY$23.next() * .025,
+				frequency1: .003 + MULBERRY$23.next() * .004,
+				speed: .4 + MULBERRY$23.next() * .6,
+				hue,
+				opacity: .5 + MULBERRY$23.next() * .3
+			});
+		}
+	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.intensity !== void 0) this.#intensity = config.intensity;
+		if (config.waveAmplitude !== void 0) this.#waveAmplitude = config.waveAmplitude;
+		if (config.verticalPosition !== void 0) this.#verticalPosition = config.verticalPosition;
+	}
+	tick(dt, _width, _height) {
+		for (const band of this.#bands) {
+			band.phase1 += .005 * band.speed * this.#speed * dt;
+			band.phase2 += .008 * band.speed * this.#speed * dt;
+		}
+	}
+	draw(ctx, width, height) {
+		const bg = ctx.createLinearGradient(0, 0, 0, height);
+		bg.addColorStop(0, "#000000");
+		bg.addColorStop(.5, "#050012");
+		bg.addColorStop(1, "#0a0025");
+		ctx.fillStyle = bg;
+		ctx.fillRect(0, 0, width, height);
+		ctx.globalCompositeOperation = "screen";
+		const step = 4;
+		const scale = width / 1920;
+		for (const band of this.#bands) {
+			const swayX = band.amplitude1 * width * Math.sin(band.phase1);
+			const cx = band.x * width + swayX;
+			const baseY = (this.#verticalPosition + band.baseY) * height;
+			const rayHeight = band.height * height * (height / 800);
+			const sigma = band.sigma * scale;
+			const cutoff = sigma * 3.5;
+			const sigmaSq2 = 2 * sigma * sigma;
+			const midHue = (band.hue + TOP_HUE) / 2;
+			const waveRange = height * .035 * this.#waveAmplitude;
+			const xStart = Math.max(0, Math.floor((cx - cutoff) / step) * step);
+			const xEnd = Math.min(width, Math.ceil((cx + cutoff) / step) * step);
+			const centreBase = baseY + Math.sin(band.frequency1 * cx + band.phase2) * waveRange;
+			const centreTop = centreBase - rayHeight;
+			const centreFadeBottom = centreBase + rayHeight * .1;
+			const gradient = ctx.createLinearGradient(0, centreFadeBottom, 0, centreTop);
+			gradient.addColorStop(0, `hsla(${band.hue}, 100%, 90%, 0)`);
+			gradient.addColorStop(.04, `hsla(${band.hue}, 100%, 90%, 0.55)`);
+			gradient.addColorStop(.1, `hsla(${band.hue}, 90%, 72%, 1)`);
+			gradient.addColorStop(.32, `hsla(${band.hue}, 85%, 62%, 0.75)`);
+			gradient.addColorStop(.62, `hsla(${midHue}, 80%, 56%, 0.35)`);
+			gradient.addColorStop(.86, `hsla(${TOP_HUE}, 75%, 50%, 0.12)`);
+			gradient.addColorStop(1, `hsla(${TOP_HUE}, 70%, 45%, 0)`);
+			ctx.fillStyle = gradient;
+			for (let x = xStart; x < xEnd; x += step) {
+				const dx = x - cx;
+				const alpha = Math.exp(-dx * dx / sigmaSq2);
+				if (alpha < .015) continue;
+				const colBase = baseY + Math.sin(band.frequency1 * x + band.phase2) * waveRange;
+				const colTop = colBase - rayHeight;
+				const fadeBottom = colBase + rayHeight * .1;
+				ctx.globalAlpha = alpha * band.opacity * this.#intensity;
+				ctx.fillRect(x, colTop, step, fadeBottom - colTop + 1);
+			}
+			ctx.globalAlpha = 1;
+		}
+		ctx.globalCompositeOperation = "source-over";
+	}
+	#rgbToHue(r, g, b) {
+		r /= 255;
+		g /= 255;
+		b /= 255;
+		const max = Math.max(r, g, b);
+		const delta = max - Math.min(r, g, b);
+		if (delta === 0) return 0;
+		let hue;
+		if (max === r) hue = (g - b) / delta % 6;
+		else if (max === g) hue = (b - r) / delta + 2;
+		else hue = (r - g) / delta + 4;
+		hue = Math.round(hue * 60);
+		if (hue < 0) hue += 360;
+		return hue;
+	}
+};
+//#endregion
+//#region src/aurora/index.ts
+function createAurora(config) {
+	return new Aurora(config);
 }
 //#endregion
 //#region src/balloons/consts.ts
@@ -319,7 +552,7 @@ const DEFAULT_COLORS$3 = [
 	"#ff88cc",
 	"#8844ff"
 ];
-var BalloonLayer = class extends SimulationLayer {
+var Balloons = class extends Effect {
 	#scale;
 	#speed;
 	#driftAmount;
@@ -341,6 +574,11 @@ var BalloonLayer = class extends SimulationLayer {
 		if (innerWidth < 991) this.#maxCount = Math.floor(this.#maxCount / 2);
 		for (let i = 0; i < this.#maxCount; ++i) this.#balloons.push(this.#createBalloon(true));
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.driftAmount !== void 0) this.#driftAmount = config.driftAmount;
+		if (config.stringLength !== void 0) this.#stringLengthMul = config.stringLength;
+	}
 	tick(dt, width, height) {
 		this.#time += .015 * dt * this.#speed;
 		for (let i = 0; i < this.#balloons.length; i++) {
@@ -359,9 +597,9 @@ var BalloonLayer = class extends SimulationLayer {
 			const rx = balloon.radiusX * this.#scale;
 			const ry = balloon.radiusY * this.#scale;
 			const [r, g, b] = balloon.color;
-			ctx.save();
-			ctx.translate(px, py);
-			ctx.rotate(balloon.rotation);
+			const cos = Math.cos(balloon.rotation);
+			const sin = Math.sin(balloon.rotation);
+			ctx.setTransform(cos, sin, -sin, cos, px, py);
 			const gradient = ctx.createRadialGradient(-rx * .3, -ry * .3, rx * .1, 0, 0, Math.max(rx, ry));
 			gradient.addColorStop(0, `rgba(${Math.min(255, r + 80)}, ${Math.min(255, g + 80)}, ${Math.min(255, b + 80)}, 0.95)`);
 			gradient.addColorStop(.6, `rgba(${r}, ${g}, ${b}, 0.9)`);
@@ -383,15 +621,21 @@ var BalloonLayer = class extends SimulationLayer {
 			ctx.fillStyle = `rgba(${Math.max(0, r - 30)}, ${Math.max(0, g - 30)}, ${Math.max(0, b - 30)}, 0.9)`;
 			ctx.fill();
 			const stringLen = balloon.stringLength * this.#scale * this.#stringLengthMul;
-			const drift = Math.sin(this.#time * 2 + balloon.driftPhase) * 8 * this.#scale * this.#driftAmount;
+			const knotBaseY = knotY + 5 * this.#scale;
+			const ph = balloon.driftPhase;
+			const fr = balloon.driftFreq;
+			const swingAmt = 10 * this.#scale * this.#driftAmount;
+			const midSwing = Math.sin(this.#time * fr + ph - .3) * swingAmt * .55;
+			const tipSwing = Math.sin(this.#time * fr + ph - .8) * swingAmt;
+			const flutter = Math.sin(this.#time * fr * 2.5 + ph * 1.4 + 1.8) * 2.5 * this.#scale;
 			ctx.beginPath();
-			ctx.moveTo(0, knotY + 5 * this.#scale);
-			ctx.quadraticCurveTo(drift, knotY + 5 * this.#scale + stringLen * .5, -drift * .5, knotY + 5 * this.#scale + stringLen);
+			ctx.moveTo(0, knotBaseY);
+			ctx.bezierCurveTo(midSwing * .35, knotBaseY + stringLen * .3, midSwing + flutter * .5, knotBaseY + stringLen * .65, tipSwing + flutter, knotBaseY + stringLen);
 			ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, 0.4)`;
 			ctx.lineWidth = 1;
 			ctx.stroke();
-			ctx.restore();
 		}
+		ctx.resetTransform();
 	}
 	#createBalloon(initialSpread) {
 		const colorIndex = Math.floor(MULBERRY$22.next() * this.#colorRGBs.length);
@@ -496,12 +740,32 @@ var BalloonParticle = class {
 	}
 };
 //#endregion
-//#region src/balloons/simulation.ts
-var BalloonSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new BalloonLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/balloons/index.ts
+function createBalloons(config) {
+	return new Balloons(config);
+}
+//#endregion
+//#region src/color.ts
+const cache = /* @__PURE__ */ new Map();
+function parseColor(fillStyle) {
+	const cached = cache.get(fillStyle);
+	if (cached) return cached;
+	const canvas = document.createElement("canvas");
+	canvas.width = 1;
+	canvas.height = 1;
+	const ctx = canvas.getContext("2d");
+	ctx.fillStyle = fillStyle;
+	ctx.fillRect(0, 0, 1, 1);
+	const data = ctx.getImageData(0, 0, 1, 1).data;
+	const result = {
+		r: data[0],
+		g: data[1],
+		b: data[2],
+		a: data[3] / 255
+	};
+	cache.set(fillStyle, result);
+	return result;
+}
 //#endregion
 //#region src/bubbles/consts.ts
 const MULBERRY$21 = mulberry32(13);
@@ -512,7 +776,7 @@ const DEFAULT_COLORS$2 = [
 	"#aaddff",
 	"#ccbbff"
 ];
-var BubbleLayer = class extends SimulationLayer {
+var Bubbles = class extends Effect {
 	#scale;
 	#speed;
 	#sizeRange;
@@ -548,6 +812,10 @@ var BubbleLayer = class extends SimulationLayer {
 		canvas.removeEventListener("click", this.#onClickBound);
 		this.#canvas = null;
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.wobbleAmount !== void 0) this.#wobbleAmount = config.wobbleAmount;
+	}
 	tick(dt, width, height) {
 		this.#time += .01 * dt;
 		for (let i = 0; i < this.#bubbles.length; i++) {
@@ -646,16 +914,10 @@ var BubbleLayer = class extends SimulationLayer {
 		}
 	}
 	#colorToHue(color) {
-		const canvas = document.createElement("canvas");
-		canvas.width = 1;
-		canvas.height = 1;
-		const ctx = canvas.getContext("2d");
-		ctx.fillStyle = color;
-		ctx.fillRect(0, 0, 1, 1);
-		const data = ctx.getImageData(0, 0, 1, 1).data;
-		let r = data[0] / 255;
-		let g = data[1] / 255;
-		let b = data[2] / 255;
+		const { r: r255, g: g255, b: b255 } = parseColor(color);
+		let r = r255 / 255;
+		let g = g255 / 255;
+		let b = b255 / 255;
 		const max = Math.max(r, g, b);
 		const delta = max - Math.min(r, g, b);
 		if (delta === 0) return 0;
@@ -669,12 +931,10 @@ var BubbleLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/bubbles/simulation.ts
-var BubbleSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new BubbleLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/bubbles/index.ts
+function createBubbles(config) {
+	return new Bubbles(config);
+}
 //#endregion
 //#region src/confetti/consts.ts
 const PALETTES = {
@@ -744,101 +1004,85 @@ const MULBERRY$20 = mulberry32(13);
 //#endregion
 //#region src/confetti/shapes.ts
 const TWO_PI$1 = Math.PI * 2;
-const SHAPE_PATHS = {
-	bowtie: (() => {
-		const path = new Path2D();
-		path.moveTo(-1, -.7);
-		path.lineTo(0, 0);
-		path.lineTo(-1, .7);
-		path.closePath();
-		path.moveTo(1, -.7);
-		path.lineTo(0, 0);
-		path.lineTo(1, .7);
-		path.closePath();
-		return path;
-	})(),
-	circle: (() => {
-		const path = new Path2D();
-		path.ellipse(0, 0, .6, 1, 0, 0, TWO_PI$1);
-		return path;
-	})(),
-	crescent: (() => {
-		const path = new Path2D();
-		path.arc(0, 0, 1, 0, TWO_PI$1, false);
-		path.arc(.45, 0, .9, 0, TWO_PI$1, true);
-		return path;
-	})(),
-	diamond: (() => {
-		const path = new Path2D();
-		path.moveTo(0, -1);
-		path.lineTo(.6, 0);
-		path.lineTo(0, 1);
-		path.lineTo(-.6, 0);
-		path.closePath();
-		return path;
-	})(),
-	heart: (() => {
-		const path = new Path2D();
-		path.moveTo(0, 1);
-		path.bezierCurveTo(-.4, .55, -1, .1, -1, -.35);
-		path.bezierCurveTo(-1, -.8, -.5, -1, 0, -.6);
-		path.bezierCurveTo(.5, -1, 1, -.8, 1, -.35);
-		path.bezierCurveTo(1, .1, .4, .55, 0, 1);
-		path.closePath();
-		return path;
-	})(),
-	hexagon: (() => {
-		const path = new Path2D();
-		for (let i = 0; i < 6; i++) {
-			const angle = i * Math.PI / 3 - Math.PI / 2;
-			if (i === 0) path.moveTo(Math.cos(angle), Math.sin(angle));
-			else path.lineTo(Math.cos(angle), Math.sin(angle));
-		}
-		path.closePath();
-		return path;
-	})(),
-	ribbon: (() => {
-		const path = new Path2D();
-		path.rect(-.2, -1, .4, 2);
-		return path;
-	})(),
-	ring: (() => {
-		const path = new Path2D();
-		path.arc(0, 0, 1, 0, TWO_PI$1, false);
-		path.arc(0, 0, .55, 0, TWO_PI$1, true);
-		return path;
-	})(),
-	square: (() => {
-		const path = new Path2D();
-		path.rect(-.7, -.7, 1.4, 1.4);
-		return path;
-	})(),
-	star: (() => {
-		const path = new Path2D();
-		for (let i = 0; i < 10; i++) {
-			const r = i % 2 === 0 ? 1 : .42;
-			const angle = i * Math.PI / 5 - Math.PI / 2;
-			if (i === 0) path.moveTo(r * Math.cos(angle), r * Math.sin(angle));
-			else path.lineTo(r * Math.cos(angle), r * Math.sin(angle));
-		}
-		path.closePath();
-		return path;
-	})(),
-	triangle: (() => {
-		const path = new Path2D();
-		for (let i = 0; i < 3; i++) {
-			const angle = i * 2 * Math.PI / 3 - Math.PI / 2;
-			if (i === 0) path.moveTo(Math.cos(angle), Math.sin(angle));
-			else path.lineTo(Math.cos(angle), Math.sin(angle));
-		}
-		path.closePath();
-		return path;
-	})()
-};
+function buildShapePaths() {
+	const bowtie = new Path2D();
+	bowtie.moveTo(-1, -.7);
+	bowtie.lineTo(0, 0);
+	bowtie.lineTo(-1, .7);
+	bowtie.closePath();
+	bowtie.moveTo(1, -.7);
+	bowtie.lineTo(0, 0);
+	bowtie.lineTo(1, .7);
+	bowtie.closePath();
+	const circle = new Path2D();
+	circle.ellipse(0, 0, .6, 1, 0, 0, TWO_PI$1);
+	const crescent = new Path2D();
+	crescent.arc(0, 0, 1, 0, TWO_PI$1, false);
+	crescent.arc(.45, 0, .9, 0, TWO_PI$1, true);
+	const diamond = new Path2D();
+	diamond.moveTo(0, -1);
+	diamond.lineTo(.6, 0);
+	diamond.lineTo(0, 1);
+	diamond.lineTo(-.6, 0);
+	diamond.closePath();
+	const heart = new Path2D();
+	heart.moveTo(0, 1);
+	heart.bezierCurveTo(-.4, .55, -1, .1, -1, -.35);
+	heart.bezierCurveTo(-1, -.8, -.5, -1, 0, -.6);
+	heart.bezierCurveTo(.5, -1, 1, -.8, 1, -.35);
+	heart.bezierCurveTo(1, .1, .4, .55, 0, 1);
+	heart.closePath();
+	const hexagon = new Path2D();
+	for (let i = 0; i < 6; i++) {
+		const angle = i * Math.PI / 3 - Math.PI / 2;
+		if (i === 0) hexagon.moveTo(Math.cos(angle), Math.sin(angle));
+		else hexagon.lineTo(Math.cos(angle), Math.sin(angle));
+	}
+	hexagon.closePath();
+	const ribbon = new Path2D();
+	ribbon.rect(-.2, -1, .4, 2);
+	const ring = new Path2D();
+	ring.arc(0, 0, 1, 0, TWO_PI$1, false);
+	ring.arc(0, 0, .55, 0, TWO_PI$1, true);
+	const square = new Path2D();
+	square.rect(-.7, -.7, 1.4, 1.4);
+	const star = new Path2D();
+	for (let i = 0; i < 10; i++) {
+		const r = i % 2 === 0 ? 1 : .42;
+		const angle = i * Math.PI / 5 - Math.PI / 2;
+		if (i === 0) star.moveTo(r * Math.cos(angle), r * Math.sin(angle));
+		else star.lineTo(r * Math.cos(angle), r * Math.sin(angle));
+	}
+	star.closePath();
+	const triangle = new Path2D();
+	for (let i = 0; i < 3; i++) {
+		const angle = i * 2 * Math.PI / 3 - Math.PI / 2;
+		if (i === 0) triangle.moveTo(Math.cos(angle), Math.sin(angle));
+		else triangle.lineTo(Math.cos(angle), Math.sin(angle));
+	}
+	triangle.closePath();
+	return {
+		bowtie,
+		circle,
+		crescent,
+		diamond,
+		heart,
+		hexagon,
+		ribbon,
+		ring,
+		square,
+		star,
+		triangle
+	};
+}
+let _shapePaths = null;
+const SHAPE_PATHS = new Proxy({}, { get(_, key) {
+	return (_shapePaths ??= buildShapePaths())[key];
+} });
 //#endregion
 //#region src/confetti/layer.ts
 const TWO_PI = Math.PI * 2;
-var ConfettiLayer = class extends SimulationLayer {
+var Confetti = class extends Effect {
 	#scale;
 	#particles = [];
 	#width = 0;
@@ -852,7 +1096,7 @@ var ConfettiLayer = class extends SimulationLayer {
 		this.#width = width;
 		this.#height = height;
 	}
-	fire(config) {
+	burst(config) {
 		const width = this.#width;
 		const height = this.#height;
 		const resolved = {
@@ -987,28 +1231,28 @@ var ConfettiParticle = class {
 		const scale = config.scale ?? 1;
 		const spread = config.spread ?? 45;
 		const startVelocity = (config.startVelocity ?? 45) * scale;
-		const launchAngle = -(direction * Math.PI / 180) + .5 * spread * Math.PI / 180 - Math.random() * spread * Math.PI / 180;
-		const speed = startVelocity * (.5 + Math.random());
-		const rotAngle = Math.random() * Math.PI * 2;
+		const launchAngle = -(direction * Math.PI / 180) + .5 * spread * Math.PI / 180 - MULBERRY$20.next() * spread * Math.PI / 180;
+		const speed = startVelocity * (.5 + MULBERRY$20.next());
+		const rotAngle = MULBERRY$20.next() * Math.PI * 2;
 		this.#colorStr = color;
 		this.#gravity = (config.gravity ?? 1) * scale;
 		this.#shape = shape;
-		this.#size = (5 + Math.random() * 5) * scale;
+		this.#size = (5 + MULBERRY$20.next() * 5) * scale;
 		this.#totalTicks = config.ticks ?? 200;
 		this.#x = position.x;
 		this.#y = position.y;
 		this.#vx = Math.cos(launchAngle) * speed;
 		this.#vy = Math.sin(launchAngle) * speed;
-		this.#decay = (config.decay ?? .9) - .05 + Math.random() * .1;
-		this.#flipAngle = Math.random() * Math.PI * 2;
-		this.#flipSpeed = .03 + Math.random() * .05;
+		this.#decay = (config.decay ?? .9) - .05 + MULBERRY$20.next() * .1;
+		this.#flipAngle = MULBERRY$20.next() * Math.PI * 2;
+		this.#flipSpeed = .03 + MULBERRY$20.next() * .05;
 		this.#rotAngle = rotAngle;
 		this.#rotCos = Math.cos(rotAngle);
 		this.#rotSin = Math.sin(rotAngle);
-		this.#rotSpeed = (Math.random() - .5) * .06;
-		this.#swing = Math.random() * Math.PI * 2;
-		this.#swingAmp = .5 + Math.random() * 1.5;
-		this.#swingSpeed = .025 + Math.random() * .035;
+		this.#rotSpeed = (MULBERRY$20.next() - .5) * .06;
+		this.#swing = MULBERRY$20.next() * Math.PI * 2;
+		this.#swingAmp = .5 + MULBERRY$20.next() * 1.5;
+		this.#swingSpeed = .025 + MULBERRY$20.next() * .035;
 	}
 	draw(ctx) {
 		ctx.save();
@@ -1034,20 +1278,10 @@ var ConfettiParticle = class {
 	}
 };
 //#endregion
-//#region src/confetti/simulation.ts
-var ConfettiSimulation = class extends SimulationCanvas {
-	#layer;
-	constructor(canvas, config = {}) {
-		const layer = new ConfettiLayer(config);
-		super(canvas, layer, 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-		this.#layer = layer;
-	}
-	fire(config) {
-		this.onResize();
-		this.#layer.fire(config);
-		if (!this.isTicking) this.start();
-	}
-};
+//#region src/confetti/index.ts
+function createConfetti(config) {
+	return new Confetti(config);
+}
 //#endregion
 //#region src/donuts/consts.ts
 const MULBERRY$19 = mulberry32(13);
@@ -1067,7 +1301,7 @@ const DEFAULT_CONFIG = {
 };
 //#endregion
 //#region src/donuts/layer.ts
-var DonutLayer = class extends SimulationLayer {
+var Donuts = class extends Effect {
 	#background;
 	#collisionPadding;
 	#colors;
@@ -1128,6 +1362,12 @@ var DonutLayer = class extends SimulationLayer {
 		canvas.removeEventListener("mousemove", this.#onMouseMoveBound);
 		canvas.removeEventListener("mouseleave", this.#onMouseLeaveBound);
 	}
+	configure(config) {
+		if (config.mouseAvoidance !== void 0) this.#mouseAvoidance = config.mouseAvoidance;
+		if (config.mouseAvoidanceRadius !== void 0) this.#mouseAvoidanceRadius = config.mouseAvoidanceRadius;
+		if (config.mouseAvoidanceStrength !== void 0) this.#mouseAvoidanceStrength = config.mouseAvoidanceStrength;
+		if (config.repulsionStrength !== void 0) this.#repulsionStrength = config.repulsionStrength;
+	}
 	tick(dt, width, height) {
 		this.#width = width;
 		this.#height = height;
@@ -1140,17 +1380,17 @@ var DonutLayer = class extends SimulationLayer {
 		ctx.fillStyle = this.#background;
 		ctx.fillRect(0, 0, width, height);
 		for (const donut of this.#donuts) {
-			ctx.save();
-			ctx.translate(donut.x, donut.y);
-			ctx.rotate(donut.angle);
+			const cos = Math.cos(donut.angle);
+			const sin = Math.sin(donut.angle);
+			ctx.setTransform(cos, sin, -sin, cos, donut.x, donut.y);
 			ctx.beginPath();
 			ctx.arc(0, 0, donut.outerRadius, 0, Math.PI * 2);
 			ctx.arc(0, 0, donut.innerRadius, 0, Math.PI * 2, true);
 			ctx.closePath();
 			ctx.fillStyle = donut.color;
 			ctx.fill();
-			ctx.restore();
 		}
+		ctx.resetTransform();
 	}
 	#updateDonut(donut, dt) {
 		if (Math.sqrt(donut.vx * donut.vx + donut.vy * donut.vy) > donut.speed) {
@@ -1270,12 +1510,10 @@ var DonutLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/donuts/simulation.ts
-var DonutSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new DonutLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/donuts/index.ts
+function createDonuts(config) {
+	return new Donuts(config);
+}
 //#endregion
 //#region src/fireflies/consts.ts
 const MULBERRY$18 = mulberry32(13);
@@ -1284,7 +1522,7 @@ const MULBERRY$18 = mulberry32(13);
 const SPRITE_SIZE$1 = 64;
 const SPRITE_CENTER$1 = SPRITE_SIZE$1 / 2;
 const SPRITE_RADIUS$1 = SPRITE_SIZE$1 / 2;
-var FireflyLayer = class extends SimulationLayer {
+var Fireflies = class extends Effect {
 	#scale;
 	#size;
 	#speed;
@@ -1305,6 +1543,10 @@ var FireflyLayer = class extends SimulationLayer {
 		this.#sprite = this.#createSprite(r, g, b);
 		for (let i = 0; i < this.#maxCount; ++i) this.#fireflies.push(this.#createFirefly());
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.glowSpeed !== void 0) this.#glowSpeed = config.glowSpeed;
+	}
 	tick(dt, _width, _height) {
 		this.#time += .02 * dt * this.#speed;
 		for (const firefly of this.#fireflies) {
@@ -1478,18 +1720,16 @@ var FireflyParticle = class {
 	}
 };
 //#endregion
-//#region src/fireflies/simulation.ts
-var FireflySimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new FireflyLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/fireflies/index.ts
+function createFireflies(config) {
+	return new Fireflies(config);
+}
 //#endregion
 //#region src/firepit/consts.ts
 const MULBERRY$17 = mulberry32(13);
 //#endregion
 //#region src/firepit/layer.ts
-var FirepitLayer = class extends SimulationLayer {
+var Firepit = class extends Effect {
 	#scale;
 	#flameWidth;
 	#flameHeight;
@@ -1515,6 +1755,11 @@ var FirepitLayer = class extends SimulationLayer {
 			height: this.#flameHeight * (.7 + MULBERRY$17.next() * .3)
 		});
 	}
+	configure(config) {
+		if (config.intensity !== void 0) this.#intensity = config.intensity;
+		if (config.flameWidth !== void 0) this.#flameWidth = config.flameWidth;
+		if (config.flameHeight !== void 0) this.#flameHeight = config.flameHeight;
+	}
 	tick(dt, _width, _height) {
 		this.#time += .03 * dt * this.#intensity;
 		if (this.#embers.length < this.#maxEmbers && MULBERRY$17.next() < .3 * this.#intensity * dt) this.#embers.push(this.#createEmber());
@@ -1611,12 +1856,10 @@ var FirepitLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/firepit/simulation.ts
-var FirepitSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new FirepitLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/firepit/index.ts
+function createFirepit(config) {
+	return new Firepit(config);
+}
 //#endregion
 //#region src/fireworks/consts.ts
 const MULBERRY$16 = mulberry32(13);
@@ -1923,7 +2166,7 @@ var Explosion = class {
 	}
 	checkCrackle() {
 		if (this.#type !== "crackle" || this.#hasCrackled) return false;
-		if (this.#alpha <= this.#decay * 3) {
+		if (this.#alpha <= .4) {
 			this.#hasCrackled = true;
 			return true;
 		}
@@ -2032,6 +2275,158 @@ var Explosion = class {
 	}
 };
 //#endregion
+//#region src/fireworks/create-explosion.ts
+function between(rng, min, max) {
+	return min + rng() * (max - min);
+}
+/**
+* Creates an array of {@link Explosion} particles for the given firework variant.
+* Use this to fire a fully formed explosion burst in your own render loop without
+* needing a {@link Fireworks} instance.
+*
+* @param variant - The firework variant to create.
+* @param position - The center position of the explosion in canvas pixels.
+* @param hue - Base hue in degrees (0–360).
+* @param options - Optional overrides for `lineWidth` (default `5`) and `scale` (default `1`).
+* @param rng - RNG function returning values in [0, 1). Defaults to `Math.random`.
+*/
+function createExplosion(variant, position, hue, options = {}, rng = Math.random) {
+	const lineWidth = options.lineWidth ?? 5;
+	const scale = options.scale ?? 1;
+	const explosions = [];
+	switch (variant) {
+		case "saturn":
+			createSaturn(explosions, position, hue, lineWidth, scale, rng);
+			break;
+		case "dahlia":
+			createDahlia(explosions, position, hue, lineWidth, scale, rng);
+			break;
+		case "heart":
+			createHeart(explosions, position, hue, lineWidth, scale, rng);
+			break;
+		case "spiral":
+			createSpiral(explosions, position, hue, lineWidth, scale, rng);
+			break;
+		case "flower":
+			createFlower(explosions, position, hue, lineWidth, scale, rng);
+			break;
+		case "concentric":
+			createConcentric(explosions, position, hue, lineWidth, scale, rng);
+			break;
+		default: {
+			const type = variant;
+			const config = EXPLOSION_CONFIGS[type];
+			const count = Math.floor(between(rng, config.particleCount[0], config.particleCount[1]));
+			const effectiveHue = type === "brocade" ? between(rng, 35, 50) : hue;
+			for (let i = 0; i < count; i++) {
+				let angle;
+				let speed;
+				if (type === "ring") {
+					angle = i / count * Math.PI * 2;
+					speed = between(rng, config.speed[0], config.speed[1]) * .5 + config.speed[0] * .5;
+				} else if (type === "palm" || type === "horsetail") {
+					const spread = type === "horsetail" ? Math.PI / 8 : Math.PI / 5;
+					angle = -Math.PI / 2 + between(rng, -spread, spread);
+				}
+				explosions.push(new Explosion(position, effectiveHue, lineWidth, type, scale, angle, speed));
+			}
+		}
+	}
+	return explosions;
+}
+function createSaturn(explosions, position, hue, lineWidth, scale, rng) {
+	const velocity = between(rng, 4, 6);
+	const shellCount = Math.floor(between(rng, 25, 35));
+	for (let i = 0; i < shellCount; i++) {
+		const rad = i / shellCount * Math.PI * 2;
+		explosions.push(new Explosion(position, hue, lineWidth, "peony", scale, rad + between(rng, -.05, .05), velocity + between(rng, -.25, .25)));
+	}
+	const fillCount = Math.floor(between(rng, 40, 60));
+	for (let i = 0; i < fillCount; i++) explosions.push(new Explosion(position, hue, lineWidth, "peony", scale, between(rng, 0, Math.PI * 2), velocity * between(rng, 0, 1)));
+	const ringRotation = between(rng, 0, Math.PI * 2);
+	const ringCount = Math.floor(between(rng, 40, 55));
+	const ringVx = velocity * between(rng, 2, 3);
+	const ringVy = velocity * .6;
+	for (let i = 0; i < ringCount; i++) {
+		const rad = i / ringCount * Math.PI * 2;
+		const cx = Math.cos(rad) * ringVx + between(rng, -.25, .25);
+		const cy = Math.sin(rad) * ringVy + between(rng, -.25, .25);
+		const cosR = Math.cos(ringRotation);
+		const sinR = Math.sin(ringRotation);
+		const vx = cx * cosR - cy * sinR;
+		const vy = cx * sinR + cy * cosR;
+		const vz = Math.sin(rad) * velocity * .8;
+		explosions.push(new Explosion(position, hue + 60, lineWidth, "ring", scale, Math.atan2(vy, vx), Math.sqrt(vx * vx + vy * vy), vz));
+	}
+}
+function createDahlia(explosions, position, hue, lineWidth, scale, rng) {
+	const petalCount = Math.floor(between(rng, 6, 9));
+	const particlesPerPetal = Math.floor(between(rng, 8, 12));
+	for (let petal = 0; petal < petalCount; petal++) {
+		const baseAngle = petal / petalCount * Math.PI * 2;
+		const petalHue = hue + (petal % 2 === 0 ? 25 : -25);
+		for (let i = 0; i < particlesPerPetal; i++) explosions.push(new Explosion(position, petalHue, lineWidth, "dahlia", scale, baseAngle + between(rng, -.3, .3)));
+	}
+}
+function createHeart(explosions, position, hue, lineWidth, scale, rng) {
+	const velocity = between(rng, 3, 5);
+	const count = Math.floor(between(rng, 60, 80));
+	const rotation = between(rng, -.3, .3);
+	const cosR = Math.cos(rotation);
+	const sinR = Math.sin(rotation);
+	for (let i = 0; i < count; i++) {
+		const t = i / count * Math.PI * 2;
+		const hx = 16 * Math.pow(Math.sin(t), 3);
+		const hy = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
+		const s = velocity / 16;
+		const vx = hx * s;
+		const vy = hy * s;
+		const rvx = vx * cosR - vy * sinR;
+		const rvy = vx * sinR + vy * cosR;
+		explosions.push(new Explosion(position, hue, lineWidth, "heart", scale, Math.atan2(rvy, rvx), Math.max(.1, Math.sqrt(rvx * rvx + rvy * rvy) + between(rng, -.15, .15))));
+	}
+}
+function createSpiral(explosions, position, hue, lineWidth, scale, rng) {
+	const arms = Math.floor(between(rng, 3, 5));
+	const particlesPerArm = Math.floor(between(rng, 15, 20));
+	const twist = between(rng, 2, 3.5);
+	const baseRotation = between(rng, 0, Math.PI * 2);
+	for (let arm = 0; arm < arms; arm++) {
+		const baseAngle = baseRotation + arm / arms * Math.PI * 2;
+		const armHue = hue + arm * (360 / arms / 3);
+		for (let i = 0; i < particlesPerArm; i++) {
+			const progress = i / particlesPerArm;
+			explosions.push(new Explosion(position, armHue, lineWidth, "spiral", scale, baseAngle + progress * twist, 2 + progress * 8 + between(rng, -.3, .3)));
+		}
+	}
+}
+function createFlower(explosions, position, hue, lineWidth, scale, rng) {
+	const velocity = between(rng, 4, 7);
+	const count = Math.floor(between(rng, 70, 90));
+	const petals = Math.floor(between(rng, 2, 4));
+	const rotation = between(rng, 0, Math.PI * 2);
+	for (let i = 0; i < count; i++) {
+		const t = i / count * Math.PI * 2;
+		const speed = velocity * Math.abs(Math.cos(petals * t));
+		if (speed < .3) continue;
+		explosions.push(new Explosion(position, hue + between(rng, -15, 15), lineWidth, "flower", scale, t + rotation, speed + between(rng, -.2, .2)));
+	}
+}
+function createConcentric(explosions, position, hue, lineWidth, scale, rng) {
+	const outerCount = Math.floor(between(rng, 35, 50));
+	const outerSpeed = between(rng, 7, 10);
+	for (let i = 0; i < outerCount; i++) {
+		const angle = i / outerCount * Math.PI * 2;
+		explosions.push(new Explosion(position, hue, lineWidth, "ring", scale, angle + between(rng, -.05, .05), outerSpeed + between(rng, -.25, .25)));
+	}
+	const innerCount = Math.floor(between(rng, 25, 35));
+	const innerSpeed = between(rng, 3, 5);
+	for (let i = 0; i < innerCount; i++) {
+		const angle = i / innerCount * Math.PI * 2;
+		explosions.push(new Explosion(position, hue + 120, lineWidth, "ring", scale, angle + between(rng, -.05, .05), innerSpeed + between(rng, -.25, .25)));
+	}
+}
+//#endregion
 //#region src/distance.ts
 function distance(a, b) {
 	let x = a.x - b.x;
@@ -2047,7 +2442,7 @@ var Spark = class {
 	#size;
 	#decay;
 	#friction = .94;
-	#gravity = .6;
+	#gravity = .3;
 	#alpha = 1;
 	get isDead() {
 		return this.#alpha <= 0;
@@ -2062,7 +2457,7 @@ var Spark = class {
 		this.#decay = MULBERRY$16.nextBetween(.03, .08);
 		this.#velocity = {
 			x: velocityX + MULBERRY$16.nextBetween(-1.5, 1.5),
-			y: velocityY + MULBERRY$16.nextBetween(-2, .5)
+			y: velocityY + MULBERRY$16.nextBetween(-2, 2)
 		};
 	}
 	draw(ctx) {
@@ -2175,7 +2570,7 @@ var Firework = class extends EventTarget {
 };
 //#endregion
 //#region src/fireworks/layer.ts
-var FireworkLayer = class extends SimulationLayer {
+var Fireworks = class extends Effect {
 	#explosions = [];
 	#fireworks = [];
 	#sparks = [];
@@ -2183,6 +2578,7 @@ var FireworkLayer = class extends SimulationLayer {
 	#spawnTimer = 0;
 	#positionRandom = MULBERRY$16.fork();
 	#autoSpawn;
+	#variants;
 	#baseSize;
 	#scale;
 	#tailWidth;
@@ -2192,6 +2588,7 @@ var FireworkLayer = class extends SimulationLayer {
 		super();
 		const scale = config.scale ?? 1;
 		this.#autoSpawn = config.autoSpawn ?? true;
+		this.#variants = config.variants?.length ? [...config.variants] : [...FIREWORK_VARIANTS];
 		this.#baseSize = 5 * scale;
 		this.#scale = scale;
 		this.#tailWidth = 2 * scale;
@@ -2200,13 +2597,18 @@ var FireworkLayer = class extends SimulationLayer {
 		this.#width = width;
 		this.#height = height;
 	}
-	fireExplosion(variant, position) {
+	launch(variant, position) {
 		const pos = position ?? {
 			x: this.#width / 2,
 			y: this.#height * .4
 		};
 		this.#hue = MULBERRY$16.nextBetween(0, 360);
-		this.#createExplosion(pos, this.#hue, variant);
+		this.#spawnExplosion(pos, this.#hue, variant);
+	}
+	configure(config) {
+		if (config.scale !== void 0) this.#scale = config.scale;
+		if (config.autoSpawn !== void 0) this.#autoSpawn = config.autoSpawn;
+		if (Array.isArray(config.variants) && config.variants.length > 0) this.#variants = [...config.variants];
 	}
 	tick(dt, width, height) {
 		this.#width = width;
@@ -2223,7 +2625,8 @@ var FireworkLayer = class extends SimulationLayer {
 		}
 		for (const firework of this.#fireworks) {
 			firework.tick(dt);
-			this.#sparks.push(...firework.collectSparks());
+			const collected = firework.collectSparks();
+			for (let i = 0; i < collected.length; i++) this.#sparks.push(collected[i]);
 		}
 		for (const explosion of this.#explosions) explosion.tick(dt);
 		for (const spark of this.#sparks) spark.tick(dt);
@@ -2234,12 +2637,20 @@ var FireworkLayer = class extends SimulationLayer {
 				const angle = explosion.angle + Math.PI / 2 * i + Math.PI / 4;
 				newExplosions.push(new Explosion(explosion.position, explosion.hue, this.#baseSize * .6, "peony", this.#scale, angle, MULBERRY$16.nextBetween(3, 6)));
 			}
-			if (explosion.checkCrackle()) for (let j = 0; j < 8; j++) newSparks.push(new Spark(explosion.position, explosion.hue + MULBERRY$16.nextBetween(-30, 30)));
+			if (explosion.checkCrackle()) for (let j = 0; j < 14; j++) {
+				const angle = MULBERRY$16.nextBetween(0, Math.PI * 2);
+				const speed = MULBERRY$16.nextBetween(3, 8);
+				newSparks.push(new Spark(explosion.position, explosion.hue + MULBERRY$16.nextBetween(-30, 30), Math.cos(angle) * speed, Math.sin(angle) * speed));
+			}
 		}
 		this.#explosions.push(...newExplosions);
 		this.#sparks.push(...newSparks);
-		this.#explosions = this.#explosions.filter((e) => !e.isDead);
-		this.#sparks = this.#sparks.filter((s) => !s.isDead);
+		let aliveExplosions = 0;
+		for (let i = 0; i < this.#explosions.length; i++) if (!this.#explosions[i].isDead) this.#explosions[aliveExplosions++] = this.#explosions[i];
+		this.#explosions.length = aliveExplosions;
+		let aliveSparks = 0;
+		for (let i = 0; i < this.#sparks.length; i++) if (!this.#sparks[i].isDead) this.#sparks[aliveSparks++] = this.#sparks[i];
+		this.#sparks.length = aliveSparks;
 	}
 	draw(ctx, width, height) {
 		if (ctx.canvas.width !== width || ctx.canvas.height !== height) {
@@ -2252,153 +2663,13 @@ var FireworkLayer = class extends SimulationLayer {
 		for (const firework of this.#fireworks) firework.draw(ctx);
 		ctx.globalCompositeOperation = "source-over";
 	}
-	#createExplosion(position, hue, variant) {
+	#spawnExplosion(position, hue, variant) {
 		const selected = variant ?? this.#pickVariant();
-		if (selected === "saturn") {
-			this.#createSaturnExplosion(position, hue);
-			return;
-		}
-		if (selected === "dahlia") {
-			this.#createDahliaExplosion(position, hue);
-			return;
-		}
-		if (selected === "heart") {
-			this.#createHeartExplosion(position, hue);
-			return;
-		}
-		if (selected === "spiral") {
-			this.#createSpiralExplosion(position, hue);
-			return;
-		}
-		if (selected === "flower") {
-			this.#createFlowerExplosion(position, hue);
-			return;
-		}
-		if (selected === "concentric") {
-			this.#createConcentricExplosion(position, hue);
-			return;
-		}
-		const type = selected;
-		const config = EXPLOSION_CONFIGS[type];
-		const particleCount = Math.floor(MULBERRY$16.nextBetween(config.particleCount[0], config.particleCount[1]));
-		const effectiveHue = type === "brocade" ? MULBERRY$16.nextBetween(35, 50) : hue;
-		for (let i = 0; i < particleCount; i++) {
-			let angle;
-			let speed;
-			if (type === "ring") {
-				angle = i / particleCount * Math.PI * 2;
-				speed = MULBERRY$16.nextBetween(config.speed[0], config.speed[1]) * .5 + config.speed[0] * .5;
-			} else if (type === "palm" || type === "horsetail") {
-				const spread = type === "horsetail" ? Math.PI / 8 : Math.PI / 5;
-				angle = -Math.PI / 2 + MULBERRY$16.nextBetween(-spread, spread);
-			}
-			this.#explosions.push(new Explosion(position, effectiveHue, this.#baseSize, type, this.#scale, angle, speed));
-		}
-	}
-	#createSaturnExplosion(position, hue) {
-		const velocity = MULBERRY$16.nextBetween(4, 6);
-		const shellCount = Math.floor(MULBERRY$16.nextBetween(25, 35));
-		for (let i = 0; i < shellCount; i++) {
-			const rad = i / shellCount * Math.PI * 2;
-			this.#explosions.push(new Explosion(position, hue, this.#baseSize, "peony", this.#scale, rad + MULBERRY$16.nextBetween(-.05, .05), velocity + MULBERRY$16.nextBetween(-.25, .25)));
-		}
-		const fillCount = Math.floor(MULBERRY$16.nextBetween(40, 60));
-		for (let i = 0; i < fillCount; i++) {
-			const rad = MULBERRY$16.nextBetween(0, Math.PI * 2);
-			const speed = velocity * MULBERRY$16.nextBetween(0, 1);
-			this.#explosions.push(new Explosion(position, hue, this.#baseSize, "peony", this.#scale, rad, speed));
-		}
-		const ringRotation = MULBERRY$16.nextBetween(0, Math.PI * 2);
-		const ringCount = Math.floor(MULBERRY$16.nextBetween(40, 55));
-		const ringVx = velocity * MULBERRY$16.nextBetween(2, 3);
-		const ringVy = velocity * .6;
-		for (let i = 0; i < ringCount; i++) {
-			const rad = i / ringCount * Math.PI * 2;
-			const cx = Math.cos(rad) * ringVx + MULBERRY$16.nextBetween(-.25, .25);
-			const cy = Math.sin(rad) * ringVy + MULBERRY$16.nextBetween(-.25, .25);
-			const cosR = Math.cos(ringRotation);
-			const sinR = Math.sin(ringRotation);
-			const vx = cx * cosR - cy * sinR;
-			const vy = cx * sinR + cy * cosR;
-			const screenAngle = Math.atan2(vy, vx);
-			const screenSpeed = Math.sqrt(vx * vx + vy * vy);
-			const vz = Math.sin(rad) * velocity * .8;
-			this.#explosions.push(new Explosion(position, hue + 60, this.#baseSize, "ring", this.#scale, screenAngle, screenSpeed, vz));
-		}
-	}
-	#createDahliaExplosion(position, hue) {
-		const petalCount = Math.floor(MULBERRY$16.nextBetween(6, 9));
-		const particlesPerPetal = Math.floor(MULBERRY$16.nextBetween(8, 12));
-		for (let petal = 0; petal < petalCount; petal++) {
-			const baseAngle = petal / petalCount * Math.PI * 2;
-			const petalHue = hue + (petal % 2 === 0 ? 25 : -25);
-			for (let i = 0; i < particlesPerPetal; i++) {
-				const angle = baseAngle + MULBERRY$16.nextBetween(-.3, .3);
-				this.#explosions.push(new Explosion(position, petalHue, this.#baseSize, "dahlia", this.#scale, angle));
-			}
-		}
-	}
-	#createHeartExplosion(position, hue) {
-		const velocity = MULBERRY$16.nextBetween(3, 5);
-		const count = Math.floor(MULBERRY$16.nextBetween(60, 80));
-		const rotation = MULBERRY$16.nextBetween(-.3, .3);
-		for (let i = 0; i < count; i++) {
-			const t = i / count * Math.PI * 2;
-			const hx = 16 * Math.pow(Math.sin(t), 3);
-			const hy = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
-			const scale = velocity / 16;
-			const vx = hx * scale;
-			const vy = hy * scale;
-			const cosR = Math.cos(rotation);
-			const sinR = Math.sin(rotation);
-			const rvx = vx * cosR - vy * sinR;
-			const rvy = vx * sinR + vy * cosR;
-			const angle = Math.atan2(rvy, rvx);
-			const speed = Math.sqrt(rvx * rvx + rvy * rvy);
-			this.#explosions.push(new Explosion(position, hue, this.#baseSize, "heart", this.#scale, angle, Math.max(.1, speed + MULBERRY$16.nextBetween(-.15, .15))));
-		}
-	}
-	#createSpiralExplosion(position, hue) {
-		const arms = Math.floor(MULBERRY$16.nextBetween(3, 5));
-		const particlesPerArm = Math.floor(MULBERRY$16.nextBetween(15, 20));
-		const twist = MULBERRY$16.nextBetween(2, 3.5);
-		const baseRotation = MULBERRY$16.nextBetween(0, Math.PI * 2);
-		for (let arm = 0; arm < arms; arm++) {
-			const baseAngle = baseRotation + arm / arms * Math.PI * 2;
-			const armHue = hue + arm * (360 / arms / 3);
-			for (let i = 0; i < particlesPerArm; i++) {
-				const progress = i / particlesPerArm;
-				const angle = baseAngle + progress * twist;
-				const speed = 2 + progress * 8;
-				this.#explosions.push(new Explosion(position, armHue, this.#baseSize, "spiral", this.#scale, angle, speed + MULBERRY$16.nextBetween(-.3, .3)));
-			}
-		}
-	}
-	#createFlowerExplosion(position, hue) {
-		const velocity = MULBERRY$16.nextBetween(4, 7);
-		const count = Math.floor(MULBERRY$16.nextBetween(70, 90));
-		const petals = Math.floor(MULBERRY$16.nextBetween(2, 4));
-		const rotation = MULBERRY$16.nextBetween(0, Math.PI * 2);
-		for (let i = 0; i < count; i++) {
-			const t = i / count * Math.PI * 2;
-			const speed = velocity * Math.abs(Math.cos(petals * t));
-			if (speed < .3) continue;
-			this.#explosions.push(new Explosion(position, hue + MULBERRY$16.nextBetween(-15, 15), this.#baseSize, "flower", this.#scale, t + rotation, speed + MULBERRY$16.nextBetween(-.2, .2)));
-		}
-	}
-	#createConcentricExplosion(position, hue) {
-		const outerCount = Math.floor(MULBERRY$16.nextBetween(35, 50));
-		const outerSpeed = MULBERRY$16.nextBetween(7, 10);
-		for (let i = 0; i < outerCount; i++) {
-			const angle = i / outerCount * Math.PI * 2;
-			this.#explosions.push(new Explosion(position, hue, this.#baseSize, "ring", this.#scale, angle + MULBERRY$16.nextBetween(-.05, .05), outerSpeed + MULBERRY$16.nextBetween(-.25, .25)));
-		}
-		const innerCount = Math.floor(MULBERRY$16.nextBetween(25, 35));
-		const innerSpeed = MULBERRY$16.nextBetween(3, 5);
-		for (let i = 0; i < innerCount; i++) {
-			const angle = i / innerCount * Math.PI * 2;
-			this.#explosions.push(new Explosion(position, hue + 120, this.#baseSize, "ring", this.#scale, angle + MULBERRY$16.nextBetween(-.05, .05), innerSpeed + MULBERRY$16.nextBetween(-.25, .25)));
-		}
+		const rng = () => MULBERRY$16.nextBetween(0, 1);
+		this.#explosions.push(...createExplosion(selected, position, hue, {
+			lineWidth: this.#baseSize,
+			scale: this.#scale
+		}, rng));
 	}
 	#createFirework(position) {
 		const hue = this.#hue;
@@ -2413,43 +2684,20 @@ var FireworkLayer = class extends SimulationLayer {
 		}, hue, this.#tailWidth, this.#baseSize);
 		firework.addEventListener("remove", () => {
 			this.#fireworks.splice(this.#fireworks.indexOf(firework), 1);
-			this.#createExplosion(firework.position, hue);
+			this.#spawnExplosion(firework.position, hue);
 		}, { once: true });
 		this.#fireworks.push(firework);
 	}
 	#pickVariant() {
-		const roll = MULBERRY$16.nextBetween(0, 100);
-		if (roll < 12) return "peony";
-		if (roll < 22) return "chrysanthemum";
-		if (roll < 29) return "willow";
-		if (roll < 34) return "ring";
-		if (roll < 39) return "palm";
-		if (roll < 44) return "crackle";
-		if (roll < 48) return "crossette";
-		if (roll < 55) return "saturn";
-		if (roll < 62) return "dahlia";
-		if (roll < 67) return "brocade";
-		if (roll < 71) return "horsetail";
-		if (roll < 75) return "strobe";
-		if (roll < 82) return "heart";
-		if (roll < 89) return "spiral";
-		if (roll < 94) return "flower";
-		return "concentric";
+		const index = Math.floor(MULBERRY$16.nextBetween(0, this.#variants.length));
+		return this.#variants[index];
 	}
 };
 //#endregion
-//#region src/fireworks/simulation.ts
-var FireworkSimulation = class extends SimulationCanvas {
-	#layer;
-	constructor(canvas, config = {}) {
-		const layer = new FireworkLayer(config);
-		super(canvas, layer, 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-		this.#layer = layer;
-	}
-	fireExplosion(variant, position) {
-		this.#layer.fireExplosion(variant, position);
-	}
-};
+//#region src/fireworks/index.ts
+function createFireworks(config) {
+	return new Fireworks(config);
+}
 //#endregion
 //#region src/glitter/consts.ts
 const MULBERRY$15 = mulberry32(13);
@@ -2464,7 +2712,7 @@ const GLITTER_COLORS = [
 ];
 //#endregion
 //#region src/glitter/layer.ts
-var GlitterLayer = class extends SimulationLayer {
+var Glitter = class extends Effect {
 	#scale;
 	#size;
 	#speed;
@@ -2487,6 +2735,10 @@ var GlitterLayer = class extends SimulationLayer {
 		if (innerWidth < 991) this.#maxCount = Math.floor(this.#maxCount / 2);
 		for (let i = 0; i < this.#maxCount; ++i) this.#falling.push(this.#createFallingPiece(true));
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.groundLevel !== void 0) this.#groundLevel = config.groundLevel;
+	}
 	tick(dt, _width, _height) {
 		this.#time += .03 * dt;
 		let alive = 0;
@@ -2586,12 +2838,10 @@ var GlitterLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/glitter/simulation.ts
-var GlitterSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new GlitterLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/glitter/index.ts
+function createGlitter(config) {
+	return new Glitter(config);
+}
 //#endregion
 //#region src/lanterns/consts.ts
 const MULBERRY$14 = mulberry32(13);
@@ -2606,7 +2856,7 @@ const LANTERN_COLORS = [
 ];
 //#endregion
 //#region src/lanterns/layer.ts
-var LanternLayer = class extends SimulationLayer {
+var Lanterns = class extends Effect {
 	#scale;
 	#speed;
 	#size;
@@ -2614,6 +2864,8 @@ var LanternLayer = class extends SimulationLayer {
 	#maxCount;
 	#time = 0;
 	#lanterns = [];
+	#sortedLanterns = [];
+	#sortDirty = true;
 	constructor(config = {}) {
 		super();
 		this.#scale = config.scale ?? 1;
@@ -2624,6 +2876,9 @@ var LanternLayer = class extends SimulationLayer {
 		if (innerWidth < 991) this.#maxCount = Math.floor(this.#maxCount / 2);
 		for (let i = 0; i < this.#maxCount; ++i) this.#lanterns.push(this.#createLantern(true));
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+	}
 	tick(dt, width, height) {
 		this.#time += .02 * dt * this.#speed;
 		for (let i = 0; i < this.#lanterns.length; i++) {
@@ -2631,11 +2886,18 @@ var LanternLayer = class extends SimulationLayer {
 			lantern.y -= lantern.vy * this.#speed * dt / (height * 1.5);
 			const sway = Math.sin(this.#time * lantern.swaySpeed + lantern.swayPhase) * lantern.swayAmplitude;
 			lantern.x += sway * dt / (width * 8);
-			if (lantern.y < -.15) this.#lanterns[i] = this.#createLantern(false);
+			if (lantern.y < -.15) {
+				this.#lanterns[i] = this.#createLantern(false);
+				this.#sortDirty = true;
+			}
 		}
 	}
 	draw(ctx, width, height) {
-		const sorted = [...this.#lanterns].sort((a, b) => a.size - b.size);
+		if (this.#sortDirty) {
+			this.#sortedLanterns = [...this.#lanterns].sort((a, b) => a.size - b.size);
+			this.#sortDirty = false;
+		}
+		const sorted = this.#sortedLanterns;
 		for (const lantern of sorted) {
 			const px = lantern.x * width;
 			const py = lantern.y * height;
@@ -2653,221 +2915,79 @@ var LanternLayer = class extends SimulationLayer {
 			ctx.beginPath();
 			ctx.arc(px, py, glowRadius, 0, Math.PI * 2);
 			ctx.fill();
-			ctx.save();
-			ctx.translate(px, py);
+			ctx.setTransform(1, 0, 0, 1, px, py);
 			const bodyW = size * .8;
 			const bodyH = size;
 			const topW = bodyW * .6;
-			ctx.beginPath();
-			ctx.moveTo(-topW, -bodyH * .5);
-			ctx.quadraticCurveTo(-bodyW, 0, -bodyW * .7, bodyH * .5);
-			ctx.lineTo(bodyW * .7, bodyH * .5);
-			ctx.quadraticCurveTo(bodyW, 0, topW, -bodyH * .5);
-			ctx.closePath();
-			const bodyGradient = ctx.createLinearGradient(0, -bodyH * .5, 0, bodyH * .5);
-			bodyGradient.addColorStop(0, `rgba(${Math.min(255, r + 60)}, ${Math.min(255, g + 60)}, ${Math.min(255, b + 30)}, ${alpha * .9})`);
-			bodyGradient.addColorStop(.5, `rgba(${r}, ${g}, ${b}, ${alpha * .85})`);
-			bodyGradient.addColorStop(1, `rgba(${Math.max(0, r - 30)}, ${Math.max(0, g - 30)}, ${Math.max(0, b - 20)}, ${alpha * .8})`);
-			ctx.fillStyle = bodyGradient;
-			ctx.fill();
-			ctx.beginPath();
-			ctx.moveTo(-topW * .7, -bodyH * .55);
-			ctx.lineTo(topW * .7, -bodyH * .55);
-			ctx.lineWidth = size * .06;
-			ctx.strokeStyle = `rgba(${Math.max(0, r - 40)}, ${Math.max(0, g - 40)}, ${Math.max(0, b - 40)}, ${alpha * .7})`;
-			ctx.stroke();
-			const flameH = bodyH * .3;
-			const flameW = bodyW * .15;
-			const flameFlicker = Math.sin(this.#time * 8 + lantern.glowPhase) * flameW * .3;
-			const flameGradient = ctx.createRadialGradient(flameFlicker, -flameH * .1, 0, flameFlicker, -flameH * .1, flameH);
-			flameGradient.addColorStop(0, `rgba(255, 255, 200, ${alpha * .95})`);
-			flameGradient.addColorStop(.3, `rgba(255, 200, 80, ${alpha * .7})`);
-			flameGradient.addColorStop(.7, `rgba(255, 140, 40, ${alpha * .3})`);
-			flameGradient.addColorStop(1, `rgba(255, 100, 20, 0)`);
-			ctx.beginPath();
-			ctx.moveTo(-flameW + flameFlicker, flameH * .2);
-			ctx.quadraticCurveTo(-flameW * .5 + flameFlicker, -flameH * .3, flameFlicker, -flameH);
-			ctx.quadraticCurveTo(flameW * .5 + flameFlicker, -flameH * .3, flameW + flameFlicker, flameH * .2);
-			ctx.closePath();
-			ctx.fillStyle = flameGradient;
-			ctx.fill();
-			const stringLen = size * .6;
-			const stringDrift = Math.sin(this.#time * 1.5 + lantern.swayPhase) * size * .1;
-			ctx.beginPath();
-			ctx.moveTo(0, bodyH * .5);
-			ctx.quadraticCurveTo(stringDrift, bodyH * .5 + stringLen * .5, -stringDrift * .5, bodyH * .5 + stringLen);
-			ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${alpha * .4})`;
-			ctx.lineWidth = size * .04;
-			ctx.stroke();
-			ctx.restore();
-		}
-	}
-	#createLantern(initialSpread) {
-		const colorIndex = Math.floor(MULBERRY$14.next() * this.#colorRGBs.length);
-		const sizeVariation = .6 + MULBERRY$14.next() * .8;
-		return {
-			x: .05 + MULBERRY$14.next() * .9,
-			y: initialSpread ? MULBERRY$14.next() * 1.3 : 1.15 + MULBERRY$14.next() * .2,
-			vx: 0,
-			vy: .2 + MULBERRY$14.next() * .6,
-			size: this.#size * sizeVariation,
-			glowPhase: MULBERRY$14.next() * Math.PI * 2,
-			glowSpeed: .8 + MULBERRY$14.next() * 1.2,
-			swayPhase: MULBERRY$14.next() * Math.PI * 2,
-			swaySpeed: .4 + MULBERRY$14.next() * .8,
-			swayAmplitude: .3 + MULBERRY$14.next() * .7,
-			colorIndex,
-			opacity: .7 + MULBERRY$14.next() * .3
-		};
-	}
-};
-//#endregion
-//#region src/lanterns/simulation.ts
-var LanternSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new LanternLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
-//#endregion
-//#region src/layered.ts
-function parseSide(side) {
-	return typeof side === "number" ? [0, side] : side;
-}
-function applyEdgeFade(ctx, width, height, fade) {
-	ctx.globalCompositeOperation = "destination-out";
-	if (fade.top !== void 0) {
-		const [near, far] = parseSide(fade.top);
-		const nearPx = near * height;
-		const farPx = far * height;
-		if (nearPx > 0) {
-			ctx.fillStyle = "rgba(0,0,0,1)";
-			ctx.fillRect(0, 0, width, nearPx);
-		}
-		if (farPx > nearPx) {
-			const gradient = ctx.createLinearGradient(0, nearPx, 0, farPx);
-			gradient.addColorStop(0, "rgba(0,0,0,1)");
-			gradient.addColorStop(1, "rgba(0,0,0,0)");
-			ctx.fillStyle = gradient;
-			ctx.fillRect(0, nearPx, width, farPx - nearPx);
-		}
-	}
-	if (fade.bottom !== void 0) {
-		const [near, far] = parseSide(fade.bottom);
-		const nearPx = near * height;
-		const farPx = far * height;
-		if (nearPx > 0) {
-			ctx.fillStyle = "rgba(0,0,0,1)";
-			ctx.fillRect(0, height - nearPx, width, nearPx);
-		}
-		if (farPx > nearPx) {
-			const gradient = ctx.createLinearGradient(0, height - farPx, 0, height - nearPx);
-			gradient.addColorStop(0, "rgba(0,0,0,0)");
-			gradient.addColorStop(1, "rgba(0,0,0,1)");
-			ctx.fillStyle = gradient;
-			ctx.fillRect(0, height - farPx, width, farPx - nearPx);
-		}
-	}
-	if (fade.left !== void 0) {
-		const [near, far] = parseSide(fade.left);
-		const nearPx = near * width;
-		const farPx = far * width;
-		if (nearPx > 0) {
-			ctx.fillStyle = "rgba(0,0,0,1)";
-			ctx.fillRect(0, 0, nearPx, height);
-		}
-		if (farPx > nearPx) {
-			const gradient = ctx.createLinearGradient(nearPx, 0, farPx, 0);
-			gradient.addColorStop(0, "rgba(0,0,0,1)");
-			gradient.addColorStop(1, "rgba(0,0,0,0)");
-			ctx.fillStyle = gradient;
-			ctx.fillRect(nearPx, 0, farPx - nearPx, height);
-		}
-	}
-	if (fade.right !== void 0) {
-		const [near, far] = parseSide(fade.right);
-		const nearPx = near * width;
-		const farPx = far * width;
-		if (nearPx > 0) {
-			ctx.fillStyle = "rgba(0,0,0,1)";
-			ctx.fillRect(width - nearPx, 0, nearPx, height);
-		}
-		if (farPx > nearPx) {
-			const gradient = ctx.createLinearGradient(width - farPx, 0, width - nearPx, 0);
-			gradient.addColorStop(0, "rgba(0,0,0,0)");
-			gradient.addColorStop(1, "rgba(0,0,0,1)");
-			ctx.fillStyle = gradient;
-			ctx.fillRect(width - farPx, 0, farPx - nearPx, height);
-		}
-	}
-	ctx.globalCompositeOperation = "source-over";
-}
-var LayeredSimulation = class extends LimitedFrameRateCanvas {
-	#layers = [];
-	#contextOptions;
-	#offscreen = null;
-	#offscreenCtx = null;
-	constructor(canvas, frameRate = 60, options = { colorSpace: "display-p3" }) {
-		super(canvas, frameRate, options);
-		this.#contextOptions = options;
-		canvas.style.position = "absolute";
-		canvas.style.top = "0";
-		canvas.style.left = "0";
-		canvas.style.height = "100%";
-		canvas.style.width = "100%";
-	}
-	add(layer) {
-		this.#layers.push(layer);
-		if (this.isTicking) layer.onMount(this.canvas);
-		return this;
-	}
-	start() {
-		for (const layer of this.#layers) layer.onMount(this.canvas);
-		super.start();
-	}
-	destroy() {
-		for (const layer of this.#layers) layer.onUnmount(this.canvas);
-		super.destroy();
-	}
-	draw() {
-		this.canvas.height = this.height;
-		this.canvas.width = this.width;
-		const ctx = this.context;
-		ctx.clearRect(0, 0, this.width, this.height);
-		for (const layer of this.#layers) if (layer.fade) {
-			const offCtx = this.#getOffscreenCtx(this.width, this.height);
-			offCtx.clearRect(0, 0, this.width, this.height);
-			layer.draw(offCtx, this.width, this.height);
-			applyEdgeFade(offCtx, this.width, this.height, layer.fade);
-			ctx.drawImage(this.#offscreen, 0, 0);
-		} else {
-			ctx.save();
-			layer.draw(ctx, this.width, this.height);
-			ctx.restore();
-		}
-	}
-	tick() {
-		const dt = (this.delta > 0 && this.delta < 200 ? this.delta / (1e3 / 60) : 1) * this.speed * LimitedFrameRateCanvas.globalSpeed;
-		for (const layer of this.#layers) layer.tick(dt, this.width, this.height);
-	}
-	onResize() {
-		super.onResize();
-		if (this.#offscreen) {
-			this.#offscreen.width = this.width;
-			this.#offscreen.height = this.height;
+			ctx.beginPath();
+			ctx.moveTo(-topW, -bodyH * .5);
+			ctx.quadraticCurveTo(-bodyW, 0, -bodyW * .7, bodyH * .5);
+			ctx.lineTo(bodyW * .7, bodyH * .5);
+			ctx.quadraticCurveTo(bodyW, 0, topW, -bodyH * .5);
+			ctx.closePath();
+			const bodyGradient = ctx.createLinearGradient(0, -bodyH * .5, 0, bodyH * .5);
+			bodyGradient.addColorStop(0, `rgba(${Math.min(255, r + 60)}, ${Math.min(255, g + 60)}, ${Math.min(255, b + 30)}, ${alpha * .9})`);
+			bodyGradient.addColorStop(.5, `rgba(${r}, ${g}, ${b}, ${alpha * .85})`);
+			bodyGradient.addColorStop(1, `rgba(${Math.max(0, r - 30)}, ${Math.max(0, g - 30)}, ${Math.max(0, b - 20)}, ${alpha * .8})`);
+			ctx.fillStyle = bodyGradient;
+			ctx.fill();
+			ctx.beginPath();
+			ctx.moveTo(-topW * .7, -bodyH * .55);
+			ctx.lineTo(topW * .7, -bodyH * .55);
+			ctx.lineWidth = size * .06;
+			ctx.strokeStyle = `rgba(${Math.max(0, r - 40)}, ${Math.max(0, g - 40)}, ${Math.max(0, b - 40)}, ${alpha * .7})`;
+			ctx.stroke();
+			const flameH = bodyH * .3;
+			const flameW = bodyW * .15;
+			const flameFlicker = Math.sin(this.#time * 8 + lantern.glowPhase) * flameW * .3;
+			const flameGradient = ctx.createRadialGradient(flameFlicker, -flameH * .1, 0, flameFlicker, -flameH * .1, flameH);
+			flameGradient.addColorStop(0, `rgba(255, 255, 200, ${alpha * .95})`);
+			flameGradient.addColorStop(.3, `rgba(255, 200, 80, ${alpha * .7})`);
+			flameGradient.addColorStop(.7, `rgba(255, 140, 40, ${alpha * .3})`);
+			flameGradient.addColorStop(1, `rgba(255, 100, 20, 0)`);
+			ctx.beginPath();
+			ctx.moveTo(-flameW + flameFlicker, flameH * .2);
+			ctx.quadraticCurveTo(-flameW * .5 + flameFlicker, -flameH * .3, flameFlicker, -flameH);
+			ctx.quadraticCurveTo(flameW * .5 + flameFlicker, -flameH * .3, flameW + flameFlicker, flameH * .2);
+			ctx.closePath();
+			ctx.fillStyle = flameGradient;
+			ctx.fill();
+			const stringLen = size * .6;
+			const stringDrift = Math.sin(this.#time * 1.5 + lantern.swayPhase) * size * .1;
+			ctx.beginPath();
+			ctx.moveTo(0, bodyH * .5);
+			ctx.quadraticCurveTo(stringDrift, bodyH * .5 + stringLen * .5, -stringDrift * .5, bodyH * .5 + stringLen);
+			ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${alpha * .4})`;
+			ctx.lineWidth = size * .04;
+			ctx.stroke();
+			ctx.resetTransform();
 		}
-		for (const layer of this.#layers) layer.onResize(this.width, this.height);
 	}
-	#getOffscreenCtx(width, height) {
-		if (!this.#offscreen) {
-			this.#offscreen = document.createElement("canvas");
-			this.#offscreen.width = width;
-			this.#offscreen.height = height;
-			this.#offscreenCtx = this.#offscreen.getContext("2d", this.#contextOptions);
-		}
-		return this.#offscreenCtx;
+	#createLantern(initialSpread) {
+		const colorIndex = Math.floor(MULBERRY$14.next() * this.#colorRGBs.length);
+		const sizeVariation = .6 + MULBERRY$14.next() * .8;
+		return {
+			x: .05 + MULBERRY$14.next() * .9,
+			y: initialSpread ? MULBERRY$14.next() * 1.3 : 1.15 + MULBERRY$14.next() * .2,
+			vx: 0,
+			vy: .2 + MULBERRY$14.next() * .6,
+			size: this.#size * sizeVariation,
+			glowPhase: MULBERRY$14.next() * Math.PI * 2,
+			glowSpeed: .8 + MULBERRY$14.next() * 1.2,
+			swayPhase: MULBERRY$14.next() * Math.PI * 2,
+			swaySpeed: .4 + MULBERRY$14.next() * .8,
+			swayAmplitude: .3 + MULBERRY$14.next() * .7,
+			colorIndex,
+			opacity: .7 + MULBERRY$14.next() * .3
+		};
 	}
 };
 //#endregion
+//#region src/lanterns/index.ts
+function createLanterns(config) {
+	return new Lanterns(config);
+}
+//#endregion
 //#region src/leaves/consts.ts
 const MULBERRY$13 = mulberry32(13);
 const LEAF_COLORS = [
@@ -2884,7 +3004,7 @@ const LEAF_COLORS = [
 ];
 //#endregion
 //#region src/leaves/layer.ts
-var LeafLayer = class extends SimulationLayer {
+var Leaves = class extends Effect {
 	#scale;
 	#size;
 	#speed;
@@ -2910,6 +3030,10 @@ var LeafLayer = class extends SimulationLayer {
 	onResize(_width, height) {
 		this.#height = height;
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.wind !== void 0) this.#wind = config.wind;
+	}
 	tick(dt, _width, height) {
 		this.#height = height;
 		const speedFactor = height / 540 / this.#speed;
@@ -2944,14 +3068,13 @@ var LeafLayer = class extends SimulationLayer {
 			const py = leaf.y * height;
 			const displaySize = leaf.size * leaf.depth;
 			const scaleX = Math.cos(leaf.flipAngle);
-			ctx.save();
-			ctx.translate(px, py);
-			ctx.rotate(leaf.rotation);
-			ctx.scale(scaleX, 1);
+			const cos = Math.cos(leaf.rotation);
+			const sin = Math.sin(leaf.rotation);
+			ctx.setTransform(cos * scaleX, sin * scaleX, -sin, cos, px, py);
 			ctx.globalAlpha = .3 + leaf.depth * .7;
 			ctx.drawImage(this.#sprites[leaf.colorIndex % this.#sprites.length], -displaySize / 2, -displaySize / 2, displaySize, displaySize);
-			ctx.restore();
 		}
+		ctx.resetTransform();
 		ctx.globalAlpha = 1;
 	}
 	#createSprites() {
@@ -3080,12 +3203,10 @@ var LeafLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/leaves/simulation.ts
-var LeafSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new LeafLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/leaves/index.ts
+function createLeaves(config) {
+	return new Leaves(config);
+}
 //#endregion
 //#region src/lightning/consts.ts
 const MULBERRY$12 = mulberry32(13);
@@ -3233,7 +3354,7 @@ var LightningSystem = class {
 };
 //#endregion
 //#region src/lightning/layer.ts
-var LightningLayer = class extends SimulationLayer {
+var Lightning = class extends Effect {
 	#system;
 	#enableFlash;
 	constructor(config = {}) {
@@ -3264,19 +3385,17 @@ var LightningLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/lightning/simulation.ts
-var LightningSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new LightningLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/lightning/index.ts
+function createLightning(config) {
+	return new Lightning(config);
+}
 //#endregion
 //#region src/matrix/consts.ts
 const MULBERRY$11 = mulberry32(13);
 const MATRIX_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 //#endregion
 //#region src/matrix/layer.ts
-var MatrixLayer = class extends SimulationLayer {
+var Matrix = class extends Effect {
 	#scale;
 	#speed;
 	#fontSize;
@@ -3315,6 +3434,10 @@ var MatrixLayer = class extends SimulationLayer {
 			}
 		}
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.trailLength !== void 0) this.#trailLength = config.trailLength;
+	}
 	tick(dt, width, height) {
 		this.#width = width;
 		this.#height = height;
@@ -3366,12 +3489,10 @@ var MatrixLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/matrix/simulation.ts
-var MatrixSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new MatrixLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/matrix/index.ts
+function createMatrix(config) {
+	return new Matrix(config);
+}
 //#endregion
 //#region src/orbits/consts.ts
 const MULBERRY$10 = mulberry32(13);
@@ -3386,7 +3507,7 @@ const ORBIT_COLORS = [
 ];
 //#endregion
 //#region src/orbits/layer.ts
-var OrbitLayer = class extends SimulationLayer {
+var Orbits = class extends Effect {
 	#centerCount;
 	#orbitersPerCenter;
 	#speed;
@@ -3421,6 +3542,12 @@ var OrbitLayer = class extends SimulationLayer {
 			for (let ci = 0; ci < this.#centers.length; ci++) for (let oi = 0; oi < count; oi++) this.#orbiters.push(this.#createOrbiter(ci));
 		}
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.trailLength !== void 0) this.#trailLength = config.trailLength;
+		if (config.showCenters !== void 0) this.#showCenters = config.showCenters;
+		if (config.scale !== void 0) this.#scale = config.scale;
+	}
 	tick(dt, width, height) {
 		this.#time += .01 * dt * this.#speed;
 		for (const orbiter of this.#orbiters) {
@@ -3437,11 +3564,20 @@ var OrbitLayer = class extends SimulationLayer {
 			const rotatedY = localX * Math.sin(orbiter.tilt * .3) + localY * Math.cos(orbiter.tilt * .3);
 			const px = cx + rotatedX;
 			const py = cy + rotatedY;
-			orbiter.trail.push({
-				x: px,
-				y: py
-			});
-			if (orbiter.trail.length > this.#trailLength) orbiter.trail.shift();
+			const trail = orbiter.trail;
+			const maxLen = this.#trailLength;
+			if (trail.length < maxLen) {
+				trail.push({
+					x: px,
+					y: py
+				});
+				orbiter.trailHead = trail.length - 1;
+			} else {
+				const next = (orbiter.trailHead + 1) % maxLen;
+				trail[next].x = px;
+				trail[next].y = py;
+				orbiter.trailHead = next;
+			}
 		}
 	}
 	draw(ctx, width, height) {
@@ -3466,21 +3602,28 @@ var OrbitLayer = class extends SimulationLayer {
 		ctx.globalCompositeOperation = "lighter";
 		for (const orbiter of this.#orbiters) {
 			const [cr, cg, cb] = hexToRGB(orbiter.color);
-			if (orbiter.trail.length > 1) for (let ti = 0; ti < orbiter.trail.length - 1; ti++) {
-				const progress = (ti + 1) / orbiter.trail.length;
-				const trailAlpha = progress * .5;
-				const trailWidth = orbiter.size * progress * this.#scale;
-				if (trailAlpha < .01) continue;
-				ctx.globalAlpha = trailAlpha;
-				ctx.strokeStyle = `rgb(${cr}, ${cg}, ${cb})`;
-				ctx.lineWidth = trailWidth;
-				ctx.beginPath();
-				ctx.moveTo(orbiter.trail[ti].x, orbiter.trail[ti].y);
-				ctx.lineTo(orbiter.trail[ti + 1].x, orbiter.trail[ti + 1].y);
-				ctx.stroke();
+			const trail = orbiter.trail;
+			const trailLen = trail.length;
+			if (trailLen > 1) {
+				const oldest = trailLen === this.#trailLength ? (orbiter.trailHead + 1) % trailLen : 0;
+				for (let ti = 0; ti < trailLen - 1; ti++) {
+					const progress = (ti + 1) / trailLen;
+					const trailAlpha = progress * .5;
+					const trailWidth = orbiter.size * progress * this.#scale;
+					if (trailAlpha < .01) continue;
+					const idx0 = (oldest + ti) % trailLen;
+					const idx1 = (oldest + ti + 1) % trailLen;
+					ctx.globalAlpha = trailAlpha;
+					ctx.strokeStyle = `rgb(${cr}, ${cg}, ${cb})`;
+					ctx.lineWidth = trailWidth;
+					ctx.beginPath();
+					ctx.moveTo(trail[idx0].x, trail[idx0].y);
+					ctx.lineTo(trail[idx1].x, trail[idx1].y);
+					ctx.stroke();
+				}
 			}
-			if (orbiter.trail.length > 0) {
-				const head = orbiter.trail[orbiter.trail.length - 1];
+			if (trailLen > 0) {
+				const head = trail[orbiter.trailHead];
 				const headSize = orbiter.size * this.#scale;
 				const glow = ctx.createRadialGradient(head.x, head.y, 0, head.x, head.y, headSize * 3);
 				glow.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, 0.9)`);
@@ -3512,23 +3655,22 @@ var OrbitLayer = class extends SimulationLayer {
 			tilt: MULBERRY$10.next() * Math.PI,
 			size: 1.5 + MULBERRY$10.next() * 2.5,
 			color: this.#colors[Math.floor(MULBERRY$10.next() * this.#colors.length)],
-			trail: []
+			trail: [],
+			trailHead: 0
 		};
 	}
 };
 //#endregion
-//#region src/orbits/simulation.ts
-var OrbitSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new OrbitLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/orbits/index.ts
+function createOrbits(config) {
+	return new Orbits(config);
+}
 //#endregion
 //#region src/particles/consts.ts
 const MULBERRY$9 = mulberry32(13);
 //#endregion
 //#region src/particles/layer.ts
-var ParticleLayer = class extends SimulationLayer {
+var Particles = class extends Effect {
 	#scale;
 	#connectionDistance;
 	#lineWidth;
@@ -3575,6 +3717,16 @@ var ParticleLayer = class extends SimulationLayer {
 		this.#onMouseMoveBound = this.#onMouseMove.bind(this);
 		this.#onMouseLeaveBound = this.#onMouseLeave.bind(this);
 	}
+	configure(config) {
+		if (config.scale !== void 0) this.#scale = config.scale;
+		if (config.connectionDistance !== void 0) this.#connectionDistance = config.connectionDistance * this.#scale;
+		if (config.lineWidth !== void 0) this.#lineWidth = config.lineWidth;
+		if (config.mouseMode !== void 0) this.#mouseMode = config.mouseMode;
+		if (config.mouseRadius !== void 0) this.#mouseRadius = config.mouseRadius * this.#scale;
+		if (config.mouseStrength !== void 0) this.#mouseStrength = config.mouseStrength;
+		if (config.particleForces !== void 0) this.#particleForces = config.particleForces;
+		if (config.glow !== void 0) this.#glow = config.glow;
+	}
 	onResize(width, height) {
 		this.#width = width;
 		this.#height = height;
@@ -3757,12 +3909,10 @@ var ParticleLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/particles/simulation.ts
-var ParticleSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new ParticleLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/particles/index.ts
+function createParticles(config) {
+	return new Particles(config);
+}
 //#endregion
 //#region src/petals/consts.ts
 const MULBERRY$8 = mulberry32(13);
@@ -3777,7 +3927,7 @@ const PETAL_COLORS = [
 ];
 //#endregion
 //#region src/petals/layer.ts
-var PetalLayer = class extends SimulationLayer {
+var Petals = class extends Effect {
 	#scale;
 	#size;
 	#speed;
@@ -3799,6 +3949,10 @@ var PetalLayer = class extends SimulationLayer {
 		this.#sprites = this.#createSprites();
 		for (let i = 0; i < this.#maxCount; ++i) this.#petals.push(this.#createPetal(true));
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.wind !== void 0) this.#wind = config.wind;
+	}
 	tick(dt, _width, height) {
 		const speedFactor = height / 540 / this.#speed;
 		this.#time += .012 * dt;
@@ -3829,14 +3983,13 @@ var PetalLayer = class extends SimulationLayer {
 			const py = petal.y * height;
 			const displaySize = petal.size * petal.depth;
 			const scaleX = Math.cos(petal.flipAngle);
-			ctx.save();
-			ctx.translate(px, py);
-			ctx.rotate(petal.rotation);
-			ctx.scale(scaleX, 1);
+			const cos = Math.cos(petal.rotation);
+			const sin = Math.sin(petal.rotation);
+			ctx.setTransform(cos * scaleX, sin * scaleX, -sin, cos, px, py);
 			ctx.globalAlpha = .4 + petal.depth * .6;
 			ctx.drawImage(this.#sprites[petal.colorIndex % this.#sprites.length], -displaySize / 2, -displaySize / 2, displaySize, displaySize);
-			ctx.restore();
 		}
+		ctx.resetTransform();
 		ctx.globalAlpha = 1;
 	}
 	#createSprites() {
@@ -3888,12 +4041,10 @@ var PetalLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/petals/simulation.ts
-var PetalSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new PetalLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/petals/index.ts
+function createPetals(config) {
+	return new Petals(config);
+}
 //#endregion
 //#region src/plasma/layer.ts
 const DEFAULT_PALETTE = [
@@ -3923,7 +4074,7 @@ const DEFAULT_PALETTE = [
 		b: 100
 	}
 ];
-var PlasmaLayer = class extends SimulationLayer {
+var Plasma = class extends Effect {
 	#speed;
 	#scale;
 	#resolution;
@@ -3939,6 +4090,10 @@ var PlasmaLayer = class extends SimulationLayer {
 		this.#resolution = config.resolution ?? 4;
 		this.#palette = config.palette ?? DEFAULT_PALETTE;
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.scale !== void 0) this.#scale = config.scale;
+	}
 	tick(dt, _width, _height) {
 		this.#time += .02 * dt * this.#speed;
 	}
@@ -3983,12 +4138,10 @@ var PlasmaLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/plasma/simulation.ts
-var PlasmaSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new PlasmaLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/plasma/index.ts
+function createPlasma(config) {
+	return new Plasma(config);
+}
 //#endregion
 //#region src/rain/consts.ts
 const MULBERRY$7 = mulberry32(13);
@@ -4014,7 +4167,7 @@ const VARIANT_PRESETS = {
 		splashes: true
 	}
 };
-var RainLayer = class extends SimulationLayer {
+var Rain = class extends Effect {
 	#scale;
 	#speed;
 	#wind;
@@ -4042,6 +4195,11 @@ var RainLayer = class extends SimulationLayer {
 		if (innerWidth < 991) this.#maxDrops = Math.floor(this.#maxDrops / 2);
 		for (let i = 0; i < this.#maxDrops; ++i) this.#drops.push(this.#createDrop(true));
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.wind !== void 0) this.#wind = config.wind;
+		if (config.splashes !== void 0) this.#enableSplashes = config.splashes;
+	}
 	tick(dt, width, height) {
 		let aliveDrops = 0;
 		for (let i = 0; i < this.#drops.length; i++) {
@@ -4228,18 +4386,16 @@ var SplashParticle = class SplashParticle {
 	}
 };
 //#endregion
-//#region src/rain/simulation.ts
-var RainSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new RainLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/rain/index.ts
+function createRain(config) {
+	return new Rain(config);
+}
 //#endregion
 //#region src/sandstorm/consts.ts
 const MULBERRY$6 = mulberry32(13);
 //#endregion
 //#region src/sandstorm/layer.ts
-var SandstormLayer = class extends SimulationLayer {
+var Sandstorm = class extends Effect {
 	#scale;
 	#wind;
 	#turbulence;
@@ -4264,6 +4420,10 @@ var SandstormLayer = class extends SimulationLayer {
 		if (innerWidth < 991) this.#maxCount = Math.floor(this.#maxCount / 2);
 		for (let i = 0; i < this.#maxCount; ++i) this.#grains.push(this.#createGrain(true));
 	}
+	configure(config) {
+		if (config.wind !== void 0) this.#wind = config.wind;
+		if (config.turbulence !== void 0) this.#turbulence = config.turbulence;
+	}
 	tick(dt, width, height) {
 		this.#time += .02 * dt;
 		const gustX = Math.sin(this.#time * .3) * .5 + Math.sin(this.#time * .8 + 1) * .3 + Math.sin(this.#time * 2.1) * .2;
@@ -4338,12 +4498,165 @@ var SandstormLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/sandstorm/simulation.ts
-var SandstormSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new SandstormLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
+//#region src/sandstorm/index.ts
+function createSandstorm(config) {
+	return new Sandstorm(config);
+}
+//#endregion
+//#region src/scene.ts
+/**
+* Internal canvas runner that drives all layers in a Scene.
+*/
+var SceneCanvas = class extends LimitedFrameRateCanvas {
+	#layers;
+	#contextOptions;
+	#offscreen = null;
+	#offscreenCtx = null;
+	constructor(canvas, layers, frameRate, options) {
+		super(canvas, frameRate, options);
+		this.#layers = layers;
+		this.#contextOptions = options;
+		canvas.style.position = "absolute";
+		canvas.style.top = "0";
+		canvas.style.left = "0";
+		canvas.style.height = "100%";
+		canvas.style.width = "100%";
+	}
+	start() {
+		for (const layer of this.#layers) layer.onMount(this.canvas);
+		super.start();
+	}
+	destroy() {
+		for (const layer of this.#layers) layer.onUnmount(this.canvas);
+		super.destroy();
+	}
+	draw() {
+		const dpr = this.dpr;
+		this.canvas.height = this.height * dpr;
+		this.canvas.width = this.width * dpr;
+		const ctx = this.context;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		ctx.clearRect(0, 0, this.width, this.height);
+		for (const layer of this.#layers) if (layer.fade) {
+			const offCtx = this.#getOffscreenCtx(this.width * dpr, this.height * dpr);
+			offCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+			offCtx.clearRect(0, 0, this.width, this.height);
+			layer.draw(offCtx, this.width, this.height);
+			applyEdgeFade(offCtx, this.width, this.height, layer.fade);
+			ctx.drawImage(this.#offscreen, 0, 0, this.width, this.height);
+		} else {
+			ctx.save();
+			layer.draw(ctx, this.width, this.height);
+			ctx.restore();
+		}
+	}
+	tick() {
+		const dt = (this.delta > 0 && this.delta < 200 ? this.delta / (1e3 / 60) : 1) * this.speed * LimitedFrameRateCanvas.globalSpeed;
+		for (const layer of this.#layers) layer.tick(dt, this.width, this.height);
+	}
+	onResize() {
+		super.onResize();
+		if (this.#offscreen) {
+			this.#offscreen.width = this.width * this.dpr;
+			this.#offscreen.height = this.height * this.dpr;
+		}
+		for (const layer of this.#layers) layer.onResize(this.width, this.height);
+	}
+	#getOffscreenCtx(width, height) {
+		if (!this.#offscreen) {
+			this.#offscreen = document.createElement("canvas");
+			this.#offscreen.width = width;
+			this.#offscreen.height = height;
+			this.#offscreenCtx = this.#offscreen.getContext("2d", this.#contextOptions);
+		}
+		return this.#offscreenCtx;
+	}
+};
+/**
+* Composable canvas that renders multiple Effect layers in order (first = bottom, last = top).
+*
+* @example
+* const scene = new Scene()
+*     .mount(canvas)
+*     .layer(new Aurora({ bands: 5 }))
+*     .layer(new Stars().withFade({ bottom: 0.4 }))
+*     .start();
+*/
+var Scene = class {
+	#layers = [];
+	#frameRate;
+	#defaultOptions;
+	#runner = null;
+	constructor(frameRate = 60, options = { colorSpace: "display-p3" }) {
+		this.#frameRate = frameRate;
+		this.#defaultOptions = options;
+	}
+	/**
+	* Mount the scene to a canvas element or CSS selector.
+	*/
+	mount(canvas, options) {
+		if (typeof canvas === "string") {
+			const el = document.querySelector(canvas);
+			if (!el) throw new Error(`Scene.mount(): no element found for selector "${canvas}".`);
+			canvas = el;
+		}
+		this.#runner?.destroy();
+		this.#runner = new SceneCanvas(canvas, this.#layers, this.#frameRate, options ?? this.#defaultOptions);
+		return this;
+	}
+	/**
+	* Add an effect layer. Layers are rendered in the order they are added.
+	* If the scene is already running, the layer is mounted immediately.
+	*/
+	layer(effect) {
+		this.#layers.push(effect);
+		if (this.#runner?.isTicking) effect.onMount(this.#runner.canvas);
+		return this;
+	}
+	/**
+	* Start the render loop.
+	*/
+	start() {
+		this.#runner?.start();
+		return this;
+	}
+	/**
+	* Pause rendering without destroying state. Use resume() to continue.
+	*/
+	pause() {
+		this.#runner?.pause();
+		return this;
+	}
+	/**
+	* Resume rendering after pause().
+	*/
+	resume() {
+		this.#runner?.resume();
+		return this;
+	}
+	/**
+	* Stop and destroy all layers.
+	*/
+	destroy() {
+		this.#runner?.destroy();
+		this.#runner = null;
+	}
+	get speed() {
+		return this.#runner?.speed ?? 1;
+	}
+	set speed(value) {
+		if (this.#runner) this.#runner.speed = value;
+	}
+	get isTicking() {
+		return this.#runner?.isTicking ?? false;
 	}
 };
+/**
+* Factory alternative to `new Scene()`. Call .mount() and .layer() on the returned instance.
+*/
+function createScene(frameRate, options) {
+	return new Scene(frameRate, options);
+}
 //#endregion
 //#region src/shooting-stars/system.ts
 var ShootingStarSystem = class {
@@ -4357,10 +4670,8 @@ var ShootingStarSystem = class {
 	#alphaRange;
 	#decayMin;
 	#decayRange;
-	#verticalFade;
 	#rng;
 	#cooldown;
-	#height = 0;
 	#stars = [];
 	constructor(config, rng) {
 		this.#interval = config.interval;
@@ -4377,12 +4688,10 @@ var ShootingStarSystem = class {
 		this.#alphaRange = config.alphaRange ?? .3;
 		this.#decayMin = config.decayMin ?? .008;
 		this.#decayRange = config.decayRange ?? .01;
-		this.#verticalFade = config.verticalFade ?? null;
 		this.#rng = rng;
 		this.#cooldown = this.#interval[0] + this.#rng() * (this.#interval[1] - this.#interval[0]);
 	}
 	tick(dt, width, height) {
-		this.#height = height;
 		this.#cooldown -= dt;
 		if (this.#cooldown <= 0) {
 			this.#stars.push(this.#create(width, height));
@@ -4391,17 +4700,24 @@ var ShootingStarSystem = class {
 		let alive = 0;
 		for (let i = 0; i < this.#stars.length; i++) {
 			const star = this.#stars[i];
-			star.trail.push({
-				x: star.x,
-				y: star.y
-			});
-			if (star.trail.length > this.#trailLength) star.trail.shift();
+			const trail = star.trail;
+			const maxLen = this.#trailLength;
+			if (trail.length < maxLen) {
+				trail.push({
+					x: star.x,
+					y: star.y
+				});
+				star.trailHead = trail.length - 1;
+			} else {
+				const next = (star.trailHead + 1) % maxLen;
+				trail[next].x = star.x;
+				trail[next].y = star.y;
+				star.trailHead = next;
+			}
 			star.x += star.vx * this.#speed * dt;
 			star.y += star.vy * this.#speed * dt;
 			star.alpha -= star.decay * dt;
-			const inBounds = star.alpha > 0 && star.x > -50 && star.x < width + 50 && star.y < height + 50;
-			const fullyFaded = this.#verticalFade !== null && star.y / height >= this.#verticalFade[1];
-			if (inBounds && !fullyFaded) this.#stars[alive++] = star;
+			if (star.alpha > 0 && star.x > -50 && star.x < width + 50 && star.y < height + 50) this.#stars[alive++] = star;
 		}
 		this.#stars.length = alive;
 	}
@@ -4409,23 +4725,22 @@ var ShootingStarSystem = class {
 		const [cr, cg, cb] = this.#color;
 		ctx.globalCompositeOperation = "lighter";
 		for (const star of this.#stars) {
-			let fadeFactor = 1;
-			if (this.#verticalFade && this.#height > 0) {
-				const [fadeStart, fadeEnd] = this.#verticalFade;
-				fadeFactor = 1 - Math.max(0, Math.min(1, (star.y / this.#height - fadeStart) / (fadeEnd - fadeStart)));
-			}
-			for (let t = 0; t < star.trail.length; t++) {
-				const progress = t / star.trail.length;
-				const trailAlpha = star.alpha * progress * this.#trailAlphaFactor * fadeFactor;
+			const trail = star.trail;
+			const trailLen = trail.length;
+			const oldest = trailLen === this.#trailLength ? (star.trailHead + 1) % trailLen : 0;
+			for (let t = 0; t < trailLen; t++) {
+				const progress = t / trailLen;
+				const trailAlpha = star.alpha * progress * this.#trailAlphaFactor;
 				const trailSize = star.size * progress * this.#scale;
 				if (trailAlpha < .01) continue;
+				const idx = (oldest + t) % trailLen;
 				ctx.globalAlpha = trailAlpha;
 				ctx.beginPath();
-				ctx.arc(star.trail[t].x, star.trail[t].y, trailSize, 0, Math.PI * 2);
+				ctx.arc(trail[idx].x, trail[idx].y, trailSize, 0, Math.PI * 2);
 				ctx.fillStyle = `rgb(${cr}, ${cg}, ${cb})`;
 				ctx.fill();
 			}
-			const alpha = star.alpha * fadeFactor;
+			const alpha = star.alpha;
 			const headSize = star.size * 2 * this.#scale;
 			const glow = ctx.createRadialGradient(star.x, star.y, 0, star.x, star.y, headSize);
 			glow.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, ${alpha})`);
@@ -4453,7 +4768,8 @@ var ShootingStarSystem = class {
 			alpha: this.#alphaMin + this.#rng() * this.#alphaRange,
 			size: 1.5 + this.#rng() * 2,
 			decay: this.#decayMin + this.#rng() * this.#decayRange,
-			trail: []
+			trail: [],
+			trailHead: 0
 		};
 	}
 };
@@ -4465,7 +4781,7 @@ const MULBERRY$5 = mulberry32(13);
 const SPRITE_SIZE = 64;
 const SPRITE_CENTER = SPRITE_SIZE / 2;
 const SPRITE_RADIUS = SPRITE_SIZE / 2;
-var SnowLayer = class extends SimulationLayer {
+var Snow = class extends Effect {
 	#scale;
 	#size;
 	#speed;
@@ -4488,6 +4804,9 @@ var SnowLayer = class extends SimulationLayer {
 		this.#sprites = this.#createSprites(r, g, b);
 		for (let i = 0; i < this.#maxParticles; ++i) this.#snowflakes.push(this.#createSnowflake(true));
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+	}
 	onResize(_width, height) {
 		this.#height = height;
 	}
@@ -4530,11 +4849,11 @@ var SnowLayer = class extends SimulationLayer {
 			if (displaySize < .5) continue;
 			ctx.globalAlpha = this.#baseOpacity * (.15 + snowflake.depth * .85);
 			if (snowflake.spriteIndex === 3) {
-				ctx.save();
-				ctx.translate(px, py);
-				ctx.rotate(snowflake.rotation);
+				const cos = Math.cos(snowflake.rotation);
+				const sin = Math.sin(snowflake.rotation);
+				ctx.setTransform(cos, sin, -sin, cos, px, py);
 				ctx.drawImage(this.#sprites[snowflake.spriteIndex], -displayRadius, -displayRadius, displaySize, displaySize);
-				ctx.restore();
+				ctx.resetTransform();
 			} else ctx.drawImage(this.#sprites[snowflake.spriteIndex], px - displayRadius, py - displayRadius, displaySize, displaySize);
 		}
 		ctx.globalAlpha = 1;
@@ -4647,12 +4966,10 @@ var SnowLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/snow/simulation.ts
-var SnowSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new SnowLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/snow/index.ts
+function createSnow(config) {
+	return new Snow(config);
+}
 //#endregion
 //#region src/sparklers/consts.ts
 const MULBERRY$4 = mulberry32(13);
@@ -4664,7 +4981,7 @@ const DEFAULT_COLORS$1 = [
 	"#ffffff",
 	"#ffee88"
 ];
-var SparklerLayer = class extends SimulationLayer {
+var Sparklers = class extends Effect {
 	#scale;
 	#emitRate;
 	#maxSparks;
@@ -4681,6 +4998,8 @@ var SparklerLayer = class extends SimulationLayer {
 	#emitY = .5;
 	#mouseOnCanvas = false;
 	#sparks = [];
+	#mountedCanvas = null;
+	#cachedRect = null;
 	constructor(config = {}) {
 		super();
 		this.#scale = config.scale ?? 1;
@@ -4696,11 +5015,13 @@ var SparklerLayer = class extends SimulationLayer {
 		this.#onMouseMoveBound = this.#onMouseMove.bind(this);
 		this.#onMouseLeaveBound = this.#onMouseLeave.bind(this);
 	}
-	setPosition(x, y) {
+	moveTo(x, y) {
 		this.#emitX = x;
 		this.#emitY = y;
 	}
 	onMount(canvas) {
+		this.#mountedCanvas = canvas;
+		this.#cachedRect = canvas.getBoundingClientRect();
 		if (this.#hoverMode) {
 			canvas.addEventListener("mousemove", this.#onMouseMoveBound, { passive: true });
 			canvas.addEventListener("mouseleave", this.#onMouseLeaveBound, { passive: true });
@@ -4709,12 +5030,26 @@ var SparklerLayer = class extends SimulationLayer {
 	onUnmount(canvas) {
 		canvas.removeEventListener("mousemove", this.#onMouseMoveBound);
 		canvas.removeEventListener("mouseleave", this.#onMouseLeaveBound);
+		this.#mountedCanvas = null;
+		this.#cachedRect = null;
+	}
+	onResize() {
+		if (this.#mountedCanvas) this.#cachedRect = this.#mountedCanvas.getBoundingClientRect();
+	}
+	configure(config) {
+		if (config.scale !== void 0) this.#scale = config.scale;
+		if (config.emitRate !== void 0) this.#emitRate = config.emitRate;
+		if (config.friction !== void 0) this.#friction = config.friction;
+		if (config.gravity !== void 0) this.#gravity = config.gravity;
+		if (config.trailLength !== void 0) this.#trailLength = config.trailLength;
+		if (config.hoverMode !== void 0) this.#hoverMode = config.hoverMode;
 	}
 	tick(dt, width, height) {
 		if (!this.#hoverMode || this.#mouseOnCanvas) {
 			const emitCount = Math.min(this.#emitRate, this.#maxSparks - this.#sparks.length);
 			for (let i = 0; i < emitCount; i++) this.#sparks.push(this.#createSpark(width, height));
 		}
+		const frictionFactor = Math.pow(this.#friction, dt);
 		let alive = 0;
 		for (let i = 0; i < this.#sparks.length; i++) {
 			const spark = this.#sparks[i];
@@ -4723,8 +5058,8 @@ var SparklerLayer = class extends SimulationLayer {
 				y: spark.y
 			});
 			if (spark.trail.length > this.#trailLength) spark.trail.shift();
-			spark.vx *= Math.pow(this.#friction, dt);
-			spark.vy *= Math.pow(this.#friction, dt);
+			spark.vx *= frictionFactor;
+			spark.vy *= frictionFactor;
 			spark.vy += this.#gravity * this.#scale * dt;
 			spark.x += spark.vx * dt;
 			spark.y += spark.vy * dt;
@@ -4767,7 +5102,7 @@ var SparklerLayer = class extends SimulationLayer {
 		ctx.globalCompositeOperation = "source-over";
 	}
 	#onMouseMove(evt) {
-		const rect = evt.currentTarget.getBoundingClientRect();
+		const rect = this.#cachedRect ?? evt.currentTarget.getBoundingClientRect();
 		this.#emitX = (evt.clientX - rect.left) / rect.width;
 		this.#emitY = (evt.clientY - rect.top) / rect.height;
 		this.#mouseOnCanvas = true;
@@ -4861,29 +5196,20 @@ var SparklerParticle = class {
 	}
 };
 //#endregion
-//#region src/sparklers/simulation.ts
-var SparklerSimulation = class extends SimulationCanvas {
-	#layer;
-	constructor(canvas, config = {}) {
-		const layer = new SparklerLayer(config);
-		super(canvas, layer, 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-		this.#layer = layer;
-	}
-	setPosition(x, y) {
-		this.#layer.setPosition(x, y);
-	}
-};
+//#region src/sparklers/index.ts
+function createSparklers(config) {
+	return new Sparklers(config);
+}
 //#endregion
 //#region src/stars/consts.ts
 const MULBERRY$3 = mulberry32(13);
 //#endregion
 //#region src/stars/layer.ts
-var StarLayer = class extends SimulationLayer {
+var Stars = class extends Effect {
 	#mode;
 	#twinkleSpeed;
 	#colorRGB;
 	#scale;
-	#verticalFade;
 	#shootingStarSystem;
 	#starCount;
 	#time = 0;
@@ -4894,7 +5220,6 @@ var StarLayer = class extends SimulationLayer {
 		this.#starCount = config.starCount ?? 150;
 		this.#twinkleSpeed = config.twinkleSpeed ?? 1;
 		this.#scale = config.scale ?? 1;
-		this.#verticalFade = config.verticalFade ?? null;
 		this.#colorRGB = hexToRGB(config.color ?? "#ffffff");
 		const shootingColorRGB = hexToRGB(config.shootingColor ?? "#ffffff");
 		this.#shootingStarSystem = this.#mode === "shooting" || this.#mode === "both" ? new ShootingStarSystem({
@@ -4907,11 +5232,14 @@ var StarLayer = class extends SimulationLayer {
 			alphaMin: .8,
 			alphaRange: .2,
 			decayMin: .01,
-			decayRange: .015,
-			verticalFade: this.#verticalFade ?? void 0
+			decayRange: .015
 		}, () => MULBERRY$3.next()) : null;
 		if (this.#mode === "sky" || this.#mode === "both") for (let i = 0; i < this.#starCount; ++i) this.#stars.push(this.#createStar());
 	}
+	configure(config) {
+		if (config.twinkleSpeed !== void 0) this.#twinkleSpeed = config.twinkleSpeed;
+		if (config.scale !== void 0) this.#scale = config.scale;
+	}
 	tick(dt, width, height) {
 		this.#time += .02 * dt;
 		this.#shootingStarSystem?.tick(dt, width, height);
@@ -4923,13 +5251,7 @@ var StarLayer = class extends SimulationLayer {
 			for (const star of this.#stars) {
 				const px = star.x * width;
 				const py = star.y * height;
-				let alpha = star.brightness * (.3 + .7 * (.5 + .5 * Math.sin(this.#time * star.twinkleSpeed * this.#twinkleSpeed + star.twinklePhase)));
-				if (this.#verticalFade) {
-					const [fadeStart, fadeEnd] = this.#verticalFade;
-					const fadeFactor = 1 - Math.max(0, Math.min(1, (star.y - fadeStart) / (fadeEnd - fadeStart)));
-					alpha *= fadeFactor;
-					if (alpha <= 0) continue;
-				}
+				const alpha = star.brightness * (.3 + .7 * (.5 + .5 * Math.sin(this.#time * star.twinkleSpeed * this.#twinkleSpeed + star.twinklePhase)));
 				const size = star.size * this.#scale;
 				ctx.globalAlpha = alpha;
 				ctx.beginPath();
@@ -4967,12 +5289,10 @@ var StarLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/stars/simulation.ts
-var StarSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new StarLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/stars/index.ts
+function createStars(config) {
+	return new Stars(config);
+}
 //#endregion
 //#region src/streamers/consts.ts
 const MULBERRY$2 = mulberry32(13);
@@ -4988,7 +5308,7 @@ const STREAMER_COLORS = [
 ];
 //#endregion
 //#region src/streamers/layer.ts
-var StreamerLayer = class extends SimulationLayer {
+var Streamers = class extends Effect {
 	#colors;
 	#scale;
 	#speed;
@@ -5014,6 +5334,9 @@ var StreamerLayer = class extends SimulationLayer {
 			for (let i = 0; i < this.#count; i++) this.#streamers.push(this.#createStreamer(true));
 		}
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+	}
 	tick(dt, width, height) {
 		this.#width = width;
 		this.#height = height;
@@ -5128,12 +5451,10 @@ var StreamerLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/streamers/simulation.ts
-var StreamerSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new StreamerLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/streamers/index.ts
+function createStreamers(config) {
+	return new Streamers(config);
+}
 //#endregion
 //#region src/trail.ts
 var Trail = class {
@@ -5247,12 +5568,11 @@ const DEFAULT_COLORS = [
 	"#3399cc",
 	"#66c2e0"
 ];
-var WaveLayer = class extends SimulationLayer {
+var Waves = class extends Effect {
 	#speed;
-	#foamColor;
 	#foamAmount;
 	#scale;
-	#time = 0;
+	#foamRGB;
 	#waves = [];
 	#foamParticles = [];
 	#maxFoamParticles;
@@ -5261,10 +5581,10 @@ var WaveLayer = class extends SimulationLayer {
 		const layers = config.layers ?? 5;
 		const colors = config.colors ?? DEFAULT_COLORS;
 		this.#speed = config.speed ?? 1;
-		this.#foamColor = config.foamColor ?? "#ffffff";
 		this.#foamAmount = config.foamAmount ?? .4;
 		this.#scale = config.scale ?? 1;
 		this.#maxFoamParticles = 120;
+		this.#foamRGB = hexToRGB(config.foamColor ?? "#ffffff");
 		if (innerWidth < 991) this.#maxFoamParticles = Math.floor(this.#maxFoamParticles / 2);
 		for (let i = 0; i < layers; i++) {
 			const depth = i / Math.max(layers - 1, 1);
@@ -5272,17 +5592,22 @@ var WaveLayer = class extends SimulationLayer {
 			this.#waves.push({
 				amplitude: (20 + MULBERRY$1.next() * 30) * (1 - depth * .4),
 				frequency: .005 + MULBERRY$1.next() * .008 + depth * .002,
-				speed: (.4 + MULBERRY$1.next() * .6 + depth * .3) * this.#speed,
+				speed: .4 + MULBERRY$1.next() * .6 + depth * .3,
 				phase: MULBERRY$1.next() * Math.PI * 2,
 				baseY: .35 + depth * .13,
 				color,
-				foamThreshold: .6 + MULBERRY$1.next() * .3
+				foamThreshold: .6 + MULBERRY$1.next() * .3,
+				rgb: hexToRGB(color)
 			});
 		}
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.foamAmount !== void 0) this.#foamAmount = config.foamAmount;
+		if (config.scale !== void 0) this.#scale = config.scale;
+	}
 	tick(dt, width, height) {
-		this.#time += .02 * dt * this.#speed;
-		for (const wave of this.#waves) wave.phase += .015 * wave.speed * dt;
+		for (const wave of this.#waves) wave.phase += .015 * wave.speed * this.#speed * dt;
 		let aliveFoam = 0;
 		for (let i = 0; i < this.#foamParticles.length; i++) {
 			const foam = this.#foamParticles[i];
@@ -5312,6 +5637,7 @@ var WaveLayer = class extends SimulationLayer {
 		const step = 2;
 		for (let wi = 0; wi < this.#waves.length; wi++) {
 			const wave = this.#waves[wi];
+			const [wr, wg, wb] = wave.rgb;
 			const centerY = wave.baseY * height;
 			ctx.beginPath();
 			ctx.moveTo(0, height);
@@ -5325,54 +5651,35 @@ var WaveLayer = class extends SimulationLayer {
 			ctx.lineTo(width, height);
 			ctx.closePath();
 			const gradient = ctx.createLinearGradient(0, centerY - wave.amplitude * this.#scale, 0, height);
-			gradient.addColorStop(0, this.#adjustAlpha(wave.color, .85));
-			gradient.addColorStop(.4, wave.color);
-			gradient.addColorStop(1, this.#darkenColor(wave.color, .6));
+			gradient.addColorStop(0, `rgba(${wr}, ${wg}, ${wb}, 0.85)`);
+			gradient.addColorStop(.4, `rgb(${wr}, ${wg}, ${wb})`);
+			gradient.addColorStop(1, `rgb(${Math.floor(wr * .6)}, ${Math.floor(wg * .6)}, ${Math.floor(wb * .6)})`);
 			ctx.fillStyle = gradient;
 			ctx.fill();
 		}
-		if (this.#foamAmount > 0) for (const foam of this.#foamParticles) {
-			if (foam.alpha <= 0) continue;
-			ctx.beginPath();
-			ctx.arc(foam.x, foam.y, foam.size * this.#scale, 0, Math.PI * 2);
-			ctx.fillStyle = this.#adjustAlpha(this.#foamColor, foam.alpha * this.#foamAmount);
-			ctx.fill();
+		if (this.#foamAmount > 0) {
+			const [fr, fg, fb] = this.#foamRGB;
+			for (const foam of this.#foamParticles) {
+				if (foam.alpha <= 0) continue;
+				ctx.beginPath();
+				ctx.arc(foam.x, foam.y, foam.size * this.#scale, 0, Math.PI * 2);
+				ctx.fillStyle = `rgba(${fr}, ${fg}, ${fb}, ${foam.alpha * this.#foamAmount})`;
+				ctx.fill();
+			}
 		}
 	}
-	#adjustAlpha(color, alpha) {
-		const canvas = document.createElement("canvas");
-		canvas.width = 1;
-		canvas.height = 1;
-		const ctx = canvas.getContext("2d");
-		ctx.fillStyle = color;
-		ctx.fillRect(0, 0, 1, 1);
-		const data = ctx.getImageData(0, 0, 1, 1).data;
-		return `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${alpha})`;
-	}
-	#darkenColor(color, factor) {
-		const canvas = document.createElement("canvas");
-		canvas.width = 1;
-		canvas.height = 1;
-		const ctx = canvas.getContext("2d");
-		ctx.fillStyle = color;
-		ctx.fillRect(0, 0, 1, 1);
-		const data = ctx.getImageData(0, 0, 1, 1).data;
-		return `rgb(${Math.floor(data[0] * factor)}, ${Math.floor(data[1] * factor)}, ${Math.floor(data[2] * factor)})`;
-	}
 };
 //#endregion
-//#region src/waves/simulation.ts
-var WaveSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new WaveLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/waves/index.ts
+function createWaves(config) {
+	return new Waves(config);
+}
 //#endregion
 //#region src/wormhole/consts.ts
 const MULBERRY = mulberry32(13);
 //#endregion
 //#region src/wormhole/layer.ts
-var WormholeLayer = class extends SimulationLayer {
+var Wormhole = class extends Effect {
 	#speed;
 	#colorRGB;
 	#direction;
@@ -5401,6 +5708,10 @@ var WormholeLayer = class extends SimulationLayer {
 			for (let i = 0; i < this.#count; ++i) this.#particles.push(this.#createParticle(true));
 		}
 	}
+	configure(config) {
+		if (config.speed !== void 0) this.#speed = config.speed;
+		if (config.scale !== void 0) this.#scale = config.scale;
+	}
 	tick(dt, width, height) {
 		this.#width = width;
 		this.#height = height;
@@ -5492,13 +5803,11 @@ var WormholeLayer = class extends SimulationLayer {
 	}
 };
 //#endregion
-//#region src/wormhole/simulation.ts
-var WormholeSimulation = class extends SimulationCanvas {
-	constructor(canvas, config = {}) {
-		super(canvas, new WormholeLayer(config), 60, config.canvasOptions ?? { colorSpace: "display-p3" });
-	}
-};
+//#region src/wormhole/index.ts
+function createWormhole(config) {
+	return new Wormhole(config);
+}
 //#endregion
-export { AuroraLayer, AuroraSimulation, BalloonLayer, BalloonParticle, BalloonSimulation, BubbleLayer, BubbleSimulation, ConfettiLayer, ConfettiParticle, ConfettiSimulation, DonutLayer, DonutSimulation, EXPLOSION_CONFIGS, Explosion, FIREWORK_VARIANTS, FireflyLayer, FireflyParticle, FireflySimulation, FirepitLayer, FirepitSimulation, Firework, FireworkLayer, FireworkSimulation, GlitterLayer, GlitterSimulation, LanternLayer, LanternSimulation, LayeredSimulation, LeafLayer, LeafSimulation, LightningLayer, LightningSimulation, LightningSystem, LimitedFrameRateCanvas, MatrixLayer, MatrixSimulation, OrbitLayer, OrbitSimulation, PALETTES, ParticleLayer, ParticleSimulation, PetalLayer, PetalSimulation, PlasmaLayer, PlasmaSimulation, RainLayer, RainSimulation, RaindropParticle, SHAPE_PATHS, SandstormLayer, SandstormSimulation, ShootingStarSystem, SimulationCanvas, SimulationLayer, SnowLayer, SnowSimulation, Spark, SparklerLayer, SparklerParticle, SparklerSimulation, SplashParticle, StarLayer, StarSimulation, StreamerLayer, StreamerSimulation, Trail, WaveLayer, WaveSimulation, WormholeLayer, WormholeSimulation, createFireflySprite, parseColor };
+export { BalloonParticle, ConfettiParticle, EXPLOSION_CONFIGS, Effect, Explosion, FIREWORK_VARIANTS, FireflyParticle, Firework, LightningSystem, LimitedFrameRateCanvas, PALETTES, RaindropParticle, SHAPE_PATHS, Scene, ShootingStarSystem, Spark, SparklerParticle, SplashParticle, Trail, createAurora, createBalloons, createBubbles, createConfetti, createDonuts, createExplosion, createFireflies, createFireflySprite, createFirepit, createFireworks, createGlitter, createLanterns, createLeaves, createLightning, createMatrix, createOrbits, createParticles, createPetals, createPlasma, createRain, createSandstorm, createScene, createSnow, createSparklers, createStars, createStreamers, createWaves, createWormhole, parseColor };
 
 //# sourceMappingURL=index.mjs.map