@atmo-dev/events-ui 0.1.0

package/dist/themes/Blobs.svelte

@@ -0,0 +1,35 @@
+<div class="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-base-50 dark:bg-base-900">
+	<div
+		class="blob-1 absolute rounded-full bg-accent-500 opacity-30 blur-3xl"
+		style="width: 40vw; height: 40vw; top: -10%; left: -5%;"
+	></div>
+	<div
+		class="blob-2 absolute rounded-full bg-accent-500 opacity-20 blur-3xl"
+		style="width: 35vw; height: 35vw; bottom: -5%; right: -10%;"
+	></div>
+	<div
+		class="blob-3 absolute rounded-full bg-accent-400 opacity-15 blur-3xl"
+		style="width: 25vw; height: 25vw; top: 40%; left: 50%;"
+	></div>
+</div>
+
+<style>
+	@keyframes blob-float-1 {
+		0%, 100% { transform: translate(0, 0) scale(1); }
+		33% { transform: translate(5vw, 8vh) scale(1.1); }
+		66% { transform: translate(-3vw, 4vh) scale(0.95); }
+	}
+	@keyframes blob-float-2 {
+		0%, 100% { transform: translate(0, 0) scale(1); }
+		33% { transform: translate(-6vw, -5vh) scale(1.05); }
+		66% { transform: translate(4vw, -8vh) scale(1.1); }
+	}
+	@keyframes blob-float-3 {
+		0%, 100% { transform: translate(0, 0) scale(1); }
+		33% { transform: translate(8vw, -4vh) scale(1.15); }
+		66% { transform: translate(-5vw, 6vh) scale(0.9); }
+	}
+	.blob-1 { animation: blob-float-1 20s ease-in-out infinite; }
+	.blob-2 { animation: blob-float-2 25s ease-in-out infinite; }
+	.blob-3 { animation: blob-float-3 22s ease-in-out infinite; }
+</style>

