fancy-ui-svelte 0.2.1

package/dist/fancy-ui/fluid-cursor/FluidCursor.svelte.d.ts

@@ -0,0 +1,25 @@
+interface ColorRGB {
+    r: number;
+    g: number;
+    b: number;
+}
+interface Props {
+    simResolution?: number;
+    dyeResolution?: number;
+    captureResolution?: number;
+    densityDissipation?: number;
+    velocityDissipation?: number;
+    pressure?: number;
+    pressureIterations?: number;
+    curl?: number;
+    splatRadius?: number;
+    splatForce?: number;
+    shading?: boolean;
+    colorUpdateSpeed?: number;
+    backColor?: ColorRGB;
+    transparent?: boolean;
+    class?: string;
+}
+declare const FluidCursor: import("svelte").Component<Props, {}, "">;
+type FluidCursor = ReturnType<typeof FluidCursor>;
+export default FluidCursor;

package/dist/fancy-ui/fluid-cursor/FluidCursor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/fancy-ui/fluid-cursor/FluidCursor.test.js

@@ -0,0 +1,41 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import FluidCursor from "./FluidCursor.svelte";
+describe("FluidCursor", () => {
+    afterEach(cleanup);
+    it("renders a container div", () => {
+        const { container } = render(FluidCursor);
+        const div = container.firstElementChild;
+        expect(div).toBeInTheDocument();
+    });
+    it("renders a canvas element", () => {
+        const { container } = render(FluidCursor);
+        const canvas = container.querySelector("canvas");
+        expect(canvas).toBeInTheDocument();
+    });
+    it('canvas has id="fluid"', () => {
+        const { container } = render(FluidCursor);
+        const canvas = container.querySelector("canvas#fluid");
+        expect(canvas).toBeInTheDocument();
+    });
+    it("container has pointer-events-none class", () => {
+        const { container } = render(FluidCursor);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("pointer-events-none");
+    });
+    it("container has fixed positioning class", () => {
+        const { container } = render(FluidCursor);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("fixed");
+    });
+    it("container has z-50 class", () => {
+        const { container } = render(FluidCursor);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("z-50");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(FluidCursor, { props: { class: "my-fluid" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-fluid");
+    });
+});

package/dist/fancy-ui/fluid-cursor/README.md

@@ -0,0 +1,34 @@
+# FluidCursor
+
+A WebGL-based fluid simulation that follows the cursor, creating beautiful flowing color effects.
+
+## Features
+
+- WebGL2 fluid simulation with WebGL1 fallback
+- Mouse and touch support
+- Configurable simulation parameters
+- Transparent background support
+- Automatic canvas resizing
+
+## Implementation Notes
+
+### Svelte 5 Implementation
+
+1. **Lifecycle**: Used `onMount` with cleanup return instead of Vue's `onMounted` + `watch`
+2. **Refs**: Used `bind:this` for canvas reference instead of Vue's `ref()`
+3. **Props**: Used Svelte 5 `$props()` syntax with defaults
+4. **Cleanup**: Properly cancel animation frame and remove event listeners on unmount
+
+### WebGL Implementation
+
+The component implements a full Navier-Stokes fluid simulation with:
+- Curl/vorticity computation
+- Pressure solving with iterative Jacobi method
+- Advection for both velocity and dye
+- Gradient subtraction for incompressible flow
+
+### Event Handling
+
+- Window-level mouse/touch events for full-screen tracking
+- First-move handlers to start animation only when user interacts
+- Proper cleanup of all event listeners on component unmount

package/dist/fancy-ui/fluid-cursor/index.d.ts

@@ -0,0 +1 @@
+export { default as FluidCursor } from "./FluidCursor.svelte";

package/dist/fancy-ui/fluid-cursor/index.js

@@ -0,0 +1 @@
+export { default as FluidCursor } from "./FluidCursor.svelte";

package/dist/fancy-ui/focus/Focus.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import { onMount, tick } from "svelte";
+
+	interface Props {
+		sentence?: string;
+		manualMode?: boolean;
+		blurAmount?: number;
+		borderColor?: string;
+		animationDuration?: number;
+		pauseBetweenAnimations?: number;
+		class?: string;
+	}
+
+	let {
+		sentence = "Fancy Focus",
+		manualMode = false,
+		blurAmount = 5,
+		borderColor = "green",
+		animationDuration = 0.5,
+		pauseBetweenAnimations = 1,
+		class: className = "",
+	}: Props = $props();
+
+	let words = $derived(sentence.split(" "));
+	let containerRef: HTMLDivElement;
+	let wordElements: HTMLSpanElement[] = $state([]);
+	let currentIndex = $state(0);
+	let focusRect = $state({ x: 0, y: 0, width: 0, height: 0 });
+
+	function updateFocusRect() {
+		const wordEl = wordElements[currentIndex];
+		if (!wordEl || !containerRef) return;
+		const parentRect = containerRef.getBoundingClientRect();
+		const wordRect = wordEl.getBoundingClientRect();
+		focusRect = {
+			x: wordRect.left - parentRect.left,
+			y: wordRect.top - parentRect.top,
+			width: wordRect.width,
+			height: wordRect.height,
+		};
+	}
+
+	function handleMouseEnter(index: number) {
+		if (manualMode) {
+			currentIndex = index;
+		}
+	}
+
+	function handleMouseLeave() {
+		if (manualMode) {
+			currentIndex = 0;
+		}
+	}
+
+	$effect(() => {
+		// Track currentIndex to update rect
+		currentIndex;
+		tick().then(updateFocusRect);
+	});
+
+	onMount(() => {
+		updateFocusRect();
+
+		if (!manualMode) {
+			const intervalMs = animationDuration * 1000 + pauseBetweenAnimations * 1000;
+			const id = setInterval(() => {
+				currentIndex = (currentIndex + 1) % words.length;
+			}, intervalMs);
+			return () => clearInterval(id);
+		}
+	});
+</script>
+
+<div bind:this={containerRef} class={cn("focus-container", className)}>
+	{#each words as word, index}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<span
+			bind:this={wordElements[index]}
+			class="focus-word"
+			class:manual={manualMode}
+			class:active={index === currentIndex && !manualMode}
+			style="filter: {index === currentIndex
+				? 'blur(0px)'
+				: `blur(${blurAmount}px)`}; transition: filter {animationDuration}s ease; --border-color: {borderColor};"
+			onmouseenter={() => handleMouseEnter(index)}
+			onmouseleave={handleMouseLeave}
+		>
+			{word}
+		</span>
+	{/each}
+
+	<div
+		class="focus-frame"
+		style="transform: translate({focusRect.x}px, {focusRect.y}px); width: {focusRect.width}px; height: {focusRect.height}px; opacity: {currentIndex >=
+		0
+			? 1
+			: 0}; transition: all {animationDuration}s ease; --border-color: {borderColor};"
+	>
+		<span class="corner top-left"></span>
+		<span class="corner top-right"></span>
+		<span class="corner bottom-left"></span>
+		<span class="corner bottom-right"></span>
+	</div>
+</div>
+
+<style>
+	.focus-container {
+		position: relative;
+		display: flex;
+		gap: 1em;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.focus-word {
+		position: relative;
+		font-size: 3rem;
+		font-weight: 900;
+		cursor: pointer;
+		transition:
+			filter 0.3s ease,
+			color 0.3s ease;
+	}
+
+	.focus-word.active {
+		filter: blur(0);
+	}
+
+	.focus-frame {
+		position: absolute;
+		top: 0;
+		left: 0;
+		pointer-events: none;
+		box-sizing: content-box;
+		border: none;
+	}
+
+	.corner {
+		position: absolute;
+		width: 1rem;
+		height: 1rem;
+		border: 3px solid var(--border-color, #fff);
+		filter: drop-shadow(0px 0px 4px var(--border-color, #fff));
+		border-radius: 3px;
+		transition: none;
+	}
+
+	.top-left {
+		top: -10px;
+		left: -10px;
+		border-right: none;
+		border-bottom: none;
+	}
+
+	.top-right {
+		top: -10px;
+		right: -10px;
+		border-left: none;
+		border-bottom: none;
+	}
+
+	.bottom-left {
+		bottom: -10px;
+		left: -10px;
+		border-right: none;
+		border-top: none;
+	}
+
+	.bottom-right {
+		bottom: -10px;
+		right: -10px;
+		border-left: none;
+		border-top: none;
+	}
+</style>

package/dist/fancy-ui/focus/Focus.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    sentence?: string;
+    manualMode?: boolean;
+    blurAmount?: number;
+    borderColor?: string;
+    animationDuration?: number;
+    pauseBetweenAnimations?: number;
+    class?: string;
+}
+declare const Focus: import("svelte").Component<Props, {}, "">;
+type Focus = ReturnType<typeof Focus>;
+export default Focus;

package/dist/fancy-ui/focus/Focus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/fancy-ui/focus/Focus.test.js

@@ -0,0 +1,48 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import Focus from "./Focus.svelte";
+describe("Focus", () => {
+    afterEach(cleanup);
+    it("renders the component", () => {
+        const { container } = render(Focus);
+        const wrapper = container.querySelector(".focus-container");
+        expect(wrapper).toBeInTheDocument();
+    });
+    it("splits sentence into words", () => {
+        const { container } = render(Focus, {
+            props: { sentence: "Hello World Test" },
+        });
+        const words = container.querySelectorAll(".focus-word");
+        expect(words.length).toBe(3);
+    });
+    it("renders default sentence", () => {
+        const { container } = render(Focus);
+        const words = container.querySelectorAll(".focus-word");
+        expect(words.length).toBe(2); // "Fancy" "Focus"
+    });
+    it("renders focus frame with corners", () => {
+        const { container } = render(Focus);
+        const frame = container.querySelector(".focus-frame");
+        expect(frame).toBeInTheDocument();
+        const corners = container.querySelectorAll(".corner");
+        expect(corners.length).toBe(4);
+    });
+    it("applies custom border color", () => {
+        const { container } = render(Focus, { props: { borderColor: "red" } });
+        const word = container.querySelector(".focus-word");
+        expect(word.style.getPropertyValue("--border-color")).toBe("red");
+    });
+    it("applies custom class", () => {
+        const { container } = render(Focus, { props: { class: "my-focus" } });
+        const wrapper = container.querySelector(".focus-container");
+        expect(wrapper?.className).toContain("my-focus");
+    });
+    it("blurs non-active words", () => {
+        const { container } = render(Focus, {
+            props: { sentence: "A B", blurAmount: 8 },
+        });
+        const words = container.querySelectorAll(".focus-word");
+        // Second word should be blurred
+        expect(words[1].style.filter).toBe("blur(8px)");
+    });
+});

package/dist/fancy-ui/focus/README.md

@@ -0,0 +1,21 @@
+# Focus
+
+A text component that cycles through words, focusing on one at a time with a decorative frame. Non-focused words are blurred.
+
+## Props
+
+| Prop                     | Type      | Default          | Description                    |
+| ------------------------ | --------- | ---------------- | ------------------------------ |
+| `sentence`               | `string`  | `"Fancy Focus"` | Sentence to split into words   |
+| `manualMode`             | `boolean` | `false`          | Focus on hover instead of auto |
+| `blurAmount`             | `number`  | `5`              | Blur amount for unfocused words (px) |
+| `borderColor`            | `string`  | `"green"`        | Corner bracket border color    |
+| `animationDuration`      | `number`  | `0.5`            | Animation duration in seconds  |
+| `pauseBetweenAnimations` | `number`  | `1`              | Pause between words in seconds |
+| `class`                  | `string`  | `""`             | Additional CSS classes         |
+
+## Usage
+
+```svelte
+<Focus sentence="Create stunning interfaces" borderColor="cyan" />
+```

package/dist/fancy-ui/focus/index.d.ts

@@ -0,0 +1 @@
+export { default as Focus } from "./Focus.svelte";

package/dist/fancy-ui/focus/index.js

@@ -0,0 +1 @@
+export { default as Focus } from "./Focus.svelte";

package/dist/fancy-ui/glare-card/GlareCard.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = "", children }: Props = $props();
+
+	let isPointerInside = $state(false);
+	let refElement: HTMLDivElement;
+	let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+	let glare = $state({ x: 50, y: 50 });
+	let background = $state({ x: 50, y: 50 });
+	let rotate = $state({ x: 0, y: 0 });
+
+	let cssVars = $derived(
+		`--m-x:${glare.x}%;--m-y:${glare.y}%;--r-x:${rotate.x}deg;--r-y:${rotate.y}deg;--bg-x:${background.x}%;--bg-y:${background.y}%;--duration:300ms;--foil-size:100%;--opacity:0;--radius:48px;--easing:ease;--transition:var(--duration) var(--easing);`
+	);
+
+	function handlePointerMove(event: PointerEvent) {
+		const rotateFactor = 0.4;
+		const rect = refElement?.getBoundingClientRect();
+		if (rect) {
+			const position = {
+				x: event.clientX - rect.left,
+				y: event.clientY - rect.top,
+			};
+			const percentage = {
+				x: (100 / rect.width) * position.x,
+				y: (100 / rect.height) * position.y,
+			};
+			const delta = {
+				x: percentage.x - 50,
+				y: percentage.y - 50,
+			};
+			background.x = 50 + percentage.x / 4 - 12.5;
+			background.y = 50 + percentage.y / 3 - 16.67;
+			rotate.x = -(delta.x / 3.5) * rotateFactor;
+			rotate.y = (delta.y / 2) * rotateFactor;
+			glare.x = percentage.x;
+			glare.y = percentage.y;
+		}
+	}
+
+	function handlePointerEnter() {
+		isPointerInside = true;
+		if (timeoutId) clearTimeout(timeoutId);
+		timeoutId = setTimeout(() => {
+			if (isPointerInside && refElement) {
+				refElement.style.setProperty("--duration", "0s");
+			}
+		}, 300);
+	}
+
+	function handlePointerLeave() {
+		isPointerInside = false;
+		if (timeoutId) clearTimeout(timeoutId);
+		if (refElement) {
+			refElement.style.removeProperty("--duration");
+			rotate = { x: 0, y: 0 };
+		}
+	}
+</script>
+
+<div
+	bind:this={refElement}
+	class="glare-container relative isolate [aspect-ratio:17/21] w-[320px] transition-transform delay-[var(--delay)] duration-[var(--duration)] ease-[var(--easing)] will-change-transform [contain:layout_style] [perspective:600px]"
+	style={cssVars}
+	onpointermove={handlePointerMove}
+	onpointerenter={handlePointerEnter}
+	onpointerleave={handlePointerLeave}
+>
+	<div
+		class="grid h-full origin-center [transform:rotateY(var(--r-x))_rotateX(var(--r-y))] overflow-hidden rounded-lg border border-slate-800 transition-transform delay-[var(--delay)] duration-[var(--duration)] ease-[var(--easing)] will-change-transform hover:filter-none hover:[--duration:200ms] hover:[--easing:linear] hover:[--opacity:0.6]"
+	>
+		<div
+			class="grid size-full mix-blend-soft-light [clip-path:inset(0_0_0_0_round_var(--radius))] [grid-area:1/1]"
+		>
+			<div class={cn("size-full bg-slate-950", className)}>
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+		</div>
+		<div
+			class="will-change-background grid size-full opacity-[var(--opacity)] mix-blend-soft-light transition-opacity delay-[var(--delay)] duration-[var(--duration)] ease-[var(--easing)] [background:radial-gradient(farthest-corner_circle_at_var(--m-x)_var(--m-y),_rgba(255,255,255,0.8)_10%,_rgba(255,255,255,0.65)_20%,_rgba(255,255,255,0)_90%)] [clip-path:inset(0_0_1px_0_round_var(--radius))] [grid-area:1/1]"
+		></div>
+		<div
+			class="glare-foil relative grid size-full opacity-[var(--opacity)] [background-blend-mode:hue_hue_hue_overlay] mix-blend-color-dodge transition-opacity will-change-[background] [background:var(--pattern),_var(--rainbow),_var(--diagonal),_var(--shade)] [clip-path:inset(0_0_1px_0_round_var(--radius))] [grid-area:1/1] after:bg-[inherit] after:[background-size:var(--foil-size),_200%_400%,_800%,_200%] after:[background-position:center,_0%_var(--bg-y),_calc(var(--bg-x)*_-1)_calc(var(--bg-y)*_-1),_var(--bg-x)_var(--bg-y)] after:[background-blend-mode:soft-light,_hue,_hard-light] after:mix-blend-exclusion after:content-[''] after:[grid-area:1/1]"
+		></div>
+	</div>
+</div>
+
+<style>
+	.glare-foil {
+		--step: 5%;
+		--foil-svg: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99994 3.419C2.99994 3.419 21.6142 7.43646 22.7921 12.153C23.97 16.8695 3.41838 23.0306 3.41838 23.0306' stroke='white' stroke-width='5' stroke-miterlimit='3.86874' stroke-linecap='round' style='mix-blend-mode:darken'/%3E%3C/svg%3E");
+		--pattern: var(--foil-svg) center/100% no-repeat;
+		--rainbow: repeating-linear-gradient(
+				0deg,
+				rgb(255, 119, 115) calc(var(--step) * 1),
+				rgba(255, 237, 95, 1) calc(var(--step) * 2),
+				rgba(168, 255, 95, 1) calc(var(--step) * 3),
+				rgba(131, 255, 247, 1) calc(var(--step) * 4),
+				rgba(120, 148, 255, 1) calc(var(--step) * 5),
+				rgb(216, 117, 255) calc(var(--step) * 6),
+				rgb(255, 119, 115) calc(var(--step) * 7)
+			)
+			0% var(--bg-y) / 200% 700% no-repeat;
+		--diagonal: repeating-linear-gradient(
+				128deg,
+				#0e152e 0%,
+				hsl(180, 10%, 60%) 3.8%,
+				hsl(180, 10%, 60%) 4.5%,
+				hsl(180, 10%, 60%) 5.2%,
+				#0e152e 10%,
+				#0e152e 12%
+			)
+			var(--bg-x) var(--bg-y) / 300% no-repeat;
+		--shade: radial-gradient(
+				farthest-corner circle at var(--m-x) var(--m-y),
+				rgba(255, 255, 255, 0.1) 12%,
+				rgba(255, 255, 255, 0.15) 20%,
+				rgba(255, 255, 255, 0.25) 120%
+			)
+			var(--bg-x) var(--bg-y) / 300% no-repeat;
+		background-blend-mode: hue, hue, hue, overlay;
+	}
+</style>

package/dist/fancy-ui/glare-card/GlareCard.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const GlareCard: import("svelte").Component<Props, {}, "">;
+type GlareCard = ReturnType<typeof GlareCard>;
+export default GlareCard;

package/dist/fancy-ui/glare-card/GlareCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/fancy-ui/glare-card/GlareCard.test.js

@@ -0,0 +1,40 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import GlareCard from "./GlareCard.svelte";
+describe("GlareCard", () => {
+    afterEach(cleanup);
+    it("renders the component", () => {
+        const { container } = render(GlareCard);
+        const wrapper = container.querySelector(".glare-container");
+        expect(wrapper).toBeInTheDocument();
+    });
+    it("has perspective class", () => {
+        const { container } = render(GlareCard);
+        const wrapper = container.querySelector(".glare-container");
+        expect(wrapper?.className).toContain("[perspective:600px]");
+    });
+    it("has correct aspect ratio", () => {
+        const { container } = render(GlareCard);
+        const wrapper = container.querySelector(".glare-container");
+        expect(wrapper?.className).toContain("[aspect-ratio:17/21]");
+    });
+    it("sets CSS custom properties", () => {
+        const { container } = render(GlareCard);
+        const wrapper = container.querySelector(".glare-container");
+        const style = wrapper.getAttribute("style") ?? "";
+        expect(style).toContain("--m-x");
+        expect(style).toContain("50%");
+        expect(style).toContain("--r-x");
+        expect(style).toContain("0deg");
+    });
+    it("applies custom class", () => {
+        const { container } = render(GlareCard, { props: { class: "my-glare" } });
+        const content = container.querySelector(".my-glare");
+        expect(content).toBeInTheDocument();
+    });
+    it("renders foil layer", () => {
+        const { container } = render(GlareCard);
+        const foil = container.querySelector(".glare-foil");
+        expect(foil).toBeInTheDocument();
+    });
+});

package/dist/fancy-ui/glare-card/README.md

@@ -0,0 +1,24 @@
+# GlareCard
+
+A holographic trading card effect with mouse-tracking glare, rainbow foil, and 3D rotation.
+
+## Props
+
+| Prop    | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `""`    | Additional CSS classes |
+
+## Snippets
+
+- `children` — Card content
+
+## Usage
+
+```svelte
+<GlareCard>
+  <div class="flex flex-col items-center justify-center h-full p-6 text-white">
+    <h3 class="text-xl font-bold">Holographic</h3>
+    <p class="text-sm">Move your mouse around</p>
+  </div>
+</GlareCard>
+```

package/dist/fancy-ui/glare-card/index.d.ts

@@ -0,0 +1 @@
+export { default as GlareCard } from "./GlareCard.svelte";

package/dist/fancy-ui/glare-card/index.js

@@ -0,0 +1 @@
+export { default as GlareCard } from "./GlareCard.svelte";

package/dist/fancy-ui/glow-border/GlowBorder.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+
+	interface Props {
+		class?: string;
+		borderRadius?: number;
+		color?: string | string[];
+		borderWidth?: number;
+		duration?: number;
+	}
+
+	let {
+		class: className = "",
+		borderRadius = 10,
+		color = "#FFF",
+		borderWidth = 2,
+		duration = 10,
+	}: Props = $props();
+
+	let colorString = $derived(Array.isArray(color) ? color.join(",") : color);
+
+	let styles = $derived(`
+		--glow-border-radius: ${borderRadius}px;
+		--glow-border-width: ${borderWidth}px;
+		--glow-duration: ${duration}s;
+		background-image: radial-gradient(transparent, transparent, ${colorString}, transparent, transparent);
+		background-size: 300% 300%;
+		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+		-webkit-mask-composite: xor;
+		mask-composite: exclude;
+		padding: var(--glow-border-width);
+		border-radius: var(--glow-border-radius);
+	`);
+</script>
+
+<div
+	class={cn(
+		"animate-glow pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position]",
+		className
+	)}
+	style={styles}
+></div>
+
+<style>
+	@keyframes glow {
+		0% {
+			background-position: 0% 0%;
+		}
+		50% {
+			background-position: 100% 100%;
+		}
+		100% {
+			background-position: 0% 0%;
+		}
+	}
+
+	.animate-glow {
+		animation: glow var(--glow-duration) linear infinite;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.animate-glow {
+			animation: none;
+		}
+	}
+</style>

package/dist/fancy-ui/glow-border/GlowBorder.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    class?: string;
+    borderRadius?: number;
+    color?: string | string[];
+    borderWidth?: number;
+    duration?: number;
+}
+declare const GlowBorder: import("svelte").Component<Props, {}, "">;
+type GlowBorder = ReturnType<typeof GlowBorder>;
+export default GlowBorder;