fancy-ui-svelte 0.2.1

package/dist/fancy-ui/flickering-grid/FlickeringGrid.test.js

@@ -0,0 +1,34 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import FlickeringGrid from "./FlickeringGrid.svelte";
+describe("FlickeringGrid", () => {
+    afterEach(cleanup);
+    it("renders a container div", () => {
+        const { container } = render(FlickeringGrid);
+        const div = container.querySelector("div");
+        expect(div).toBeInTheDocument();
+    });
+    it("renders a canvas element inside the container", () => {
+        const { container } = render(FlickeringGrid);
+        const canvas = container.querySelector("canvas");
+        expect(canvas).toBeInTheDocument();
+    });
+    it("canvas has pointer-events-none class", () => {
+        const { container } = render(FlickeringGrid);
+        const canvas = container.querySelector("canvas");
+        expect(canvas?.className).toContain("pointer-events-none");
+    });
+    it("applies custom class names to the container", () => {
+        const { container } = render(FlickeringGrid, {
+            props: { class: "my-grid" },
+        });
+        const div = container.querySelector("div");
+        expect(div?.className).toContain("my-grid");
+    });
+    it("preserves base classes when custom class is added", () => {
+        const { container } = render(FlickeringGrid, { props: { class: "extra" } });
+        const div = container.querySelector("div");
+        expect(div?.className).toContain("w-full");
+        expect(div?.className).toContain("h-full");
+    });
+});

package/dist/fancy-ui/flickering-grid/README.md

@@ -0,0 +1,24 @@
+# FlickeringGrid
+
+Canvas-based grid of squares with flickering opacity. Uses ResizeObserver, IntersectionObserver, and requestAnimationFrame for performant rendering with automatic pause when off-screen.
+
+## Props
+
+| Prop            | Type     | Default      | Description                                     |
+| --------------- | -------- | ------------ | ----------------------------------------------- |
+| `squareSize`    | `number` | `4`          | Size of each grid square in pixels               |
+| `gridGap`       | `number` | `6`          | Gap between squares in pixels                    |
+| `flickerChance` | `number` | `0.3`        | Probability of opacity change per second (0-1)   |
+| `color`         | `string` | `'#000000'`  | Color of the squares (hex format)                |
+| `maxOpacity`    | `number` | `0.3`        | Maximum opacity of squares (0-1)                 |
+| `width`         | `number` | `undefined`  | Fixed width (defaults to container width)        |
+| `height`        | `number` | `undefined`  | Fixed height (defaults to container height)      |
+| `class`         | `string` | `''`         | Additional CSS classes                           |
+
+## Usage
+
+```svelte
+<div class="h-64 w-full">
+  <FlickeringGrid color="#6366f1" maxOpacity={0.5} flickerChance={0.2} />
+</div>
+```

package/dist/fancy-ui/flickering-grid/index.d.ts

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

package/dist/fancy-ui/flickering-grid/index.js

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

package/dist/fancy-ui/flip-card/FlipCard.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		rotate?: "x" | "y";
+		class?: string;
+		children?: Snippet;
+		back?: Snippet;
+	}
+
+	let { rotate = "y", class: className = "", children, back }: Props = $props();
+
+	const rotationClass = {
+		x: ["group-hover:[transform:rotateX(180deg)]", "[transform:rotateX(180deg)]"],
+		y: ["group-hover:[transform:rotateY(180deg)]", "[transform:rotateY(180deg)]"],
+	} as const;
+
+	let rotation = $derived(rotationClass[rotate]);
+</script>
+
+<div class={cn("group h-72 w-56 [perspective:1000px]", className)}>
+	<div
+		class={cn(
+			"relative h-full rounded-2xl transition-all duration-500 [transform-style:preserve-3d]",
+			rotation[0]
+		)}
+	>
+		<!-- Front -->
+		<div class="absolute size-full overflow-hidden rounded-2xl border [backface-visibility:hidden]">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+
+		<!-- Back -->
+		<div
+			class={cn(
+				"absolute h-full w-full overflow-hidden rounded-2xl border bg-black/80 p-4 text-slate-200 [backface-visibility:hidden]",
+				rotation[1]
+			)}
+		>
+			{#if back}
+				{@render back()}
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/fancy-ui/flip-card/FlipCard.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    rotate?: "x" | "y";
+    class?: string;
+    children?: Snippet;
+    back?: Snippet;
+}
+declare const FlipCard: import("svelte").Component<Props, {}, "">;
+type FlipCard = ReturnType<typeof FlipCard>;
+export default FlipCard;

package/dist/fancy-ui/flip-card/FlipCard.test.d.ts

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

package/dist/fancy-ui/flip-card/FlipCard.test.js