package/dist/themes/Blobs.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Blobs;
+type Blobs = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Blobs: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/themes/Butterflies.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { BROWSER as browser } from 'esm-env';
+
+	let canvas: HTMLCanvasElement | undefined = $state(undefined);
+
+	$effect(() => {
+		if (!canvas || !browser) return;
+
+		const ctx = canvas.getContext('2d')!;
+		let animId: number;
+
+		const COUNT = 22;
+		const DRIFT_SPEED = 45; // px/sec forward flight
+		const DART_RATE = 0.15; // darts per second per butterfly
+		const ROTATION_EASE = 4; // rad/sec — how fast body turns toward heading
+
+		interface Butterfly {
+			x: number;
+			y: number;
+			heading: number; // radians — current direction of travel
+			rotation: number; // body orientation, lags heading slightly
+			turnRate: number; // radians/sec of random-walk steering
+			flapPhase: number;
+			flapRate: number; // Hz-ish
+			depthPhase: number; // slow "closer/further" scaling
+			depthRate: number; // Hz of depth oscillation
+			size: number;
+			hueShift: number;
+			alpha: number;
+		}
+
+		let lastWidth = 0;
+		function resize() {
+			const w = window.innerWidth;
+			if (w === lastWidth) return;
+			lastWidth = w;
+			canvas!.width = w;
+			canvas!.height = window.screen.height;
+		}
+		resize();
+		window.addEventListener('resize', resize);
+
+		function spawn(): Butterfly {
+			const angle = Math.random() * Math.PI * 2;
+			return {
+				x: Math.random() * canvas!.width,
+				y: Math.random() * canvas!.height,
+				heading: angle,
+				rotation: angle,
+				turnRate: 0.8 + Math.random() * 1.2, // 0.8–2 rad/√s of wander
+				flapPhase: Math.random() * Math.PI * 2,
+				flapRate: 1.5 + Math.random() * 1.5, // 1.5–3 flaps/sec
+				depthPhase: Math.random() * Math.PI * 2,
+				depthRate: 0.08 + Math.random() * 0.08, // 1/12s to 1/6s — 6–12s period
+				size: 10 + Math.random() * 18,
+				hueShift: (Math.random() - 0.5) * 40,
+				alpha: 0.35 + Math.random() * 0.4
+			};
+		}
+
+		const butterflies: Butterfly[] = Array.from({ length: COUNT }, spawn);
+
+		const accentColor = getComputedStyle(document.documentElement)
+			.getPropertyValue('--color-accent-500')
+			.trim();
+
+		// Right wing: top + bottom lobe drawn as a single path so their overlap
+		// fills once (no alpha accumulation). Positioned so the inner edge sits
+		// at +x ≈ 0.05, keeping the two wings from bleeding into each other at
+		// the body axis.
+		function drawWing(s: number) {
+			ctx.beginPath();
+			ctx.ellipse(s * 0.65, -s * 0.3, s * 0.6, s * 0.5, -0.25, 0, Math.PI * 2);
+			ctx.ellipse(s * 0.55, s * 0.35, s * 0.5, s * 0.4, 0.2, 0, Math.PI * 2);
+			ctx.fill();
+		}
+
+		function drawButterfly(b: Butterfly) {
+			// Smooth 0→1 flap at the natural flapRate (Hz)
+			const flap = (Math.sin(b.flapPhase) + 1) / 2;
+			const wingScaleX = 0.45 + 0.55 * flap; // 0.45 (folded) → 1.0 (open)
+
+			// Combined scale: slow "depth" breathing (±25% over ~10s) plus a tiny
+			// bump synced to each wing flap so peak-open wings read as closer.
+			const depth = 1 + 0.25 * Math.sin(b.depthPhase);
+			const flapBump = 1 + 0.08 * flap;
+			const scale = depth * flapBump;
+
+			ctx.save();
+			ctx.translate(b.x, b.y);
+			ctx.scale(scale, scale);
+			ctx.rotate(b.rotation + Math.PI / 2); // body points along velocity
+
+			const fill = accentColor
+				? `oklch(from ${accentColor} l c calc(h + ${b.hueShift}) / ${b.alpha})`
+				: `rgba(80, 140, 240, ${b.alpha})`;
+			ctx.fillStyle = fill;
+
+			// Right wing
+			ctx.save();
+			ctx.scale(wingScaleX, 1);
+			drawWing(b.size);
+			ctx.restore();
+
+			// Left wing (mirrored)
+			ctx.save();
+			ctx.scale(-wingScaleX, 1);
+			drawWing(b.size);
+			ctx.restore();
+
+			// Tiny body — slightly darker tint of the accent
+			ctx.fillStyle = accentColor
+				? `oklch(from ${accentColor} calc(l * 0.55) c calc(h + ${b.hueShift}) / ${Math.min(1, b.alpha + 0.2)})`
+				: `rgba(30, 40, 80, ${Math.min(1, b.alpha + 0.2)})`;
+			ctx.beginPath();
+			ctx.ellipse(0, 0, b.size * 0.08, b.size * 0.55, 0, 0, Math.PI * 2);
+			ctx.fill();
+
+			ctx.restore();
+		}
+
+		let lastTime = performance.now();
+
+		function draw(now: number) {
+			const dt = Math.min((now - lastTime) / 1000, 0.1);
+			lastTime = now;
+
+			const w = canvas!.width;
+			const h = canvas!.height;
+
+			ctx.clearRect(0, 0, w, h);
+
+			// Framerate-independent turn-toward-heading easing factor.
+			const rotationBlend = 1 - Math.exp(-ROTATION_EASE * dt);
+			const sqrtDt = Math.sqrt(dt);
+
+			for (const b of butterflies) {
+				b.flapPhase += b.flapRate * 2 * Math.PI * dt;
+				b.depthPhase += b.depthRate * 2 * Math.PI * dt;
+
+				// Heading random walk — sqrt(dt) keeps the per-second angular
+				// variance constant regardless of framerate (Brownian scaling).
+				b.heading += (Math.random() - 0.5) * 2 * b.turnRate * sqrtDt;
+
+				// Occasional sharp dart, as a Poisson process at DART_RATE/sec.
+				if (Math.random() < DART_RATE * dt) {
+					b.heading += (Math.random() - 0.5) * Math.PI;
+				}
+
+				b.x += Math.cos(b.heading) * DRIFT_SPEED * dt;
+				b.y += Math.sin(b.heading) * DRIFT_SPEED * dt;
+
+				// Body orientation eases toward heading with constant time constant.
+				let delta = b.heading - b.rotation;
+				while (delta > Math.PI) delta -= Math.PI * 2;
+				while (delta < -Math.PI) delta += Math.PI * 2;
+				b.rotation += delta * rotationBlend;
+
+				const margin = b.size * 2;
+				if (b.x < -margin) b.x = w + margin;
+				if (b.x > w + margin) b.x = -margin;
+				if (b.y < -margin) b.y = h + margin;
+				if (b.y > h + margin) b.y = -margin;
+
+				drawButterfly(b);
+			}
+
+			animId = requestAnimationFrame(draw);
+		}
+
+		animId = requestAnimationFrame(draw);
+
+		return () => {
+			cancelAnimationFrame(animId);
+			window.removeEventListener('resize', resize);
+		};
+	});
+</script>
+
+<div class="bg-base-50 dark:bg-base-900 pointer-events-none fixed inset-0 -z-10">
+	<canvas
+		bind:this={canvas}
+		class="absolute inset-0 h-full w-full opacity-60 blur-[1.5px]"
+	></canvas>
+</div>

