fancy-ui-svelte 0.2.1

package/dist/fancy-ui/box-reveal/BoxReveal.test.js

@@ -0,0 +1,66 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import BoxReveal from "./BoxReveal.svelte";
+// Mock IntersectionObserver as a class
+class MockIntersectionObserver {
+    callback;
+    static instances = [];
+    constructor(callback) {
+        this.callback = callback;
+        MockIntersectionObserver.instances.push(this);
+    }
+    observe = vi.fn();
+    disconnect = vi.fn();
+    unobserve = vi.fn();
+}
+vi.stubGlobal("IntersectionObserver", MockIntersectionObserver);
+describe("BoxReveal", () => {
+    afterEach(() => {
+        cleanup();
+        MockIntersectionObserver.instances = [];
+    });
+    it("renders the box-reveal container", () => {
+        const { container } = render(BoxReveal, {
+            props: { children: (() => { }) },
+        });
+        const wrapper = container.querySelector(".box-reveal");
+        expect(wrapper).toBeTruthy();
+    });
+    it("renders the overlay element", () => {
+        const { container } = render(BoxReveal, {
+            props: { children: (() => { }) },
+        });
+        const overlay = container.querySelector(".box-reveal-overlay");
+        expect(overlay).toBeTruthy();
+    });
+    it("renders overlay with z-20 class for stacking", () => {
+        const { container } = render(BoxReveal, {
+            props: { color: "#ff0000", children: (() => { }) },
+        });
+        const overlay = container.querySelector(".box-reveal-overlay");
+        expect(overlay?.className).toContain("z-20");
+        expect(overlay?.className).toContain("absolute");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(BoxReveal, {
+            props: { class: "my-reveal", children: (() => { }) },
+        });
+        const wrapper = container.querySelector(".box-reveal");
+        expect(wrapper?.className).toContain("my-reveal");
+    });
+    it("observes element for intersection", () => {
+        render(BoxReveal, {
+            props: { children: (() => { }) },
+        });
+        const lastInstance = MockIntersectionObserver.instances.at(-1);
+        expect(lastInstance?.observe).toHaveBeenCalled();
+    });
+    it("content starts hidden (opacity 0)", () => {
+        const { container } = render(BoxReveal, {
+            props: { children: (() => { }) },
+        });
+        const content = container.querySelector(".box-reveal-content");
+        const style = content?.getAttribute("style") ?? "";
+        expect(style).toContain("opacity");
+    });
+});

package/dist/fancy-ui/box-reveal/README.md

@@ -0,0 +1,24 @@
+# BoxReveal
+
+Sliding box reveal animation. Content fades up while a colored box slides from left to right, revealing the content underneath. Triggers on viewport entry.
+
+## Props
+
+| Prop       | Type     | Default    | Description                         |
+| ---------- | -------- | ---------- | ----------------------------------- |
+| `color`    | `string` | `'#5046e6'`| Color of the reveal box             |
+| `duration` | `number` | `0.5`      | Animation duration (seconds)        |
+| `delay`    | `number` | `0.25`     | Delay before animation (seconds)    |
+| `class`    | `string` | `''`       | Additional CSS classes              |
+
+## Usage
+
+```svelte
+<BoxReveal>
+  <h1>Revealed content</h1>
+</BoxReveal>
+
+<BoxReveal color="#ff6600" duration={0.8}>
+  <p>Custom color and speed</p>
+</BoxReveal>
+```

package/dist/fancy-ui/box-reveal/index.d.ts

@@ -0,0 +1,2 @@
+import BoxReveal, { type BoxRevealProps } from "./BoxReveal.svelte";
+export { BoxReveal, type BoxRevealProps };

package/dist/fancy-ui/box-reveal/index.js

@@ -0,0 +1,2 @@
+import BoxReveal, {} from "./BoxReveal.svelte";
+export { BoxReveal };