@@ -0,0 +1,36 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import FlipCard from "./FlipCard.svelte";
+describe("FlipCard", () => {
+    afterEach(cleanup);
+    it("renders the component", () => {
+        const { container } = render(FlipCard);
+        const wrapper = container.querySelector(".group");
+        expect(wrapper).toBeInTheDocument();
+    });
+    it("has perspective class", () => {
+        const { container } = render(FlipCard);
+        const wrapper = container.querySelector(".group");
+        expect(wrapper?.className).toContain("[perspective:1000px]");
+    });
+    it("defaults to Y-axis rotation", () => {
+        const { container } = render(FlipCard);
+        const inner = container.querySelector(".group > div");
+        expect(inner?.className).toContain("rotateY(180deg)");
+    });
+    it("supports X-axis rotation", () => {
+        const { container } = render(FlipCard, { props: { rotate: "x" } });
+        const inner = container.querySelector(".group > div");
+        expect(inner?.className).toContain("rotateX(180deg)");
+    });
+    it("applies custom class", () => {
+        const { container } = render(FlipCard, { props: { class: "my-card" } });
+        const wrapper = container.querySelector(".group");
+        expect(wrapper?.className).toContain("my-card");
+    });
+    it("renders front and back faces", () => {
+        const { container } = render(FlipCard);
+        const faces = container.querySelectorAll('[class*="backface-visibility"]');
+        expect(faces.length).toBe(2);
+    });
+});

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

@@ -0,0 +1,26 @@
+# FlipCard
+
+A card that flips to reveal back content on hover, using pure CSS 3D transforms.
+
+## Props
+
+| Prop     | Type         | Default | Description                     |
+| -------- | ------------ | ------- | ------------------------------- |
+| `rotate` | `"x" \| "y"` | `"y"`   | Axis of rotation                |
+| `class`  | `string`     | `""`    | Additional CSS classes          |
+
+## Snippets
+
+- `children` — Front face content
+- `back` — Back face content
+
+## Usage
+
+```svelte
+<FlipCard>
+  <img src="/front.jpg" alt="Front" class="size-full object-cover" />
+  {#snippet back()}
+    <p>Back content here</p>
+  {/snippet}
+</FlipCard>
+```

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

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

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

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

package/dist/fancy-ui/flip-words/FlipWords.svelte