package/dist/themes/Butterflies.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Butterflies: import("svelte").Component<Record<string, never>, {}, "">;
+type Butterflies = ReturnType<typeof Butterflies>;
+export default Butterflies;

package/dist/themes/Fireflies.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { BROWSER as browser } from 'esm-env';
+
+	let canvas: HTMLCanvasElement | undefined = $state(undefined);
+
+	$effect(() => {
+		if (!canvas || !browser) return;
+
+		const ctx = canvas.getContext('2d')!;
+		let animId: number;
+
+		const COUNT = 50;
+		const DRIFT_SPEED = 15;
+		const PULSE_SPEED = 0.6;
+
+		interface Firefly {
+			x: number;
+			y: number;
+			vx: number;
+			vy: number;
+			phase: number;
+			pulseRate: number;
+			size: number;
+			hueShift: number;
+		}
+
+		let lastWidth = 0;
+		function resize() {
+			const w = window.innerWidth;
+			if (w === lastWidth) return;
+			lastWidth = w;
+			canvas!.width = w;
+			canvas!.height = window.screen.height;
+		}
+		resize();
+		window.addEventListener('resize', resize);
+
+		const flies: Firefly[] = Array.from({ length: COUNT }, () => ({
+			x: Math.random() * canvas!.width,
+			y: Math.random() * canvas!.height,
+			vx: (Math.random() - 0.5) * 2,
+			vy: (Math.random() - 0.5) * 2,
+			phase: Math.random() * Math.PI * 2,
+			pulseRate: PULSE_SPEED * (0.6 + Math.random() * 0.8),
+			size: 3 + Math.random() * 5,
+			hueShift: (Math.random() - 0.5) * 60 // -30 to +30 degrees
+		}));
+
+		const accentColor = getComputedStyle(document.documentElement)
+			.getPropertyValue('--color-accent-500')
+			.trim();
+
+		let lastTime = performance.now();
+
+		function draw(now: number) {
+			const dt = Math.min((now - lastTime) / 1000, 0.1);
+			lastTime = now;
+
+			const w = canvas!.width;
+			const h = canvas!.height;
+
+			ctx.clearRect(0, 0, w, h);
+
+			for (const fly of flies) {
+				fly.phase += fly.pulseRate * dt;
+				fly.x += fly.vx * DRIFT_SPEED * dt;
+				fly.y += fly.vy * DRIFT_SPEED * dt;
+
+				fly.vx += (Math.random() - 0.5) * 2 * dt;
+				fly.vy += (Math.random() - 0.5) * 2 * dt;
+				const len = Math.sqrt(fly.vx * fly.vx + fly.vy * fly.vy);
+				if (len > 1) {
+					fly.vx /= len;
+					fly.vy /= len;
+				}
+
+				if (fly.x < -40) fly.x = w + 40;
+				if (fly.x > w + 40) fly.x = -40;
+				if (fly.y < -40) fly.y = h + 40;
+				if (fly.y > h + 40) fly.y = -40;
+
+				const glow = (Math.sin(fly.phase) + 1) / 2;
+				const alpha = 0.05 + glow * 0.5;
+				const radius = fly.size * (0.5 + glow * 0.5);
+				const glowRadius = radius * 12;
+				const h_shift = fly.hueShift;
+
+				// Large soft glow
+				const gradient = ctx.createRadialGradient(fly.x, fly.y, 0, fly.x, fly.y, glowRadius);
+				gradient.addColorStop(
+					0,
+					accentColor
+						? `oklch(from ${accentColor} l c calc(h + ${h_shift}) / ${alpha * 0.4})`
+						: `rgba(255, 200, 50, ${alpha * 0.4})`
+				);
+				gradient.addColorStop(
+					0.4,
+					accentColor
+						? `oklch(from ${accentColor} l c calc(h + ${h_shift}) / ${alpha * 0.15})`
+						: `rgba(255, 200, 50, ${alpha * 0.15})`
+				);
+				gradient.addColorStop(
+					1,
+					accentColor
+						? `oklch(from ${accentColor} l c calc(h + ${h_shift}) / 0)`
+						: `rgba(255, 200, 50, 0)`
+				);
+				ctx.fillStyle = gradient;
+				ctx.fillRect(fly.x - glowRadius, fly.y - glowRadius, glowRadius * 2, glowRadius * 2);
+
+				// Bright core
+				ctx.beginPath();
+				ctx.arc(fly.x, fly.y, radius, 0, Math.PI * 2);
+				ctx.fillStyle = accentColor
+					? `oklch(from ${accentColor} calc(l * 1.4) c calc(h + ${h_shift}) / ${alpha})`
+					: `rgba(255, 230, 100, ${alpha})`;
+				ctx.fill();
+			}
+
+			animId = requestAnimationFrame(draw);
+		}
+
+		animId = requestAnimationFrame(draw);
+
+		return () => {
+			cancelAnimationFrame(animId);
+			window.removeEventListener('resize', resize);
+		};
+	});
+</script>
+
+<div class="bg-base-50 dark:bg-base-900 pointer-events-none fixed inset-0 -z-10">
+	<canvas bind:this={canvas} class="absolute inset-0 h-full w-full opacity-50"></canvas>
+</div>

