@leftium/logo 0.0.1

package/dist/LeftiumLogo.svelte

@@ -0,0 +1,502 @@
+<script module>
+	import { dev } from '$app/environment';
+
+	// Simple shared variable - no store needed!
+	let globalAnimated = !dev;
+
+	// Export control functions instead of the variable
+	export function toggleAnimation() {
+		globalAnimated = !globalAnimated;
+		updateAllInstances();
+	}
+
+	export function setAnimated(value: boolean) {
+		globalAnimated = value;
+		updateAllInstances();
+	}
+
+	// Keep track of all instances for updates
+	let instances = new Set<() => void>();
+
+	function updateAllInstances() {
+		instances.forEach((update) => update());
+	}
+
+	export function registerInstance(updateFn: () => void) {
+		instances.add(updateFn);
+		return () => instances.delete(updateFn);
+	}
+</script>
+
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
+	import { Ripples, type RipplesOptions } from './webgl-ripples/webgl-ripples.js';
+
+	import logoGlow from './assets/logo-parts/glow.svg';
+	import logoLigature from './assets/logo-parts/ligature.svg';
+	import logoShadow from './assets/logo-parts/shadow.svg';
+	import logoSquare from './assets/logo-parts/square.svg?inline';
+
+	interface Props {
+		size?: string;
+		toggleAnimationWithShift?: boolean;
+		ripplesOptions?: RipplesOptions;
+		boundingBox?: 'square' | 'default' | 'cropped' | 'encircled';
+		class?: string;
+		onClick?: (event: MouseEvent | KeyboardEvent) => void;
+		[key: string]: unknown; // Allow any additional props
+	}
+
+	let {
+		size = '100%',
+		toggleAnimationWithShift = false,
+		ripplesOptions: ripplesOptionsProp = {},
+		boundingBox = 'default',
+		class: className = '',
+		onClick = undefined,
+		...restProps
+	}: Props = $props();
+
+	// Use global animation state shared across ALL instances
+	let animated = $state(globalAnimated);
+
+	// Register for updates from other instances
+	let unregister = registerInstance(() => {
+		animated = globalAnimated;
+	});
+
+	// Clean up on destroy
+	onDestroy(unregister);
+
+	let ripples: Ripples | null;
+	let animatedElements: Element[];
+	let animate: (time: number) => void;
+
+	// Reactive effect to handle animation state changes from global store
+	$effect(() => {
+		if (animated) {
+			// Start animation - only if elements are available
+			if (animatedElements && animate) {
+				for (const el of animatedElements) {
+					(el as HTMLElement).style.transition = '';
+				}
+				requestAnimationFrame(animate);
+			}
+		} else {
+			// Stop animation - only if elements are available
+			if (animatedElements) {
+				if (ripples) {
+					ripples.destroy();
+					ripples = null;
+				}
+
+				// Reset transforms with smooth transition
+				for (const el of animatedElements) {
+					(el as HTMLElement).style.transition = 'transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
+					(el as HTMLElement).style.transform = 'translate(0%, 0%)';
+				}
+			}
+		}
+	});
+
+	const logoAnimation: Attachment = (element) => {
+		animatedElements = [...element.children].filter((child) => child.classList.contains('animate'));
+		const ripplesElement = element.getElementsByClassName('ripples')[0] as HTMLElement | undefined;
+
+		// Higher resolution for smaller sizes to avoid blurriness
+		// For small logos, use closer to 1:1 ratio, for large logos cap at 512
+		const elementSize = ripplesElement?.offsetWidth || 100;
+		const resolution = !ripplesElement ? 512 : Math.min(512, Math.max(128, elementSize * 0.8));
+
+		// Scale drop radius based on element size: 15px at 500px down to 2px at 62px
+		// Linear interpolation from 62px:2px to 800px:23.36px, capped at 20px
+		// Formula: 2 + ((elementSize - 62) / (800 - 62)) * (23.36 - 2)
+		const scaledDropRadius = Math.min(
+			20,
+			Math.max(2, 2 + ((elementSize - 62) / (800 - 62)) * 21.36)
+		);
+
+		// Scale wave propagation based on element size: 2.0 at 500px down to 0.2 at 125px
+		// Linear interpolation for sizes 500px down to 125px, then clamp at 0.2 for smaller
+		const scaledWavePropagation = Math.max(
+			0.2,
+			Math.min(2.0, 2.0 - ((500 - elementSize) / (500 - 125)) * 1.5)
+		);
+
+		const DEFAULT_RIPPLES_OPTIONS = {
+			resolution,
+			dropRadius: scaledDropRadius,
+			perturbance: 0.04,
+			// Ripple tuning parameters
+			wavePropagation: scaledWavePropagation,
+			dampening: 0.997 // Ripple dampening (0.999 = very long lasting, 0.995 = normal, 0.99 = quick fade)
+		};
+		const rippleOptions = { ...DEFAULT_RIPPLES_OPTIONS, ...ripplesOptionsProp };
+
+		// Set up ResizeObserver to handle component resizing
+		let resizeObserver: ResizeObserver | null = null;
+		let lastWidth = ripplesElement?.offsetWidth;
+		let lastHeight = ripplesElement?.offsetHeight;
+		let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+
+		if (ripplesElement && typeof ResizeObserver !== 'undefined') {
+			resizeObserver = new ResizeObserver(() => {
+				const currentWidth = ripplesElement.offsetWidth;
+				const currentHeight = ripplesElement.offsetHeight;
+
+				// Only recreate if size actually changed significantly (more than 5px)
+				const widthChanged = Math.abs(currentWidth - (lastWidth || 0)) > 5;
+				const heightChanged = Math.abs(currentHeight - (lastHeight || 0)) > 5;
+
+				if (widthChanged || heightChanged) {
+					lastWidth = currentWidth;
+					lastHeight = currentHeight;
+
+					// Debounce the recreation to avoid too many WebGL contexts
+					if (resizeTimeout) {
+						clearTimeout(resizeTimeout);
+					}
+
+					resizeTimeout = setTimeout(() => {
+						if (animated && ripplesElement) {
+							// Destroy old instance first
+							if (ripples) {
+								try {
+									ripples.destroy();
+								} catch (e) {
+									console.error('Error destroying ripples:', e);
+								}
+								ripples = null;
+							}
+
+							// Wait a frame before creating new instance to ensure cleanup
+							requestAnimationFrame(() => {
+								if (!ripples && animated && ripplesElement) {
+									// Higher resolution for smaller sizes to avoid blurriness
+									const newResolution = Math.min(512, Math.max(128, currentWidth * 0.8));
+									// Scale drop radius and wave propagation for new size
+									// Linear interpolation from 62px:2px to 800px:23.36px, capped at 20px
+									const newScaledDropRadius = Math.min(
+										20,
+										Math.max(2, 2 + ((currentWidth - 62) / (800 - 62)) * 21.36)
+									);
+									const newScaledWavePropagation = Math.max(
+										0.2,
+										Math.min(2.0, 2.0 - ((500 - currentWidth) / (500 - 125)) * 1.5)
+									);
+									const newRippleOptions = {
+										...rippleOptions,
+										resolution: newResolution,
+										dropRadius: newScaledDropRadius,
+										wavePropagation: newScaledWavePropagation
+									};
+
+									try {
+										ripples = new Ripples(ripplesElement, newRippleOptions);
+									} catch (e) {
+										console.error('Error creating ripples:', e);
+									}
+								}
+							});
+						}
+					}, 100); // 100ms debounce
+				}
+			});
+			resizeObserver.observe(ripplesElement);
+		}
+
+		let angle = $state(0);
+		let lastDropTime = $state(0);
+		let lastTime = 0;
+
+		animate = (time: number) => {
+			// Exit if we shouldn't be running
+			if (!animated) {
+				return;
+			}
+			const deltaTime = lastTime ? time - lastTime : 0;
+			lastTime = time;
+
+			// Create ripples if needed (and not already being created by resize)
+			if (animated && !ripples && ripplesElement && !resizeTimeout) {
+				try {
+					ripples = new Ripples(ripplesElement, rippleOptions);
+				} catch (e) {
+					console.error('Error creating ripples in animation loop:', e);
+				}
+			}
+
+			// Automatic drops (only when animated)
+			if (animated && lastDropTime !== null && ripples && ripplesElement) {
+				if (time - lastDropTime > 3000) {
+					lastDropTime = time;
+					const x = Math.random() * ripplesElement.offsetWidth;
+					const y = Math.random() * ripplesElement.offsetHeight;
+					// Use scaled drop radius for automatic drops
+					const currentSize = ripplesElement.offsetWidth;
+					const autoDropRadius = Math.min(
+						20,
+						Math.max(2, 2 + ((currentSize - 62) / (800 - 62)) * 21.36)
+					);
+					// Scale strength based on size - ensure minimum visibility for small sizes
+					const sizeFactor = Math.max(0.7, Math.min(1, currentSize / 200)); // Never below 70%
+					const baseStrength = 0.1 + Math.random() * 0.04;
+					const strength = Math.max(0.08, baseStrength * sizeFactor); // Minimum 0.08 for visibility
+					ripples.drop(x, y, autoDropRadius, strength);
+				}
+			}
+
+			// Animate ligature
+			angle += deltaTime;
+
+			// Original movement in 0-4 range
+			const origX = 2 + 2 * Math.cos(angle / 971 - Math.PI);
+			const origY = 2 + 2 * Math.sin(angle / 601 - Math.PI / 2);
+
+			// Rotate -45 degrees: transform the 4x4 square into a diamond
+			const dx = animated ? ((origX + origY) * Math.sqrt(2)) / 2 : 0;
+			const dy = animated ? ((-origX + origY) * Math.sqrt(2)) / 2 : 0;
+
+			// The animation percentages were designed for the full 800px canvas
+			// Now we need to scale them for each element's actual size
+			for (const el of animatedElements) {
+				if (el.classList.contains('shadow')) {
+					// Shadow is 540x766, need to scale movement to match original animation
+					// Original: 4% of 800px = 32px. For shadow: 32px / 540px = 5.93%
+					const scaleX = 800 / 540;
+					const scaleY = 800 / 766;
+					(el as HTMLElement).style.transform = `translate(${dx * scaleX}%, ${dy * scaleY}%)`;
+				} else if (el.classList.contains('ligature')) {
+					// Ligature is 440x666, need to scale movement to match original animation
+					// Original: 4% of 800px = 32px. For ligature: 32px / 440px = 7.27%
+					const scaleX = 800 / 440;
+					const scaleY = 800 / 666;
+					(el as HTMLElement).style.transform = `translate(${dx * scaleX}%, ${dy * scaleY}%)`;
+				} else {
+					// Default for any other animated elements
+					(el as HTMLElement).style.transform = `translate(${dx}%, ${dy}%)`;
+				}
+			}
+
+			// Only continue animation if animated
+			if (animated) {
+				requestAnimationFrame(animate);
+			}
+		};
+
+		// Start animation if initially animated
+		if (animated) {
+			requestAnimationFrame(animate);
+		}
+
+		return function () {
+			if (resizeTimeout) {
+				clearTimeout(resizeTimeout);
+			}
+			if (ripples) {
+				try {
+					ripples.destroy();
+				} catch (e) {
+					console.error('Error destroying ripples on cleanup:', e);
+				}
+			}
+			if (resizeObserver) {
+				resizeObserver.disconnect();
+			}
+		};
+	};
+
+	function handleClick(event: MouseEvent | KeyboardEvent) {
+		// Call external callback first if provided
+		if (onClick) {
+			onClick(event);
+		}
+
+		// For keyboard events, only respond to Enter key
+		if ('key' in event && event.key !== 'Enter') {
+			return;
+		}
+
+		// Shift key controls whether click drops or toggles animation.
+		if (toggleAnimationWithShift !== event.shiftKey) {
+			return;
+		}
+
+		// Update global state - affects ALL LeftiumLogo instances immediately
+		// The reactive effect above will handle the animation start/stop logic
+		toggleAnimation();
+	}
+</script>
+
+<logo-container style:--size={size} class="{boundingBox} {className}" role="none" {...restProps}>
+	<grid-logo {@attach logoAnimation}>
+		<img class="animate shadow" alt="" src={logoShadow} />
+		<img class="glow" alt="" src={logoGlow} />
+		<div
+			class="ripples square"
+			style:background-image={`url("${logoSquare}")`}
+			onclick={handleClick}
+			onkeydown={handleClick}
+			role="button"
+			tabindex="0"
+			aria-label="Toggle logo animation"
+		></div>
+		<img class="animate ligature" alt="" src={logoLigature} />
+	</grid-logo>
+</logo-container>
+
+<style>
+	/* Container that defines the bounding box */
+	logo-container {
+		display: inline-block;
+		position: relative;
+		width: var(--size);
+		aspect-ratio: 1;
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		overflow: visible;
+	}
+
+	/* Square mode - square container */
+	logo-container.square {
+		aspect-ratio: 1;
+	}
+
+	/* Default mode - square container */
+	logo-container.default {
+		aspect-ratio: 1;
+	}
+
+	/* Encircled mode - square container */
+	logo-container.encircled {
+		aspect-ratio: 1;
+	}
+
+	/* Cropped mode - match ellipse aspect ratio: 723.08875/812.58868 ≈ 0.8906 */
+	logo-container.cropped {
+		aspect-ratio: 0.8906;
+	}
+
+	/* Grid that holds all the logo elements */
+	grid-logo {
+		position: absolute;
+		display: grid;
+		place-items: center;
+		width: 100%; /* Default width, will be overridden for default/encircled modes */
+		aspect-ratio: 1;
+
+		img {
+			/* Prevent PicoCSS styles. */
+			max-width: unset !important;
+		}
+	}
+
+	/* Square bounding box mode - grid fills the container */
+	logo-container.square grid-logo {
+		width: 100%;
+		left: 0;
+		top: 0;
+	}
+
+	/* Default bounding box mode - grid is scaled down to leave some padding */
+	logo-container.default grid-logo {
+		/* Grid is 1/1.2519 = 79.88% of container to account for padding */
+		width: calc(100% / 1.2519);
+		/* Center within container */
+		left: calc((100% - 100% / 1.2519) / 2);
+		top: calc((100% - 100% / 1.2519) / 2);
+	}
+
+	/* Encircled bounding box mode - grid is scaled down more to leave full padding */
+	logo-container.encircled grid-logo {
+		/* Grid is 1/1.5037 = 66.5% of container (532/800) */
+		width: calc(100% / 1.5037);
+		/* Center within container */
+		left: calc((100% - 100% / 1.5037) / 2);
+		top: calc((100% - 100% / 1.5037) / 2);
+	}
+
+	/* Cropped bounding box mode - grid scaled and positioned to match reference SVG */
+	logo-container.cropped grid-logo {
+		/* Square is 1131.371px in a 1447px wide container = 78.2% */
+		width: 78.2%;
+		/* Position calculations from SVG transforms */
+		/* Final square position after transforms: x=122.18, y=247.73 */
+		/* Left offset: 122.18/1447 = 8.44% */
+		left: 8.44%;
+		/* Top offset: 247.73/1626.9 = 15.23% */
+		top: 15.23%;
+	}
+
+	/* Individual logo elements positioned relative to the square */
+	grid-logo > * {
+		position: absolute;
+		grid-column: 1 / 2;
+		grid-row: 1 / 2;
+		will-change: auto;
+	}
+
+	/* Square image - base element at 532x532 */
+	.ripples.square {
+		width: 100%;
+		aspect-ratio: 1;
+		background-size: contain;
+		background-position: center;
+		background-repeat: no-repeat;
+		z-index: 2;
+		cursor: pointer;
+		outline: none;
+
+		/* Prevent PicoCSS [role=button] styles. */
+		padding: 0 !important;
+		border: none !important;
+		border-radius: 0 !important;
+		outline: none !important;
+		box-shadow: none !important;
+	}
+
+	.ripples.square:focus {
+		outline: none;
+	}
+
+	/* Glow - 647x647, centered on square */
+	.glow {
+		width: calc(100% * 647 / 532);
+		height: calc(100% * 647 / 532);
+		/* Center it: (647-532)/2 = 57.5px offset at original scale */
+		left: calc(100% * -57.5 / 532);
+		top: calc(100% * -57.5 / 532);
+		z-index: 1;
+		/* Glow should not capture clicks */
+		pointer-events: none;
+	}
+
+	/* Shadow - 540x766, positioned to outline the ligature */
+	.shadow {
+		width: calc(100% * 540 / 532);
+		height: calc(100% * 766 / 532);
+		/* Shadow should be centered on ligature */
+		/* Ligature is 440x666, shadow is 540x766 */
+		/* Shadow is (540-440)/2 = 50px wider on each side, (766-666)/2 = 50px taller on each side */
+		left: calc(100% * (133 - 50) / 532); /* Center shadow on ligature */
+		top: calc(100% * (-66 - 50) / 532);
+		z-index: 0;
+		/* Shadow should not capture clicks */
+		pointer-events: none;
+	}
+
+	/* Ligature - 440x666, positioned based on SVG */
+	.ligature {
+		width: calc(100% * 440 / 532);
+		height: calc(100% * 666 / 532);
+		/* Ligature extends to the right and below the square */
+		/* Looking at the SVG path, the ligature starts at top-left and extends right and down */
+		left: calc(100% * 133.5 / 532);
+		top: calc(100% * -65.75 / 532);
+		z-index: 3;
+		pointer-events: none;
+	}
+</style>