@@ -0,0 +1,135 @@
+<script lang="ts" module>
+	/**
+	 * FlipWords - Cycling word animation
+	 *
+	 * Cycles through an array of words with per-letter fade-in animation.
+	 * Each word fades in letter-by-letter, stays visible for `duration` ms,
+	 * then scales/blurs out before the next word appears.
+	 */
+	export interface FlipWordsProps {
+		/** Array of words to cycle through */
+		words: string[];
+		/** Time each word stays visible (ms) */
+		duration?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+
+	let { words, duration = 3000, class: className }: FlipWordsProps = $props();
+
+	let currentIndex = $state(0);
+	let isVisible = $state(true);
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+	let currentWord = $derived(words[currentIndex] ?? "");
+	let splitWords = $derived(
+		currentWord.split(" ").map((word) => ({
+			word,
+			letters: word.split(""),
+		}))
+	);
+
+	function startAnimation() {
+		isVisible = false;
+
+		setTimeout(() => {
+			currentIndex = (currentIndex + 1) % words.length;
+			isVisible = true;
+		}, 600);
+	}
+
+	function scheduleNext() {
+		if (timeoutId) clearTimeout(timeoutId);
+		timeoutId = setTimeout(startAnimation, duration);
+	}
+
+	$effect(() => {
+		if (isVisible) {
+			scheduleNext();
+		}
+	});
+
+	onMount(() => {
+		return () => {
+			if (timeoutId) clearTimeout(timeoutId);
+		};
+	});
+</script>
+
+<div class="flip-words relative inline-block px-2">
+	{#if isVisible}
+		<div
+			class={cn(
+				"flip-words-enter relative z-10 inline-block text-left text-neutral-900 dark:text-neutral-100",
+				className
+			)}
+		>
+			{#each splitWords as wordObj, wordIndex (wordObj.word + wordIndex)}
+				<span
+					class="flip-words-word inline-block whitespace-nowrap opacity-0"
+					style="animation:flipFadeInWord 0.3s ease forwards;animation-delay:{wordIndex * 0.3}s"
+				>
+					{#each wordObj.letters as letter, letterIndex (wordObj.word + letterIndex)}
+						<span
+							class="inline-block opacity-0"
+							style="animation:flipFadeInLetter 0.2s ease forwards;animation-delay:{wordIndex *
+								0.3 +
+								letterIndex * 0.05}s">{letter}</span
+						>
+					{/each}
+					<span class="inline-block">&nbsp;</span>
+				</span>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	:global {
+		@keyframes flipFadeInWord {
+			0% {
+				opacity: 0;
+				transform: translateY(10px);
+				filter: blur(8px);
+			}
+			100% {
+				opacity: 1;
+				transform: translateY(0);
+				filter: blur(0);
+			}
+		}
+
+		@keyframes flipFadeInLetter {
+			0% {
+				opacity: 0;
+				transform: translateY(10px);
+				filter: blur(8px);
+			}
+			100% {
+				opacity: 1;
+				transform: translateY(0);
+				filter: blur(0);
+			}
+		}
+
+		@keyframes flipEnterWord {
+			0% {
+				opacity: 0;
+				transform: translateY(10px);
+			}
+			100% {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+	}
+
+	.flip-words-enter {
+		animation: flipEnterWord 0.6s ease-in-out forwards;
+	}
+</style>

package/dist/fancy-ui/flip-words/FlipWords.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * FlipWords - Cycling word animation
+ *
+ * Cycles through an array of words with per-letter fade-in animation.
+ * Each word fades in letter-by-letter, stays visible for `duration` ms,
+ * then scales/blurs out before the next word appears.
+ */
+export interface FlipWordsProps {
+    /** Array of words to cycle through */
+    words: string[];
+    /** Time each word stays visible (ms) */
+    duration?: number;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const FlipWords: import("svelte").Component<FlipWordsProps, {}, "">;
+type FlipWords = ReturnType<typeof FlipWords>;
+export default FlipWords;

package/dist/fancy-ui/flip-words/FlipWords.test.d.ts

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

package/dist/fancy-ui/flip-words/FlipWords.test.js

@@ -0,0 +1,50 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import FlipWords from "./FlipWords.svelte";
+describe("FlipWords", () => {
+    afterEach(cleanup);
+    it("renders the first word initially", () => {
+        const { container } = render(FlipWords, {
+            props: { words: ["Hello", "World"] },
+        });
+        const wordSpans = container.querySelectorAll(".flip-words-word");
+        expect(wordSpans.length).toBeGreaterThan(0);
+        const text = container.querySelector(".flip-words")?.textContent?.trim();
+        expect(text).toContain("Hello");
+    });
+    it("renders letters individually with animation", () => {
+        const { container } = render(FlipWords, { props: { words: ["ABC"] } });
+        const wrapper = container.querySelector(".flip-words-enter");
+        expect(wrapper).toBeTruthy();
+        // ABC = 3 letters inside word span
+        const letterSpans = wrapper?.querySelectorAll(".flip-words-word > span:not(.inline-block)");
+        // Should have letter spans with animation styles
+        expect(wrapper?.textContent).toContain("ABC");
+    });
+    it("applies custom class name", () => {
+        const { container } = render(FlipWords, {
+            props: { words: ["Test"], class: "my-custom" },
+        });
+        const inner = container.querySelector(".flip-words-enter");
+        expect(inner?.className).toContain("my-custom");
+    });
+    it("has animation styles on word spans", () => {
+        const { container } = render(FlipWords, {
+            props: { words: ["Hello World"] },
+        });
+        const wordSpans = container.querySelectorAll(".flip-words-word");
+        wordSpans.forEach((span) => {
+            const style = span.getAttribute("style") ?? "";
+            expect(style).toContain("animation");
+            expect(style).toContain("flipFadeInWord");
+        });
+    });
+    it("renders multiple words in a phrase with spaces", () => {
+        const { container } = render(FlipWords, {
+            props: { words: ["Hello World"] },
+        });
+        const wordSpans = container.querySelectorAll(".flip-words-word");
+        // "Hello World" split by space = 2 word groups
+        expect(wordSpans.length).toBe(2);
+    });
+});

package/dist/fancy-ui/flip-words/README.md

@@ -0,0 +1,17 @@
+# FlipWords
+
+Cycling word animation. Cycles through an array of words with per-letter fade-in animation. Each word appears letter-by-letter, stays visible for `duration` ms, then fades out before the next word appears.
+
+## Props
+
+| Prop       | Type       | Default  | Description                        |
+| ---------- | ---------- | -------- | ---------------------------------- |
+| `words`    | `string[]` | required | Array of words to cycle through    |
+| `duration` | `number`   | `3000`   | Time each word stays visible (ms)  |
+| `class`    | `string`   | `''`     | Additional CSS classes             |
+
+## Usage
+
+```svelte
+<FlipWords words={["Better", "Faster", "Stronger", "Bolder"]} />
+```

package/dist/fancy-ui/flip-words/index.d.ts

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

package/dist/fancy-ui/flip-words/index.js

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