package/dist/themes/Fireflies.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Fireflies: import("svelte").Component<Record<string, never>, {}, "">;
+type Fireflies = ReturnType<typeof Fireflies>;
+export default Fireflies;

package/dist/themes/Kaleidoscope.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { BROWSER as browser } from 'esm-env';
+
+	let canvas: HTMLCanvasElement | undefined = $state(undefined);
+
+	$effect(() => {
+		if (!canvas || !browser) return;
+
+		const ctx = canvas.getContext('2d')!;
+		let animId: number;
+
+		const SEGMENTS = 12;
+		const ROTATION_SPEED = 0.06;
+
+		let lastWidth = 0;
+		function resize() {
+			const w = window.innerWidth;
+			if (w === lastWidth) return;
+			lastWidth = w;
+			canvas!.width = w;
+			canvas!.height = window.screen.height;
+		}
+		resize();
+		window.addEventListener('resize', resize);
+
+		const accentColor = getComputedStyle(document.documentElement)
+			.getPropertyValue('--color-accent-500')
+			.trim();
+
+		// Animated blobs in normalized 0-1 space
+		const BLOB_COUNT = 20;
+		interface Blob {
+			x: number;
+			y: number;
+			vx: number;
+			vy: number;
+			size: number;
+			hueShift: number;
+			alpha: number;
+		}
+
+		const blobs: (Blob & { sharp?: boolean })[] = [
+			...Array.from({ length: BLOB_COUNT }, (): Blob => ({
+				x: Math.random(),
+				y: Math.random() * 0.8,
+				vx: (Math.random() - 0.5) * 0.04,
+				vy: (Math.random() - 0.5) * 0.04,
+				size: 0.04 + Math.random() * 0.1,
+				hueShift: (Math.random() - 0.5) * 80,
+				alpha: 0.15 + Math.random() * 0.35
+			})),
+			// Small sharp dots
+			...Array.from({ length: 10 }, () => ({
+				x: Math.random(),
+				y: Math.random() * 0.8,
+				vx: (Math.random() - 0.5) * 0.06,
+				vy: (Math.random() - 0.5) * 0.06,
+				size: 0.005 + Math.random() * 0.012,
+				hueShift: (Math.random() - 0.5) * 80,
+				alpha: 0.15 + Math.random() * 0.2,
+				sharp: true
+			}))
+		];
+
+		// Offscreen canvas for one triangle slice
+		const sliceCanvas = document.createElement('canvas');
+		const sliceCtx = sliceCanvas.getContext('2d')!;
+
+		let lastTime = performance.now();
+		let globalRotation = 0;
+
+		function renderSlice(r: number, dt: number) {
+			const segAngle = Math.PI / SEGMENTS; // half of full segment
+			const sliceW = Math.ceil(r);
+			const sliceH = Math.ceil(Math.sin(segAngle) * r);
+
+			sliceCanvas.width = sliceW;
+			sliceCanvas.height = sliceH;
+			sliceCtx.clearRect(0, 0, sliceW, sliceH);
+
+			// Clip to the triangle
+			sliceCtx.save();
+			sliceCtx.beginPath();
+			sliceCtx.moveTo(0, 0);
+			sliceCtx.lineTo(sliceW, 0);
+			sliceCtx.lineTo(Math.cos(segAngle) * r, Math.sin(segAngle) * r);
+			sliceCtx.closePath();
+			sliceCtx.clip();
+
+			for (const b of blobs) {
+				b.x += b.vx * dt;
+				b.y += b.vy * dt;
+				if (b.x < 0 || b.x > 1) b.vx *= -1;
+				if (b.y < 0 || b.y > 1) b.vy *= -1;
+				b.x = Math.max(0, Math.min(1, b.x));
+				b.y = Math.max(0, Math.min(1, b.y));
+
+				const px = b.x * sliceW;
+				const py = b.y * sliceH;
+				const br = b.size * sliceW;
+
+				if (b.sharp) {
+					sliceCtx.fillStyle = accentColor
+						? `oklch(from ${accentColor} calc(l * 1.4) c calc(h + ${b.hueShift}) / ${b.alpha})`
+						: `rgba(230, 210, 255, ${b.alpha})`;
+					sliceCtx.beginPath();
+					sliceCtx.arc(px, py, br, 0, Math.PI * 2);
+					sliceCtx.fill();
+				} else {
+					const g = sliceCtx.createRadialGradient(px, py, 0, px, py, br);
+					g.addColorStop(0, accentColor
+						? `oklch(from ${accentColor} calc(l * 1.2) c calc(h + ${b.hueShift}) / ${b.alpha})`
+						: `rgba(200, 150, 255, ${b.alpha})`);
+					g.addColorStop(0.5, accentColor
+						? `oklch(from ${accentColor} l c calc(h + ${b.hueShift}) / ${b.alpha * 0.3})`
+						: `rgba(200, 150, 255, ${b.alpha * 0.3})`);
+					g.addColorStop(1, 'transparent');
+					sliceCtx.fillStyle = g;
+					sliceCtx.fillRect(px - br, py - br, br * 2, br * 2);
+				}
+			}
+
+			sliceCtx.restore();
+			return { sliceW, sliceH };
+		}
+
+		function draw(now: number) {
+			const dt = Math.min((now - lastTime) / 1000, 0.1);
+			lastTime = now;
+
+			const w = canvas!.width;
+			const h = canvas!.height;
+			const cx = w / 2;
+			const cy = h / 2;
+			const maxR = Math.hypot(cx, cy);
+
+			globalRotation += ROTATION_SPEED * dt;
+
+			renderSlice(maxR, dt);
+
+			ctx.clearRect(0, 0, w, h);
+			ctx.save();
+			ctx.translate(cx, cy);
+			ctx.rotate(globalRotation);
+
+			const segAngle = (Math.PI * 2) / SEGMENTS;
+
+			for (let i = 0; i < SEGMENTS; i++) {
+				ctx.save();
+				ctx.rotate(segAngle * i);
+
+				// Normal slice
+				ctx.drawImage(sliceCanvas, 0, 0);
+
+				// Mirrored slice (flip along x-axis to fill the other half)
+				ctx.scale(1, -1);
+				ctx.drawImage(sliceCanvas, 0, 0);
+
+				ctx.restore();
+			}
+
+			ctx.restore();
+			animId = requestAnimationFrame(draw);
+		}
+
+		animId = requestAnimationFrame(draw);
+
+		return () => {
+			cancelAnimationFrame(animId);
+			window.removeEventListener('resize', resize);
+		};
+	});
+</script>
+
+<div class="pointer-events-none fixed inset-0 -z-10 bg-base-50 dark:bg-base-900">
+	<canvas bind:this={canvas} class="absolute inset-0 h-full w-full opacity-50"></canvas>
+</div>

package/dist/themes/Kaleidoscope.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Kaleidoscope: import("svelte").Component<Record<string, never>, {}, "">;
+type Kaleidoscope = ReturnType<typeof Kaleidoscope>;
+export default Kaleidoscope;