package/dist/fancy-ui/card-3d/CardBody.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+
+	interface Props {
+		class?: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { class: className = "", children }: Props = $props();
+</script>
+
+<div class={cn("h-96 w-96", className)} style="transform-style: preserve-3d">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/fancy-ui/card-3d/CardBody.svelte.d.ts

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

package/dist/fancy-ui/card-3d/CardContainer.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { setContext } from "svelte";
+	import { cn } from "../../utils";
+
+	interface Props {
+		class?: string;
+		containerClass?: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { class: className = "", containerClass = "", children }: Props = $props();
+
+	let containerRef: HTMLDivElement;
+	let isMouseEntered = $state(false);
+
+	setContext("card3d:mouseEntered", () => isMouseEntered);
+
+	function handleMouseMove(e: MouseEvent) {
+		if (!containerRef) return;
+		const { left, top, width, height } = containerRef.getBoundingClientRect();
+		const x = (e.clientX - left - width / 2) / 25;
+		const y = (e.clientY - top - height / 2) / 25;
+		containerRef.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
+	}
+
+	function handleMouseEnter() {
+		isMouseEntered = true;
+	}
+
+	function handleMouseLeave() {
+		if (!containerRef) return;
+		isMouseEntered = false;
+		containerRef.style.transform = `rotateY(0deg) rotateX(0deg)`;
+	}
+</script>
+
+<div class={cn("flex items-center justify-center p-2", containerClass)} style="perspective: 1000px">
+	<div
+		bind:this={containerRef}
+		class={cn(
+			"relative flex items-center justify-center transition-all duration-200 ease-linear",
+			className
+		)}
+		style="transform-style: preserve-3d"
+		onmouseenter={handleMouseEnter}
+		onmousemove={handleMouseMove}
+		onmouseleave={handleMouseLeave}
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>

package/dist/fancy-ui/card-3d/CardContainer.svelte.d.ts

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

package/dist/fancy-ui/card-3d/CardItem.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+	import { cn } from "../../utils";
+
+	interface Props {
+		as?: string;
+		class?: string;
+		translateX?: number | string;
+		translateY?: number | string;
+		translateZ?: number | string;
+		rotateX?: number | string;
+		rotateY?: number | string;
+		rotateZ?: number | string;
+		children?: import("svelte").Snippet;
+	}
+
+	let {
+		as = "div",
+		class: className = "",
+		translateX = 0,
+		translateY = 0,
+		translateZ = 0,
+		rotateX = 0,
+		rotateY = 0,
+		rotateZ = 0,
+		children,
+	}: Props = $props();
+
+	let ref: HTMLElement;
+
+	const getMouseEntered = getContext<() => boolean>("card3d:mouseEntered");
+
+	let transform = $derived(
+		getMouseEntered()
+			? `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`
+			: `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`
+	);
+</script>
+
+<svelte:element
+	this={as}
+	bind:this={ref}
+	class={cn("w-fit transition duration-500 ease-in-out", className)}
+	style="transform: {transform}"
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>

package/dist/fancy-ui/card-3d/CardItem.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    as?: string;
+    class?: string;
+    translateX?: number | string;
+    translateY?: number | string;
+    translateZ?: number | string;
+    rotateX?: number | string;
+    rotateY?: number | string;
+    rotateZ?: number | string;
+    children?: import("svelte").Snippet;
+}
+declare const CardItem: import("svelte").Component<Props, {}, "">;
+type CardItem = ReturnType<typeof CardItem>;
+export default CardItem;

package/dist/fancy-ui/card-3d/README.md

@@ -0,0 +1,52 @@
+# Card 3D
+
+Interactive 3D perspective card that tilts based on mouse position, with child elements that can float at different depth levels.
+
+## Components
+
+- **CardContainer** — Outer wrapper providing perspective and mouse tracking. Shares mouse state via Svelte context.
+- **CardBody** — Inner container with `transform-style: preserve-3d`.
+- **CardItem** — Individual element with configurable 3D transform on hover.
+
+## Props
+
+### CardContainer
+
+| Prop             | Type     | Default | Description                    |
+| ---------------- | -------- | ------- | ------------------------------ |
+| `class`          | `string` | `''`    | Classes for the inner wrapper  |
+| `containerClass` | `string` | `''`    | Classes for the outer wrapper  |
+
+### CardBody
+
+| Prop    | Type     | Default | Description              |
+| ------- | -------- | ------- | ------------------------ |
+| `class` | `string` | `''`    | Classes for the body div |
+
+### CardItem
+
+| Prop         | Type               | Default | Description                    |
+| ------------ | ------------------ | ------- | ------------------------------ |
+| `as`         | `string`           | `'div'` | HTML element to render as      |
+| `class`      | `string`           | `''`    | Additional classes             |
+| `translateX` | `number \| string` | `0`     | X translation on hover (px)    |
+| `translateY` | `number \| string` | `0`     | Y translation on hover (px)    |
+| `translateZ` | `number \| string` | `0`     | Z translation (depth) on hover |
+| `rotateX`    | `number \| string` | `0`     | X rotation on hover (deg)      |
+| `rotateY`    | `number \| string` | `0`     | Y rotation on hover (deg)      |
+| `rotateZ`    | `number \| string` | `0`     | Z rotation on hover (deg)      |
+
+## Usage
+
+```svelte
+<CardContainer>
+  <CardBody class="rounded-xl border bg-card p-6 w-[20rem]">
+    <CardItem translateZ={50} class="text-xl font-bold">
+      Title
+    </CardItem>
+    <CardItem translateZ={100}>
+      <img src="..." alt="..." class="rounded-xl" />
+    </CardItem>
+  </CardBody>
+</CardContainer>
+```

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

@@ -0,0 +1,3 @@
+export { default as CardContainer } from "./CardContainer.svelte";
+export { default as CardBody } from "./CardBody.svelte";
+export { default as CardItem } from "./CardItem.svelte";

package/dist/fancy-ui/card-3d/index.js

@@ -0,0 +1,3 @@
+export { default as CardContainer } from "./CardContainer.svelte";
+export { default as CardBody } from "./CardBody.svelte";
+export { default as CardItem } from "./CardItem.svelte";

package/dist/fancy-ui/card-spotlight/CardSpotlight.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+
+	interface Props {
+		class?: string;
+		slotClass?: string;
+		gradientSize?: number;
+		gradientColor?: string;
+		gradientOpacity?: number;
+		children?: import("svelte").Snippet;
+	}
+
+	let {
+		class: className = "",
+		slotClass = "",
+		gradientSize = 200,
+		gradientColor = "#262626",
+		gradientOpacity = 0.8,
+		children,
+	}: Props = $props();
+
+	let mouseX = $state(-gradientSize * 10);
+	let mouseY = $state(-gradientSize * 10);
+
+	function handleMouseMove(e: MouseEvent) {
+		const target = e.currentTarget as HTMLElement;
+		const rect = target.getBoundingClientRect();
+		mouseX = e.clientX - rect.left;
+		mouseY = e.clientY - rect.top;
+	}
+
+	function handleMouseLeave() {
+		mouseX = -gradientSize * 10;
+		mouseY = -gradientSize * 10;
+	}
+
+	let backgroundStyle = $derived(
+		`radial-gradient(circle at ${mouseX}px ${mouseY}px, ${gradientColor} 0%, rgba(0, 0, 0, 0) 70%)`
+	);
+</script>
+
+<div
+	class={cn(
+		"group relative flex size-full overflow-hidden rounded-xl border bg-neutral-100 text-black dark:bg-neutral-900 dark:text-white",
+		className
+	)}
+	onmousemove={handleMouseMove}
+	onmouseleave={handleMouseLeave}
+>
+	<div class={cn("relative z-10", slotClass)}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+	<div
+		class="pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+		style="background: {backgroundStyle}; opacity: {gradientOpacity}"
+	></div>
+</div>

package/dist/fancy-ui/card-spotlight/CardSpotlight.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    class?: string;
+    slotClass?: string;
+    gradientSize?: number;
+    gradientColor?: string;
+    gradientOpacity?: number;
+    children?: import("svelte").Snippet;
+}
+declare const CardSpotlight: import("svelte").Component<Props, {}, "">;
+type CardSpotlight = ReturnType<typeof CardSpotlight>;
+export default CardSpotlight;

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