package/dist/LeftiumLogo.svelte.d.ts

@@ -0,0 +1,16 @@
+export declare function toggleAnimation(): void;
+export declare function setAnimated(value: boolean): void;
+export declare function registerInstance(updateFn: () => void): () => boolean;
+import { type RipplesOptions } from './webgl-ripples/webgl-ripples.js';
+interface Props {
+    size?: string;
+    toggleAnimationWithShift?: boolean;
+    ripplesOptions?: RipplesOptions;
+    boundingBox?: 'square' | 'default' | 'cropped' | 'encircled';
+    class?: string;
+    onClick?: (event: MouseEvent | KeyboardEvent) => void;
+    [key: string]: unknown;
+}
+declare const LeftiumLogo: import("svelte").Component<Props, {}, "">;
+type LeftiumLogo = ReturnType<typeof LeftiumLogo>;
+export default LeftiumLogo;

package/dist/assets/favicon.svg

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="128"
+   height="128"
+   viewBox="0 0 128 128"
+   version="1.1"
+   id="svg1"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <linearGradient
+       xlink:href="#linearGradient1"
+       id="linearGradient2"
+       x1="-13953.743"
+       y1="20745.297"
+       x2="-13153.738"
+       y2="19945.293"
+       gradientUnits="userSpaceOnUse"
+       spreadMethod="pad"
+       gradientTransform="matrix(1.4378303,0,0,1.4378303,20080.608,-28687.206)" />
+    <linearGradient
+       id="linearGradient1">
+      <stop
+         style="stop-color:#0029c1;stop-opacity:1;"
+         offset="0"
+         id="stop1" />
+      <stop
+         style="stop-color:#3973ff;stop-opacity:1;"
+         offset="0.28999999"
+         id="stop3" />
+      <stop
+         style="stop-color:#0029c1;stop-opacity:1;"
+         offset="1"
+         id="stop2" />
+    </linearGradient>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter2"
+       x="-0.35644"
+       y="-0.13903579"
+       width="1.6523672"
+       height="1.2780716">
+      <feGaussianBlur
+         stdDeviation="44.27207"
+         id="feGaussianBlur2" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter3"
+       x="-0.10799999"
+       y="-0.108"
+       width="1.216"
+       height="1.216">
+      <feGaussianBlur
+         stdDeviation="50.911691"
+         id="feGaussianBlur3" />
+    </filter>
+  </defs>
+  <g
+     id="layer1">
+    <g
+       id="g1"
+       transform="translate(253.40376,284.58137)"
+       style="display:inline">
+      <g
+         id="g8"
+         style="display:inline"
+         transform="matrix(0.07868598,0,0,0.07868598,-236.035,-265.10778)">
+        <path
+           id="path2"
+           d="M 1052.0206,-70.521304 415.62473,565.8747 l 636.39587,636.396 m 0,-141.421 A 200.0002,200.0002 0 0 0 769.1778,778.00671 m -141.42104,141.421 a 200,200 0 0 0 0,282.84299"
+           style="display:inline;opacity:0.7;mix-blend-mode:normal;fill:none;stroke:#000000;stroke-width:200;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter2)" />
+        <rect
+           style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter3)"
+           id="rect2"
+           width="1131.371"
+           height="1131.3708"
+           x="-8.6700182"
+           y="0.25409326" />
+        <rect
+           style="fill:url(#linearGradient2);stroke:#ffffff;stroke-width:0;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect5345-1-4"
+           width="1626.7195"
+           height="1626.7192"
+           x="-220.73523"
+           y="-247.48486"
+           rx="222.70804" />
+        <path
+           id="path1"
+           d="M 949.57704,-166.14889 217.55333,565.87478 949.57704,1297.8984 m -0.8134,-161.8586 A 230.05284,230.05284 0 0 0 623.41984,810.69599 M 462.37465,971.74111 a 230.05284,230.05284 0 0 0 0,325.34389"
+           style="display:inline;fill:none;stroke:#ffffff;stroke-width:230.053;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/assets/logo-parts/glow.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1375.7469"
+   height="1375.7469"
+   viewBox="0 0 1375.7469 1375.7469"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter3"
+       x="-0.10799999"
+       y="-0.108"
+       width="1.216"
+       height="1.216">
+      <feGaussianBlur
+         stdDeviation="50.911691"
+         id="feGaussianBlur3" />
+    </filter>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-122.54569,-162.64743)">
+    <g
+       id="g1"
+       transform="translate(253.40376,284.58137)"
+       style="display:inline">
+      <g
+         id="g8"
+         style="display:inline">
+        <rect
+           style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter3)"
+           id="rect2"
+           width="1131.371"
+           height="1131.3708"
+           x="-8.6700182"
+           y="0.25409326" />
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/assets/logo-parts/ligature.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="935.01953"
+   height="1414.2136"
+   viewBox="0 0 935.01953 1414.2136"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-527.92273,-143.3493)">
+    <g
+       id="g1"
+       transform="translate(253.40376,284.58137)"
+       style="display:inline">
+      <g
+         id="g8"
+         style="display:inline">
+        <path
+           id="path1"
+           d="m 1305.7402,214.05999 -636.39613,636.3961 636.39613,636.39611 m -0.7071,-140.7143 a 200,200 0 0 0 -282.8427,-282.8427 m -140.00713,140.0071 a 200,200 0 0 0 0,282.8427"
+           style="display:inline;fill:none;stroke:#ffffff;stroke-width:200;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           transform="translate(-253.40376,-284.58137)" />
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/assets/logo-parts/shadow.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1148.1566"
+   height="1626.7194"
+   viewBox="0 0 1148.1566 1626.7194"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter2"
+       x="-0.35644"
+       y="-0.13903579"
+       width="1.6523672"
+       height="1.2780716">
+      <feGaussianBlur
+         stdDeviation="44.27207"
+         id="feGaussianBlur2" />
+    </filter>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-421.35417,-37.096423)">
+    <g
+       id="g1"
+       transform="translate(253.40376,284.58137)"
+       style="display:inline">
+      <g
+         id="g8"
+         style="display:inline">
+        <path
+           id="path2"
+           d="M 1052.0206,-70.521304 415.62473,565.8747 l 636.39587,636.396 m 0,-141.421 A 200.0002,200.0002 0 0 0 769.1778,778.00671 m -141.42104,141.421 a 200,200 0 0 0 0,282.84299"
+           style="display:inline;opacity:0.7;mix-blend-mode:normal;fill:none;stroke:#000000;stroke-width:200;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter2)" />
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/assets/logo-parts/square.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1131.371"
+   height="1131.3708"
+   viewBox="0 0 1131.371 1131.3708"
+   version="1.1"
+   id="svg1"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <linearGradient
+       id="linearGradient2"
+       x1="-13953.743"
+       y1="20745.297"
+       x2="-13153.738"
+       y2="19945.293"
+       gradientUnits="userSpaceOnUse"
+       spreadMethod="pad"
+       gradientTransform="translate(14110.759,-19779.355)">
+      <stop
+         style="stop-color:#0029c1;stop-opacity:1;"
+         offset="0"
+         id="stop1" />
+      <stop
+         style="stop-color:#3973ff;stop-opacity:1;"
+         offset="0.28999999"
+         id="stop3" />
+      <stop
+         style="stop-color:#0029c1;stop-opacity:1;"
+         offset="1"
+         id="stop2" />
+    </linearGradient>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-244.73374,-284.83546)">
+    <g
+       id="g1"
+       transform="translate(253.40376,284.58137)"
+       style="display:inline">
+      <g
+         id="g8"
+         style="display:inline">
+        <rect
+           style="fill:url(#linearGradient2);stroke:#ffffff;stroke-width:0;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect5345-1-4"
+           width="1131.371"
+           height="1131.3708"
+           x="-8.6700182"
+           y="0.25409326" />
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import LeftiumLogo from './LeftiumLogo.svelte';
+import toggleAnimation from './LeftiumLogo.svelte';
+import setAnimated from './LeftiumLogo.svelte';
+import favicon from './assets/favicon.svg';
+export { LeftiumLogo, toggleAnimation, setAnimated, favicon };

