fancy-ui-svelte 0.2.1

package/dist/fancy-ui/smooth-cursor/SmoothCursor.svelte

@@ -0,0 +1,224 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface SpringConfig {
+		/** Controls how quickly the animation settles (default: 45) */
+		damping?: number;
+		/** Controls the spring stiffness (default: 400) */
+		stiffness?: number;
+		/** Controls the virtual mass of the animated object (default: 1) */
+		mass?: number;
+	}
+
+	export interface SmoothCursorProps {
+		/** Custom cursor snippet to replace the default arrow cursor */
+		cursor?: Snippet;
+		/** Spring physics configuration */
+		springConfig?: SpringConfig;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { cn } from "../../utils.js";
+
+	let { cursor, springConfig = {}, class: className = "" }: SmoothCursorProps = $props();
+
+	const config = $derived({
+		damping: springConfig.damping ?? 45,
+		stiffness: springConfig.stiffness ?? 400,
+		mass: springConfig.mass ?? 1,
+	});
+
+	let cursorEl: HTMLDivElement;
+	let visible = $state(false);
+	let reducedMotion = $state(false);
+
+	// Spring state
+	let posX = 0;
+	let posY = 0;
+	let velX = 0;
+	let velY = 0;
+	let targetX = 0;
+	let targetY = 0;
+
+	// Rotation state
+	let rotation = 0;
+	let prevX = 0;
+	let prevY = 0;
+
+	let rafId: number | null = null;
+	let lastTime = 0;
+
+	function startAnimation() {
+		if (rafId === null) {
+			lastTime = 0;
+			rafId = requestAnimationFrame(animate);
+		}
+	}
+
+	function stopAnimation() {
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+	}
+
+	function snapToTarget() {
+		posX = targetX;
+		posY = targetY;
+		velX = 0;
+		velY = 0;
+		if (cursorEl) {
+			cursorEl.style.transform = `translate3d(${posX}px, ${posY}px, 0)`;
+		}
+	}
+
+	function onMouseMove(e: MouseEvent) {
+		targetX = e.clientX;
+		targetY = e.clientY;
+
+		if (!visible) {
+			posX = targetX;
+			posY = targetY;
+			prevX = targetX;
+			prevY = targetY;
+			visible = true;
+		}
+
+		if (reducedMotion) {
+			snapToTarget();
+		} else {
+			startAnimation();
+		}
+	}
+
+	function onMouseLeave() {
+		visible = false;
+		stopAnimation();
+	}
+
+	function onMouseEnter(e: MouseEvent) {
+		targetX = e.clientX;
+		targetY = e.clientY;
+		posX = targetX;
+		posY = targetY;
+		prevX = targetX;
+		prevY = targetY;
+		visible = true;
+
+		if (!reducedMotion) {
+			startAnimation();
+		} else {
+			snapToTarget();
+		}
+	}
+
+	function animate(time: number) {
+		if (!visible) {
+			rafId = null;
+			return;
+		}
+
+		rafId = requestAnimationFrame(animate);
+
+		if (lastTime === 0) {
+			lastTime = time;
+			return;
+		}
+
+		const dt = Math.min((time - lastTime) / 1000, 0.064);
+		lastTime = time;
+
+		const { stiffness, damping, mass } = config;
+
+		// Spring physics: F = -k * displacement - c * velocity
+		const forceX = -stiffness * (posX - targetX) - damping * velX;
+		const forceY = -stiffness * (posY - targetY) - damping * velY;
+
+		const accX = forceX / mass;
+		const accY = forceY / mass;
+
+		velX += accX * dt;
+		velY += accY * dt;
+
+		posX += velX * dt;
+		posY += velY * dt;
+
+		// Calculate rotation based on movement direction
+		const dx = posX - prevX;
+		const dy = posY - prevY;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		if (distance > 0.1) {
+			const targetRotation = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
+			let diff = targetRotation - rotation;
+			while (diff > 180) diff -= 360;
+			while (diff < -180) diff += 360;
+			rotation += diff * 0.3;
+		}
+
+		prevX = posX;
+		prevY = posY;
+
+		if (cursorEl) {
+			cursorEl.style.transform = `translate3d(${posX}px, ${posY}px, 0) rotate(${rotation}deg)`;
+		}
+	}
+
+	onMount(() => {
+		const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+		reducedMotion = motionQuery.matches;
+
+		function onMotionChange(e: MediaQueryListEvent) {
+			reducedMotion = e.matches;
+			if (reducedMotion) {
+				stopAnimation();
+				snapToTarget();
+			} else if (visible) {
+				startAnimation();
+			}
+		}
+
+		motionQuery.addEventListener("change", onMotionChange);
+
+		document.body.style.cursor = "none";
+
+		document.addEventListener("mousemove", onMouseMove);
+		document.documentElement.addEventListener("mouseleave", onMouseLeave);
+		document.documentElement.addEventListener("mouseenter", onMouseEnter);
+
+		return () => {
+			document.body.style.cursor = "";
+			motionQuery.removeEventListener("change", onMotionChange);
+			document.removeEventListener("mousemove", onMouseMove);
+			document.documentElement.removeEventListener("mouseleave", onMouseLeave);
+			document.documentElement.removeEventListener("mouseenter", onMouseEnter);
+			stopAnimation();
+		};
+	});
+</script>
+
+<div
+	bind:this={cursorEl}
+	class={cn(
+		"pointer-events-none fixed top-0 left-0 z-[9999]",
+		visible ? "opacity-100" : "opacity-0",
+		className
+	)}
+	style="will-change: transform; translate: -50% -50%;"
+>
+	{#if cursor}
+		{@render cursor()}
+	{:else}
+		<!-- Default cursor: arrow SVG -->
+		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+			<path
+				fill="currentColor"
+				d="M9.391 2.32C8.42 1.56 7 2.253 7 3.486V28.41c0 1.538 1.966 2.18 2.874.938l6.225-8.523a2 2 0 0 1 1.615-.82h9.69c1.512 0 2.17-1.912.978-2.844z"
+			/>
+		</svg>
+	{/if}
+</div>

package/dist/fancy-ui/smooth-cursor/SmoothCursor.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+export interface SpringConfig {
+    /** Controls how quickly the animation settles (default: 45) */
+    damping?: number;
+    /** Controls the spring stiffness (default: 400) */
+    stiffness?: number;
+    /** Controls the virtual mass of the animated object (default: 1) */
+    mass?: number;
+}
+export interface SmoothCursorProps {
+    /** Custom cursor snippet to replace the default arrow cursor */
+    cursor?: Snippet;
+    /** Spring physics configuration */
+    springConfig?: SpringConfig;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const SmoothCursor: import("svelte").Component<SmoothCursorProps, {}, "">;
+type SmoothCursor = ReturnType<typeof SmoothCursor>;
+export default SmoothCursor;

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

@@ -0,0 +1,2 @@
+export { default as SmoothCursor } from "./SmoothCursor.svelte";
+export type { SmoothCursorProps, SpringConfig } from "./SmoothCursor.svelte";

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

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

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

@@ -0,0 +1,15 @@
+# Sparkles
+
+Canvas-based floating particle sparkle effect.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `background` | `string` | `'#0d47a1'` | Background color |
+| `particleColor` | `string` | `'#ffffff'` | Particle color |
+| `minSize` | `number` | `1` | Minimum particle size |
+| `maxSize` | `number` | `3` | Maximum particle size |
+| `speed` | `number` | `4` | Particle movement speed |
+| `particleDensity` | `number` | `120` | Number of particles |
+| `class` | `string` | `''` | Additional CSS classes |

package/dist/fancy-ui/sparkles/Sparkles.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import { onMount } from "svelte";
+
+	interface Props {
+		background?: string;
+		particleColor?: string;
+		minSize?: number;
+		maxSize?: number;
+		speed?: number;
+		particleDensity?: number;
+		class?: string;
+	}
+
+	let {
+		background = "#0d47a1",
+		particleColor = "#ffffff",
+		minSize = 1,
+		maxSize = 3,
+		speed = 4,
+		particleDensity = 120,
+		class: className = "",
+	}: Props = $props();
+
+	interface Particle {
+		x: number;
+		y: number;
+		size: number;
+		opacity: number;
+		vx: number;
+		vy: number;
+		phase: number;
+		phaseSpeed: number;
+	}
+
+	let containerRef: HTMLDivElement;
+	let canvasRef: HTMLCanvasElement;
+	let particles: Particle[] = [];
+	let ctx: CanvasRenderingContext2D | null = null;
+	let rafId: number;
+
+	function resizeCanvas() {
+		if (!canvasRef || !containerRef) return;
+		const dpr = window.devicePixelRatio || 1;
+		const rect = containerRef.getBoundingClientRect();
+		canvasRef.width = rect.width * dpr;
+		canvasRef.height = rect.height * dpr;
+		ctx = canvasRef.getContext("2d");
+		if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+	}
+
+	function generateParticles() {
+		particles = [];
+		for (let i = 0; i < particleDensity; i++) {
+			const baseSpeed = 0.05;
+			const speedVariance = Math.random() * 0.3 + 0.7;
+			particles.push({
+				x: Math.random() * 100,
+				y: Math.random() * 100,
+				size: Math.random() * (maxSize - minSize) + minSize,
+				opacity: Math.random() * 0.5 + 0.3,
+				vx: (Math.random() - 0.5) * baseSpeed * speedVariance * speed,
+				vy: ((Math.random() - 0.5) * baseSpeed - baseSpeed * 0.3) * speedVariance * speed,
+				phase: Math.random() * Math.PI * 2,
+				phaseSpeed: 0.015,
+			});
+		}
+	}
+
+	function updateAndDraw() {
+		if (!ctx || !canvasRef) return;
+		ctx.clearRect(0, 0, canvasRef.width, canvasRef.height);
+
+		for (const p of particles) {
+			p.x += p.vx;
+			p.y += p.vy;
+			if (p.x < -2) p.x = 102;
+			if (p.x > 102) p.x = -2;
+			if (p.y < -2) p.y = 102;
+			if (p.y > 102) p.y = -2;
+			p.phase = (p.phase + p.phaseSpeed) % (Math.PI * 2);
+			const opacity = 0.3 + (Math.sin(p.phase) * 0.3 + 0.3);
+
+			ctx.beginPath();
+			ctx.arc(
+				(p.x * canvasRef.width) / 100,
+				(p.y * canvasRef.height) / 100,
+				p.size,
+				0,
+				Math.PI * 2
+			);
+			ctx.fillStyle = `${particleColor}${Math.floor(opacity * 255)
+				.toString(16)
+				.padStart(2, "0")}`;
+			ctx.fill();
+		}
+
+		rafId = requestAnimationFrame(updateAndDraw);
+	}
+
+	onMount(() => {
+		ctx = canvasRef.getContext("2d");
+		resizeCanvas();
+		generateParticles();
+		rafId = requestAnimationFrame(updateAndDraw);
+
+		const resizeObserver = new ResizeObserver(resizeCanvas);
+		resizeObserver.observe(containerRef);
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+	});
+</script>
+
+<div
+	bind:this={containerRef}
+	class={cn("relative size-full overflow-hidden will-change-transform", className)}
+	style:background
+>
+	<canvas bind:this={canvasRef} class="absolute inset-0 size-full" aria-hidden="true"></canvas>
+</div>

package/dist/fancy-ui/sparkles/Sparkles.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    background?: string;
+    particleColor?: string;
+    minSize?: number;
+    maxSize?: number;
+    speed?: number;
+    particleDensity?: number;
+    class?: string;
+}
+declare const Sparkles: import("svelte").Component<Props, {}, "">;
+type Sparkles = ReturnType<typeof Sparkles>;
+export default Sparkles;

package/dist/fancy-ui/sparkles/Sparkles.test.d.ts

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

package/dist/fancy-ui/sparkles/Sparkles.test.js

@@ -0,0 +1,66 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import Sparkles from "./Sparkles.svelte";
+describe("Sparkles", () => {
+    beforeEach(() => {
+        vi.stubGlobal("ResizeObserver", class {
+            observe() { }
+            unobserve() { }
+            disconnect() { }
+        });
+    });
+    afterEach(() => {
+        cleanup();
+        vi.restoreAllMocks();
+    });
+    it("renders container div", () => {
+        const { container } = render(Sparkles);
+        const div = container.firstElementChild;
+        expect(div).toBeInTheDocument();
+        expect(div.tagName).toBe("DIV");
+    });
+    it("renders canvas element inside container", () => {
+        const { container } = render(Sparkles);
+        const canvas = container.querySelector("canvas");
+        expect(canvas).toBeInTheDocument();
+    });
+    it("applies default background style", () => {
+        const { container } = render(Sparkles);
+        const div = container.firstElementChild;
+        const style = div?.getAttribute("style") ?? "";
+        expect(style).toContain("background");
+        // jsdom converts hex to rgb
+        expect(style).toMatch(/background.*rgb\(13,\s*71,\s*161\)|#0d47a1/);
+    });
+    it("applies custom background style", () => {
+        const { container } = render(Sparkles, {
+            props: { background: "#ff0000" },
+        });
+        const div = container.firstElementChild;
+        const style = div?.getAttribute("style") ?? "";
+        expect(style).toMatch(/rgb\(255,\s*0,\s*0\)|#ff0000/);
+    });
+    it("applies custom class", () => {
+        const { container } = render(Sparkles, { props: { class: "my-sparkles" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-sparkles");
+    });
+    it("has overflow-hidden class", () => {
+        const { container } = render(Sparkles);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("overflow-hidden");
+    });
+    it("preserves base classes when custom class is added", () => {
+        const { container } = render(Sparkles, { props: { class: "extra" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("relative");
+        expect(div?.className).toContain("overflow-hidden");
+        expect(div?.className).toContain("will-change-transform");
+    });
+    it("canvas has absolute positioning classes", () => {
+        const { container } = render(Sparkles);
+        const canvas = container.querySelector("canvas");
+        expect(canvas?.className).toContain("absolute");
+        expect(canvas?.className).toContain("inset-0");
+    });
+});

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

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

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

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

package/dist/fancy-ui/sparkles-text/README.md

@@ -0,0 +1,19 @@
+# SparklesText
+
+Text with animated sparkle star overlay. SVG stars animate with fade/scale/rotation effects and regenerate periodically.
+
+## Props
+
+| Prop            | Type                               | Default                                      | Description                |
+| --------------- | ---------------------------------- | -------------------------------------------- | -------------------------- |
+| `text`          | `string`                           | required                                     | Text to display            |
+| `sparklesCount` | `number`                           | `10`                                         | Number of sparkle stars    |
+| `colors`        | `{ first: string; second: string }`| `{ first: '#9E7AFF', second: '#FE8BBB' }`   | Two colors for sparkles    |
+| `class`         | `string`                           | `''`                                         | Additional CSS classes     |
+
+## Usage
+
+```svelte
+<SparklesText text="Sparkle!" />
+<SparklesText text="Golden" colors={{ first: '#FFD700', second: '#FFA500' }} />
+```

package/dist/fancy-ui/sparkles-text/SparklesText.svelte

@@ -0,0 +1,112 @@
+<script lang="ts" module>
+	/**
+	 * SparklesText - Text with animated sparkle stars
+	 *
+	 * Renders text with SVG sparkle stars overlaid that animate with
+	 * fade/scale/rotation effects. Sparkles regenerate periodically.
+	 */
+	export interface SparklesTextProps {
+		/** Text to display */
+		text: string;
+		/** Number of sparkle stars */
+		sparklesCount?: number;
+		/** Two colors for sparkle stars */
+		colors?: { first: string; second: string };
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	interface Sparkle {
+		id: string;
+		x: string;
+		y: string;
+		color: string;
+		delay: number;
+		scale: number;
+		lifespan: number;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+
+	let {
+		text,
+		sparklesCount = 10,
+		colors = { first: "#9E7AFF", second: "#FE8BBB" },
+		class: className,
+	}: SparklesTextProps = $props();
+
+	let sparkles = $state<Sparkle[]>([]);
+
+	function generateStar(): Sparkle {
+		const x = `${Math.random() * 100}%`;
+		const y = `${Math.random() * 100}%`;
+		const color = Math.random() > 0.5 ? colors.first : colors.second;
+		const delay = Math.random() * 2;
+		const scale = Math.random() * 1 + 0.3;
+		const lifespan = Math.random() * 10 + 5;
+		const id = `${x}-${y}-${Date.now()}-${Math.random()}`;
+		return { id, x, y, color, delay, scale, lifespan };
+	}
+
+	function initializeStars() {
+		sparkles = Array.from({ length: sparklesCount }, generateStar);
+	}
+
+	function updateStars() {
+		sparkles = sparkles.map((star) => {
+			if (star.lifespan <= 0) {
+				return generateStar();
+			}
+			return { ...star, lifespan: star.lifespan - 0.1 };
+		});
+	}
+
+	initializeStars();
+
+	onMount(() => {
+		const intervalId = setInterval(updateStars, 100);
+		return () => clearInterval(intervalId);
+	});
+</script>
+
+<div class={cn("sparkles-text text-6xl font-bold", className)}>
+	<span class="relative inline-block">
+		{#each sparkles as sparkle (sparkle.id)}
+			<svg
+				class="sparkles-star pointer-events-none absolute z-20"
+				style="left:{sparkle.x};top:{sparkle.y};--sparkle-scale:{sparkle.scale};animation:sparkleAnim 0.8s ease-in-out {sparkle.delay}s infinite;transform:scale(0) rotate(75deg);opacity:0"
+				width="21"
+				height="21"
+				viewBox="0 0 21 21"
+			>
+				<path
+					d="M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z"
+					fill={sparkle.color}
+				/>
+			</svg>
+		{/each}
+		{text}
+	</span>
+</div>
+
+<style>
+	:global {
+		@keyframes sparkleAnim {
+			0% {
+				opacity: 0;
+				transform: scale(0) rotate(75deg);
+			}
+			50% {
+				opacity: 1;
+				transform: scale(var(--sparkle-scale, 1)) rotate(120deg);
+			}
+			100% {
+				opacity: 0;
+				transform: scale(0) rotate(150deg);
+			}
+		}
+	}
+</style>

package/dist/fancy-ui/sparkles-text/SparklesText.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+ * SparklesText - Text with animated sparkle stars
+ *
+ * Renders text with SVG sparkle stars overlaid that animate with
+ * fade/scale/rotation effects. Sparkles regenerate periodically.
+ */
+export interface SparklesTextProps {
+    /** Text to display */
+    text: string;
+    /** Number of sparkle stars */
+    sparklesCount?: number;
+    /** Two colors for sparkle stars */
+    colors?: {
+        first: string;
+        second: string;
+    };
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const SparklesText: import("svelte").Component<SparklesTextProps, {}, "">;
+type SparklesText = ReturnType<typeof SparklesText>;
+export default SparklesText;

package/dist/fancy-ui/sparkles-text/SparklesText.test.d.ts

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

package/dist/fancy-ui/sparkles-text/SparklesText.test.js

@@ -0,0 +1,54 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import SparklesText from "./SparklesText.svelte";
+describe("SparklesText", () => {
+    afterEach(cleanup);
+    it("renders the text content", () => {
+        const { container } = render(SparklesText, { props: { text: "Hello" } });
+        const wrapper = container.querySelector(".sparkles-text");
+        expect(wrapper?.textContent).toContain("Hello");
+    });
+    it("renders sparkle SVG elements", () => {
+        const { container } = render(SparklesText, {
+            props: { text: "Test", sparklesCount: 5 },
+        });
+        const stars = container.querySelectorAll(".sparkles-star");
+        expect(stars.length).toBe(5);
+    });
+    it("renders default 10 sparkles", () => {
+        const { container } = render(SparklesText, { props: { text: "Test" } });
+        const stars = container.querySelectorAll(".sparkles-star");
+        expect(stars.length).toBe(10);
+    });
+    it("applies custom class names", () => {
+        const { container } = render(SparklesText, {
+            props: { text: "Hi", class: "my-sparkle" },
+        });
+        const wrapper = container.querySelector(".sparkles-text");
+        expect(wrapper?.className).toContain("my-sparkle");
+    });
+    it("sparkle SVGs have animation styles", () => {
+        const { container } = render(SparklesText, {
+            props: { text: "X", sparklesCount: 1 },
+        });
+        const star = container.querySelector(".sparkles-star");
+        const style = star?.getAttribute("style") ?? "";
+        expect(style).toContain("animation");
+        expect(style).toContain("sparkleAnim");
+    });
+    it("uses custom colors on sparkle paths", () => {
+        const { container } = render(SparklesText, {
+            props: {
+                text: "X",
+                sparklesCount: 20,
+                colors: { first: "#FF0000", second: "#00FF00" },
+            },
+        });
+        const paths = container.querySelectorAll(".sparkles-star path");
+        const fills = Array.from(paths).map((p) => p.getAttribute("fill"));
+        const hasRed = fills.some((f) => f === "#FF0000");
+        const hasGreen = fills.some((f) => f === "#00FF00");
+        // With 20 sparkles and 50/50 chance, at least one of each should appear
+        expect(hasRed || hasGreen).toBe(true);
+    });
+});