@@ -0,0 +1,24 @@
+# Card Spotlight
+
+Card with a mouse-following radial gradient spotlight overlay that appears on hover.
+
+## Props
+
+| Prop              | Type     | Default     | Description                          |
+| ----------------- | -------- | ----------- | ------------------------------------ |
+| `class`           | `string` | `''`        | Classes for the outer container      |
+| `slotClass`       | `string` | `''`        | Classes for the content wrapper      |
+| `gradientSize`    | `number` | `200`       | Radius of the spotlight gradient     |
+| `gradientColor`   | `string` | `'#262626'` | Color of the spotlight               |
+| `gradientOpacity` | `number` | `0.8`       | Opacity of the gradient overlay      |
+
+## Usage
+
+```svelte
+<CardSpotlight class="h-64 w-80" gradientColor="#3b82f6">
+  <div class="p-6">
+    <h3 class="text-lg font-bold">Title</h3>
+    <p>Content here</p>
+  </div>
+</CardSpotlight>
+```

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

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

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

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

package/dist/fancy-ui/colourful-text/ColourfulText.svelte

@@ -0,0 +1,78 @@
+<script lang="ts" module>
+	/**
+	 * ColourfulText - Per-character color animation
+	 *
+	 * Each character is individually animated with shuffled colors.
+	 * Colors reshuffle every 5 seconds with staggered CSS transitions.
+	 * Pure CSS implementation (no motion library dependency).
+	 */
+	export interface ColourfulTextProps {
+		/** Text to animate */
+		text: string;
+		/** Array of colors to cycle through */
+		colors?: string[];
+		/** Initial color before animation */
+		startColor?: string;
+		/** Transition duration in seconds for each character */
+		duration?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+
+	let {
+		text,
+		colors = [
+			"rgb(131, 179, 32)",
+			"rgb(47, 195, 106)",
+			"rgb(42, 169, 210)",
+			"rgb(4, 112, 202)",
+			"rgb(107, 10, 255)",
+			"rgb(183, 0, 218)",
+			"rgb(218, 0, 171)",
+			"rgb(230, 64, 92)",
+			"rgb(232, 98, 63)",
+			"rgb(249, 129, 47)",
+		],
+		startColor = "rgb(255, 255, 255)",
+		duration = 0.5,
+		class: className,
+	}: ColourfulTextProps = $props();
+
+	let currentColors = $state<string[]>([]);
+
+	function shuffleColors() {
+		currentColors = [...colors].sort(() => 0.5 - Math.random());
+	}
+
+	// Initialize with shuffled colors
+	shuffleColors();
+
+	onMount(() => {
+		const intervalId = setInterval(() => {
+			if (document.visibilityState === "visible") {
+				shuffleColors();
+			}
+		}, 5000);
+
+		return () => clearInterval(intervalId);
+	});
+
+	const chars = $derived(text.split(""));
+</script>
+
+<span class={cn("colourful-text inline-flex", className)}>
+	{#each chars as char, i (i)}
+		<span
+			class="colourful-char inline-block"
+			style="color:{currentColors[i % currentColors.length] ??
+				startColor};transition:color {duration}s ease {i * 0.05}s,opacity {duration}s ease {i *
+				0.05}s,transform {duration}s ease {i * 0.05}s,filter {duration}s ease {i * 0.05}s"
+			>{char === " " ? "\u00A0" : char}</span
+		>
+	{/each}
+</span>

package/dist/fancy-ui/colourful-text/ColourfulText.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ColourfulText - Per-character color animation
+ *
+ * Each character is individually animated with shuffled colors.
+ * Colors reshuffle every 5 seconds with staggered CSS transitions.
+ * Pure CSS implementation (no motion library dependency).
+ */
+export interface ColourfulTextProps {
+    /** Text to animate */
+    text: string;
+    /** Array of colors to cycle through */
+    colors?: string[];
+    /** Initial color before animation */
+    startColor?: string;
+    /** Transition duration in seconds for each character */
+    duration?: number;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const ColourfulText: import("svelte").Component<ColourfulTextProps, {}, "">;
+type ColourfulText = ReturnType<typeof ColourfulText>;
+export default ColourfulText;

package/dist/fancy-ui/colourful-text/ColourfulText.test.d.ts

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

package/dist/fancy-ui/colourful-text/ColourfulText.test.js

@@ -0,0 +1,53 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import ColourfulText from "./ColourfulText.svelte";
+describe("ColourfulText", () => {
+    afterEach(cleanup);
+    it("renders one span per character", () => {
+        const { container } = render(ColourfulText, { props: { text: "Hello" } });
+        const chars = container.querySelectorAll(".colourful-char");
+        expect(chars.length).toBe(5);
+    });
+    it("renders the correct text content", () => {
+        const { container } = render(ColourfulText, { props: { text: "ABC" } });
+        const wrapper = container.querySelector(".colourful-text");
+        expect(wrapper?.textContent).toBe("ABC");
+    });
+    it("renders spaces as non-breaking spaces", () => {
+        const { container } = render(ColourfulText, { props: { text: "A B" } });
+        const chars = container.querySelectorAll(".colourful-char");
+        expect(chars.length).toBe(3);
+        expect(chars[1].textContent).toBe("\u00A0");
+    });
+    it("applies color styles to each character", () => {
+        const { container } = render(ColourfulText, { props: { text: "Hi" } });
+        const chars = container.querySelectorAll(".colourful-char");
+        chars.forEach((char) => {
+            const style = char.getAttribute("style") ?? "";
+            expect(style).toContain("color:");
+            expect(style).toContain("transition:");
+        });
+    });
+    it("applies staggered transition delays", () => {
+        const { container } = render(ColourfulText, {
+            props: { text: "AB", duration: 0.5 },
+        });
+        const chars = container.querySelectorAll(".colourful-char");
+        const style0 = chars[0].getAttribute("style") ?? "";
+        const style1 = chars[1].getAttribute("style") ?? "";
+        expect(style0).toContain("0s");
+        expect(style1).toContain("0.05s");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(ColourfulText, {
+            props: { text: "Hi", class: "my-colourful" },
+        });
+        const wrapper = container.querySelector(".colourful-text");
+        expect(wrapper?.className).toContain("my-colourful");
+    });
+    it("renders an empty wrapper for empty text", () => {
+        const { container } = render(ColourfulText, { props: { text: "" } });
+        const chars = container.querySelectorAll(".colourful-char");
+        expect(chars.length).toBe(0);
+    });
+});

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

@@ -0,0 +1,21 @@
+# ColourfulText
+
+Per-character color animation. Each character is individually animated with shuffled colors that reshuffle every 5 seconds. Pure CSS transitions — no motion library dependency.
+
+## Props
+
+| Prop         | Type       | Default                    | Description                              |
+| ------------ | ---------- | -------------------------- | ---------------------------------------- |
+| `text`       | `string`   | **required**               | Text to animate                          |
+| `colors`     | `string[]` | 10 rainbow colors          | Array of colors to cycle through         |
+| `startColor` | `string`   | `'rgb(255, 255, 255)'`     | Initial color before animation           |
+| `duration`   | `number`   | `0.5`                      | Transition duration per character (secs) |
+| `class`      | `string`   | `''`                       | Additional CSS classes                   |
+
+## Usage
+
+```svelte
+<h1 class="text-4xl font-bold">
+  Make things <ColourfulText text="colourful" />
+</h1>
+```

package/dist/fancy-ui/colourful-text/index.d.ts

@@ -0,0 +1,2 @@
+import ColourfulText, { type ColourfulTextProps } from "./ColourfulText.svelte";
+export { ColourfulText, type ColourfulTextProps };

package/dist/fancy-ui/colourful-text/index.js

@@ -0,0 +1,2 @@
+import ColourfulText, {} from "./ColourfulText.svelte";
+export { ColourfulText };