package/dist/index.js

@@ -0,0 +1,6 @@
+// Reexport your entry components here
+import LeftiumLogo from './LeftiumLogo.svelte';
+import toggleAnimation from './LeftiumLogo.svelte';
+import setAnimated from './LeftiumLogo.svelte';
+import favicon from './assets/favicon.svg';
+export { LeftiumLogo, toggleAnimation, setAnimated, favicon };

package/dist/webgl-ripples/webgl-ripples.d.ts

@@ -0,0 +1,22 @@
+export interface RipplesOptions {
+	imageUrl?: string | null;
+	resolution?: number;
+	dropRadius?: number;
+	perturbance?: number;
+	interactive?: boolean;
+	crossOrigin?: string;
+}
+
+export declare class Ripples {
+	constructor(el: string | HTMLElement, options?: RipplesOptions);
+	drop(x: number, y: number, radius: number, strength: number): void;
+	destroy(): void;
+	pause(): void;
+	play(): void;
+	set(property: string, value: any): void;
+	updateSize(): void;
+}
+
+export default Ripples;
+
+export declare function isWebGLSupported(): boolean;

package/dist/webgl-ripples/webgl-ripples.js

@@ -0,0 +1 @@
+const isBrowser="undefined"!=typeof window&&"undefined"!=typeof document;let gl=null,config=null,transparentPixels=null;function isPercentage(e){return"%"===e[e.length-1]}function loadConfig(){if(!isBrowser)return null;const e=document.createElement("canvas");if(gl=e.getContext("webgl")||e.getContext("experimental-webgl"),!gl)return null;const t={};if(["OES_texture_float","OES_texture_half_float","OES_texture_float_linear","OES_texture_half_float_linear"].forEach(e=>{const i=gl.getExtension(e);i&&(t[e]=i)}),!t.OES_texture_float)return null;const i=[];function r(e,i,r){const n="OES_texture_"+e,s=n+"_linear",o=s in t,a=[n];return o&&a.push(s),{type:i,arrayType:r,linearSupport:o,extensions:a}}i.push(r("float",gl.FLOAT,Float32Array)),t.OES_texture_half_float&&i.push(r("half_float",t.OES_texture_half_float.HALF_FLOAT_OES,null));const n=gl.createTexture(),s=gl.createFramebuffer();gl.bindFramebuffer(gl.FRAMEBUFFER,s),gl.bindTexture(gl.TEXTURE_2D,n),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);let o=null;for(let e=0;e<i.length;e++)if(gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,32,32,0,gl.RGBA,i[e].type,null),gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,n,0),gl.checkFramebufferStatus(gl.FRAMEBUFFER)===gl.FRAMEBUFFER_COMPLETE){o=i[e];break}return o}function createImageData(e,t){if(!isBrowser)return null;try{return new ImageData(e,t)}catch{return document.createElement("canvas").getContext("2d").createImageData(e,t)}}function translateBackgroundPosition(e){const t=e.split(" ");if(1!==t.length)return t.map(t=>{switch(e){case"center":return"50%";case"top":case"left":return"0";case"right":case"bottom":return"100%";default:return t}});switch(e){case"center":return["50%","50%"];case"top":return["50%","0"];case"bottom":return["50%","100%"];case"left":return["0","50%"];case"right":return["100%","50%"];default:return[e,"50%"]}}function createProgram(e,t){function i(e,t){const i=gl.createShader(e);if(gl.shaderSource(i,t),gl.compileShader(i),!gl.getShaderParameter(i,gl.COMPILE_STATUS))throw new Error("compile error: "+gl.getShaderInfoLog(i));return i}const r={};if(r.id=gl.createProgram(),gl.attachShader(r.id,i(gl.VERTEX_SHADER,e)),gl.attachShader(r.id,i(gl.FRAGMENT_SHADER,t)),gl.linkProgram(r.id),!gl.getProgramParameter(r.id,gl.LINK_STATUS))throw new Error("link error: "+gl.getProgramInfoLog(r.id));r.uniforms={},r.locations={},gl.useProgram(r.id),gl.enableVertexAttribArray(0);let n,s,o=/uniform (\w+) (\w+)/g,a=e+t;for(;null!=(n=o.exec(a));)s=n[2],r.locations[s]=gl.getUniformLocation(r.id,s);return r}function bindTexture(e,t){gl.activeTexture(gl.TEXTURE0+(t||0)),gl.bindTexture(gl.TEXTURE_2D,e)}function extractUrl(e){const t=/url\(["']?([^"']*)["']?\)/.exec(e);return null==t?null:t[1]}function isDataUri(e){return e.match(/^data:/)}isBrowser&&(config=loadConfig(),transparentPixels=createImageData(32,32));const DEFAULTS={imageUrl:null,dropRadius:15,perturbance:.04,resolution:512,interactive:!0,crossOrigin:"",wavePropagation:2,dampening:.997};class Ripples{constructor(e,t){if(!isBrowser)return console.warn("Ripples: Cannot initialize in non-browser environment"),void(this.destroyed=!0);if(this.el="string"==typeof e?document.querySelector(e):e,!this.el)return void console.error("Ripples: Element not found.",e);this.options={...DEFAULTS,...t},this.interactive=this.options.interactive,this.resolution=this.options.resolution,this.textureDelta=new Float32Array([1/this.resolution,1/this.resolution]),this.perturbance=this.options.perturbance,this.dropRadius=this.options.dropRadius,this.crossOrigin=this.options.crossOrigin,this.imageUrl=this.options.imageUrl;const i=this.el.clientWidth,r=this.el.clientHeight;if(0===i||0===r)return console.warn("Ripples: Element has zero dimensions. Deferring initialization."),this.pendingInitialization=!0,this.destroyed=!1,this.visible=!1,this.running=!1,this.inited=!1,void this.observeVisibility();const n=document.createElement("canvas");if(n.width=i,n.height=r,this.canvas=n,this.canvas.style.position="absolute",this.canvas.style.inset=0,0===n.width||0===n.height)return console.warn("Ripples: Canvas has zero dimensions. Deferring initialization."),this.pendingInitialization=!0,this.destroyed=!1,this.visible=!1,this.running=!1,this.inited=!1,void this.observeVisibility();if(this.el.append(n),this.context=gl=n.getContext("webgl")||n.getContext("experimental-webgl"),!this.context)return console.error("Ripples: WebGL is not supported by your browser or is disabled."),void(this.destroyed=!0);config&&config.extensions&&config.extensions.forEach(e=>{gl.getExtension(e)}),this.abortController=new AbortController;const s=this.signal=this.abortController.signal;this.updateSize=this.updateSize.bind(this),window.addEventListener("resize",this.updateSize,{signal:s}),this.textures=[],this.framebuffers=[],this.bufferWriteIndex=0,this.bufferReadIndex=1;const o=config?config.arrayType:null,a=o?new o(this.resolution*this.resolution*4):null;for(let e=0;e<2;e++){const e=gl.createTexture(),t=gl.createFramebuffer();gl.bindFramebuffer(gl.FRAMEBUFFER,t),gl.bindTexture(gl.TEXTURE_2D,e),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,config&&config.linearSupport?gl.LINEAR:gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,config&&config.linearSupport?gl.LINEAR:gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,this.resolution,this.resolution,0,gl.RGBA,config&&config.type||gl.UNSIGNED_BYTE,a),gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,e,0),this.textures.push(e),this.framebuffers.push(t)}this.quad=gl.createBuffer(),gl.bindBuffer(gl.ARRAY_BUFFER,this.quad),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,1,1,-1,1]),gl.STATIC_DRAW),this.initShaders(),this.initTexture(),this.setTransparentTexture(),this.originalCssBackgroundImage=getComputedStyle(this.el).backgroundImage,this.originalInlineCss=this.el.style.backgroundImage,this.loadImage(),gl.clearColor(0,0,0,0),gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA),this.visible=!0,this.running=!0,this.inited=!0,this.destroyed=!1,this.setupPointerEvents(),this.animationId=null;const l=()=>{this.destroyed||(this.step(),this.running||this.needsRender?this.animationId=requestAnimationFrame(l):this.animationId=null)};return this.animationId=requestAnimationFrame(l),this}observeVisibility(){isBrowser&&this.el&&("undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{if(this.pendingInitialization){const e=this.el.clientWidth,t=this.el.clientHeight;e>0&&t>0&&this.completeInitialization()}else this.inited&&this.canvas&&this.updateSize()}),this.resizeObserver.observe(this.el)),"undefined"!=typeof IntersectionObserver&&(this.intersectionObserver=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting&&this.pendingInitialization){const e=this.el.clientWidth,t=this.el.clientHeight;e>0&&t>0&&this.completeInitialization()}})}),this.intersectionObserver.observe(this.el)),this.resizeObserver||this.intersectionObserver||(this.visibilityCheckInterval=setInterval(()=>{if(this.pendingInitialization){const e=this.el.clientWidth,t=this.el.clientHeight;e>0&&t>0&&this.completeInitialization()}},500)))}completeInitialization(){if(!this.pendingInitialization||this.inited)return;console.log("Ripples: Element now visible, completing initialization."),this.pendingInitialization=!1,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityCheckInterval&&(clearInterval(this.visibilityCheckInterval),this.visibilityCheckInterval=null);const e=this.options,t=this.el;Object.assign(this,new Ripples(t,e))}setupPointerEvents(){const e=()=>{const e=Math.max(this.el.clientWidth,this.el.clientHeight),t=Math.max(1,150/e);return Math.min(.04,.01*t)},t=t=>{if(this.visible&&this.running&&this.interactive){const i=t.changedTouches,r=e();for(let e=0;e<i.length;e++)this.dropAtPointer(i[e],1*this.dropRadius,r)}},i=this.signal;this.el.addEventListener("mousemove",t=>{this.visible&&this.running&&this.interactive&&this.dropAtPointer(t,1*this.dropRadius,e())},{signal:i}),this.el.addEventListener("touchmove",t,{signal:i,passive:!1}),this.el.addEventListener("touchstart",t,{signal:i,passive:!0}),this.el.addEventListener("mousedown",e=>{this.visible&&this.running&&this.interactive&&this.dropAtPointer(e,1.5*this.dropRadius,.14)},{signal:i})}loadImage(){gl=this.context;const e=this.imageUrl||extractUrl(this.originalCssBackgroundImage)||extractUrl(getComputedStyle(this.el).backgroundImage);if(e==this.imageSource)return;if(this.imageSource=e,!this.imageSource)return void this.setTransparentTexture();const t=new Image;t.onload=()=>{function e(e){return!(e&e-1)}gl=this.context;const i=e(t.width)&&e(t.height)?gl.REPEAT:gl.CLAMP_TO_EDGE;gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,i),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,i),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,t),this.backgroundWidth=t.width,this.backgroundHeight=t.height},t.onerror=()=>{gl=this.context,this.setTransparentTexture()},t.crossOrigin=isDataUri(this.imageSource)?null:this.crossOrigin,t.src=this.imageSource}step(){this.pendingInitialization||this.destroyed||(gl=this.context,gl&&this.canvas&&0!==this.canvas.width&&0!==this.canvas.height&&this.visible&&(this.computeTextureBoundaries(),this.running&&(this.update(),this.render())))}drawQuad(){gl.bindBuffer(gl.ARRAY_BUFFER,this.quad),gl.vertexAttribPointer(0,2,gl.FLOAT,!1,0,0),gl.drawArrays(gl.TRIANGLE_FAN,0,4)}render(){gl&&this.canvas&&0!==this.canvas.width&&0!==this.canvas.height&&(gl.bindFramebuffer(gl.FRAMEBUFFER,null),gl.viewport(0,0,this.canvas.width,this.canvas.height),gl.enable(gl.BLEND),gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT),gl.useProgram(this.renderProgram.id),bindTexture(this.backgroundTexture,0),bindTexture(this.textures[0],1),gl.uniform1f(this.renderProgram.locations.perturbance,this.perturbance),gl.uniform2fv(this.renderProgram.locations.topLeft,this.renderProgram.uniforms.topLeft),gl.uniform2fv(this.renderProgram.locations.bottomRight,this.renderProgram.uniforms.bottomRight),gl.uniform2fv(this.renderProgram.locations.containerRatio,this.renderProgram.uniforms.containerRatio),gl.uniform1i(this.renderProgram.locations.samplerBackground,0),gl.uniform1i(this.renderProgram.locations.samplerRipples,1),this.drawQuad(),gl.disable(gl.BLEND))}update(){gl&&0!==this.resolution&&(gl.viewport(0,0,this.resolution,this.resolution),gl.bindFramebuffer(gl.FRAMEBUFFER,this.framebuffers[this.bufferWriteIndex]),bindTexture(this.textures[this.bufferReadIndex]),gl.useProgram(this.updateProgram.id),gl.uniform1f(this.updateProgram.locations.wavePropagation,this.options.wavePropagation),gl.uniform1f(this.updateProgram.locations.dampening,this.options.dampening),this.drawQuad(),this.swapBufferIndices())}swapBufferIndices(){this.bufferWriteIndex=1-this.bufferWriteIndex,this.bufferReadIndex=1-this.bufferReadIndex}computeTextureBoundaries(){const e=getComputedStyle(this.el),t=e.backgroundSize,i=e.backgroundAttachment,r=translateBackgroundPosition(e.backgroundPosition);let n,s,o;if("fixed"==i)n={left:window.pageXOffset,top:window.pageYOffset},n.width=window.innerWidth,n.height=window.innerHeight;else{const e=this.el.getBoundingClientRect();n={left:e.left+window.pageXOffset,top:e.top+window.pageYOffset},n.width=this.el.clientWidth,n.height=this.el.clientHeight}if("cover"==t){const e=Math.max(n.width/this.backgroundWidth,n.height/this.backgroundHeight);s=this.backgroundWidth*e,o=this.backgroundHeight*e}else if("contain"==t){const e=Math.min(n.width/this.backgroundWidth,n.height/this.backgroundHeight);s=this.backgroundWidth*e,o=this.backgroundHeight*e}else{const e=t.split(" ");s=e[0]||"",o=e[1]||s,isPercentage(s)?s=n.width*parseFloat(s)/100:"auto"!=s&&(s=parseFloat(s)),isPercentage(o)?o=n.height*parseFloat(o)/100:"auto"!=o&&(o=parseFloat(o)),"auto"==s&&"auto"==o?(s=this.backgroundWidth,o=this.backgroundHeight):("auto"==s&&(s=this.backgroundWidth*(o/this.backgroundHeight)),"auto"==o&&(o=this.backgroundHeight*(s/this.backgroundWidth)))}let a=r[0],l=r[1];a=isPercentage(a)?n.left+(n.width-s)*parseFloat(a)/100:n.left+parseFloat(a),l=isPercentage(l)?n.top+(n.height-o)*parseFloat(l)/100:n.top+parseFloat(l);const g=this.el.getBoundingClientRect(),h=g.left+window.pageXOffset,d=g.top+window.pageYOffset;this.renderProgram.uniforms.topLeft=new Float32Array([(h-a)/s,(d-l)/o]),this.renderProgram.uniforms.bottomRight=new Float32Array([this.renderProgram.uniforms.topLeft[0]+this.el.clientWidth/s,this.renderProgram.uniforms.topLeft[1]+this.el.clientHeight/o]);const c=Math.max(this.canvas.width,this.canvas.height);this.renderProgram.uniforms.containerRatio=new Float32Array([this.canvas.width/c,this.canvas.height/c])}initShaders(){if(!gl)return;const e=["attribute vec2 vertex;","varying vec2 coord;","void main() {","coord = vertex * 0.5 + 0.5;","gl_Position = vec4(vertex, 0.0, 1.0);","}"].join("\n");this.dropProgram=createProgram(e,["precision highp float;","const float PI = 3.141592653589793;","uniform sampler2D texture;","uniform vec2 center;","uniform float radius;","uniform float strength;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);","drop = 0.5 - cos(drop * PI) * 0.5;","info.r += drop * strength;","gl_FragColor = info;","}"].join("\n")),this.updateProgram=createProgram(e,["precision highp float;","uniform sampler2D texture;","uniform vec2 delta;","uniform float wavePropagation;","uniform float dampening;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","vec2 dx = vec2(delta.x, 0.0);","vec2 dy = vec2(0.0, delta.y);","// Detect edges and apply boundary conditions","float edgeFactor = 1.0;","if (coord.x <= delta.x || coord.x >= 1.0 - delta.x ||","    coord.y <= delta.y || coord.y >= 1.0 - delta.y) {","    edgeFactor = 0.95; // Dampen waves near edges more aggressively","}","float average = (","texture2D(texture, coord - dx).r +","texture2D(texture, coord - dy).r +","texture2D(texture, coord + dx).r +","texture2D(texture, coord + dy).r",") * 0.25;","// Wave propagation and dampening with configurable parameters","info.g += (average - info.r) * wavePropagation;","info.g *= dampening * edgeFactor;","info.r += info.g;","// Clamp values to prevent overflow artifacts","info.r = clamp(info.r, -1.0, 1.0);","info.g = clamp(info.g, -1.0, 1.0);","gl_FragColor = info;","}"].join("\n")),gl.uniform2fv(this.updateProgram.locations.delta,this.textureDelta),gl.uniform1f(this.updateProgram.locations.wavePropagation,this.options.wavePropagation),gl.uniform1f(this.updateProgram.locations.dampening,this.options.dampening),this.renderProgram=createProgram(["precision highp float;","attribute vec2 vertex;","uniform vec2 topLeft;","uniform vec2 bottomRight;","uniform vec2 containerRatio;","varying vec2 ripplesCoord;","varying vec2 backgroundCoord;","void main() {","backgroundCoord = mix(topLeft, bottomRight, vertex * 0.5 + 0.5);","backgroundCoord.y = 1.0 - backgroundCoord.y;","ripplesCoord = vec2(vertex.x, -vertex.y) * containerRatio * 0.5 + 0.5;","gl_Position = vec4(vertex.x, -vertex.y, 0.0, 1.0);","}"].join("\n"),["precision highp float;","uniform sampler2D samplerBackground;","uniform sampler2D samplerRipples;","uniform vec2 delta;","uniform float perturbance;","varying vec2 ripplesCoord;","varying vec2 backgroundCoord;","void main() {","float height = texture2D(samplerRipples, ripplesCoord).r;","// Sample neighboring pixels for calculating normals","vec2 texelSize = delta;","float heightX = texture2D(samplerRipples, clamp(ripplesCoord + vec2(texelSize.x, 0.0), 0.0, 1.0)).r;","float heightY = texture2D(samplerRipples, clamp(ripplesCoord + vec2(0.0, texelSize.y), 0.0, 1.0)).r;","vec3 dx = vec3(texelSize.x, heightX - height, 0.0);","vec3 dy = vec3(0.0, heightY - height, texelSize.y);","vec2 offset = -normalize(cross(dy, dx)).xz;","// Apply edge fading to reduce artifacts at boundaries","float edgeFade = 1.0;","float edgeDistance = 0.05;","edgeFade *= smoothstep(0.0, edgeDistance, ripplesCoord.x);","edgeFade *= smoothstep(0.0, edgeDistance, ripplesCoord.y);","edgeFade *= smoothstep(0.0, edgeDistance, 1.0 - ripplesCoord.x);","edgeFade *= smoothstep(0.0, edgeDistance, 1.0 - ripplesCoord.y);","float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0) * edgeFade;","gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance * edgeFade) + specular;","}"].join("\n")),gl.uniform2fv(this.renderProgram.locations.delta,this.textureDelta)}initTexture(){gl&&(this.backgroundTexture=gl.createTexture(),gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture),gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR))}setTransparentTexture(){gl&&(gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,transparentPixels))}dropAtPointer(e,t,i){if(!this.canvas||this.pendingInitialization)return;const r=this.canvas.getBoundingClientRect();let n,s;void 0!==e.clientX?(n=e.clientX-r.left,s=e.clientY-r.top):(n=e.pageX-(r.left+window.pageXOffset),s=e.pageY-(r.top+window.pageYOffset)),n<0||n>r.width||s<0||s>r.height||(this.canvas.width===r.width&&this.canvas.height===r.height||(n*=this.canvas.width/r.width,s*=this.canvas.height/r.height),this.drop(n,s,t,i))}drop(e,t,i,r){if(gl=this.context,!gl)return;const n=this.el.clientWidth,s=this.el.clientHeight,o=Math.max(n,s);i/=o;const a=new Float32Array([(2*e-n)/o,(s-2*t)/o]);gl.viewport(0,0,this.resolution,this.resolution),gl.bindFramebuffer(gl.FRAMEBUFFER,this.framebuffers[this.bufferWriteIndex]),bindTexture(this.textures[this.bufferReadIndex]),gl.useProgram(this.dropProgram.id),gl.uniform2fv(this.dropProgram.locations.center,a),gl.uniform1f(this.dropProgram.locations.radius,i),gl.uniform1f(this.dropProgram.locations.strength,r),this.drawQuad(),this.swapBufferIndices()}updateSize(){const e=this.el.clientWidth,t=this.el.clientHeight;e===this.canvas.width&&t===this.canvas.height||(this.canvas.width=e,this.canvas.height=t)}destroy(){this.destroyed=!0,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityCheckInterval&&(clearInterval(this.visibilityCheckInterval),this.visibilityCheckInterval=null),this.abortController&&this.abortController.abort(),this.canvas&&this.canvas.remove();const e=this.context;e&&(this.quad&&e.deleteBuffer(this.quad),this.dropProgram&&e.deleteProgram(this.dropProgram.id),this.updateProgram&&e.deleteProgram(this.updateProgram.id),this.renderProgram&&e.deleteProgram(this.renderProgram.id),this.backgroundTexture&&e.deleteTexture(this.backgroundTexture),this.textures&&this.textures.forEach(t=>e.deleteTexture(t)),this.framebuffers&&this.framebuffers.forEach(t=>e.deleteFramebuffer(t)),gl===e&&(gl=null),this.context=null)}pause(){this.destroyed||(this.running=!1,this.needsRender=!0,setTimeout(()=>{this.needsRender=!1},50))}play(){if(!this.destroyed&&(this.running=!0,!this.animationId)){const e=()=>{this.destroyed||(this.step(),this.running||this.needsRender?this.animationId=requestAnimationFrame(e):this.animationId=null)};this.animationId=requestAnimationFrame(e)}}reset(){if(this.destroyed||!gl)return;gl=this.context;const e=config?config.arrayType:null,t=e?new e(this.resolution*this.resolution*4):null;for(let e=0;e<2;e++)gl.bindTexture(gl.TEXTURE_2D,this.textures[e]),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,this.resolution,this.resolution,0,gl.RGBA,config&&config.type||gl.UNSIGNED_BYTE,t)}set(e,t){if(!this.destroyed)switch(e){case"dropRadius":case"perturbance":case"interactive":case"crossOrigin":this[e]=t,this.options[e]=t;break;case"imageUrl":this.imageUrl=t,this.options.imageUrl=t,this.loadImage();break;case"resolution":console.warn("Ripples: Changing 'resolution' dynamically is not supported. Please re-initialize the Ripples instance.");break;default:console.warn(`Ripples: Property "${e}" is not a settable option.`)}}}export{Ripples};export default Ripples;export const isWebGLSupported=()=>!!isBrowser&&null!==config;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@leftium/logo",
+  "version": "0.0.1",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "!dist/webgl-ripples/webgl-ripples-original.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/kit": "^2.22.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "publint": "^0.3.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^7.0.4"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  }
+}