fancy-ui-svelte 0.2.1

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

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

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

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

package/dist/fancy-ui/tailwind.css

@@ -0,0 +1,3 @@
+/* Import this file in your app's CSS to include fancy-ui-svelte Tailwind classes:
+   @import "fancy-ui-svelte/tailwind.css"; */
+@source "..";

package/dist/fancy-ui/text-generate-effect/README.md

@@ -0,0 +1,14 @@
+# TextGenerateEffect
+
+Typewriter-style text reveal that fades in words one by one with an optional blur effect.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `words` | `string` | required | Text to animate (split on spaces) |
+| `filter` | `boolean` | `true` | Enable blur-to-sharp transition |
+| `duration` | `number` | `0.7` | Transition duration per word (seconds) |
+| `delay` | `number` | `0` | Initial delay before animation starts (ms) |
+| `stagger` | `number` | `200` | Delay between each word appearing (ms) |
+| `class` | `string` | — | Additional CSS classes |

package/dist/fancy-ui/text-generate-effect/TextGenerateEffect.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+	export interface TextGenerateEffectProps {
+		words: string;
+		filter?: boolean;
+		duration?: number;
+		delay?: number;
+		stagger?: number;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+
+	let {
+		words,
+		filter = true,
+		duration = 0.7,
+		delay = 0,
+		stagger = 200,
+		class: className,
+	}: TextGenerateEffectProps = $props();
+
+	let wordsArray = $derived(words.split(" "));
+	let scopeRef: HTMLDivElement;
+
+	onMount(() => {
+		const spans = scopeRef.querySelectorAll<HTMLSpanElement>("span");
+
+		const timeout = setTimeout(() => {
+			spans.forEach((span, index) => {
+				const wordTimeout = setTimeout(() => {
+					span.style.opacity = "1";
+					span.style.filter = filter ? "blur(0px)" : "none";
+				}, index * stagger);
+
+				// Store timeout ID for cleanup
+				(span as HTMLSpanElement & { _tid?: ReturnType<typeof setTimeout> })._tid = wordTimeout;
+			});
+		}, delay);
+
+		return () => {
+			clearTimeout(timeout);
+			spans.forEach((span) => {
+				const tid = (span as HTMLSpanElement & { _tid?: ReturnType<typeof setTimeout> })._tid;
+				if (tid) clearTimeout(tid);
+			});
+		};
+	});
+</script>
+
+<div class={cn("leading-snug tracking-wide", className)}>
+	<div bind:this={scopeRef}>
+		{#each wordsArray as word, idx (word + idx)}
+			<span
+				class="inline-block"
+				style="opacity: 0; filter: {filter
+					? 'blur(10px)'
+					: 'none'}; transition: opacity {duration}s, filter {duration}s;"
+			>
+				{word}&nbsp;
+			</span>
+		{/each}
+	</div>
+</div>

package/dist/fancy-ui/text-generate-effect/TextGenerateEffect.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface TextGenerateEffectProps {
+    words: string;
+    filter?: boolean;
+    duration?: number;
+    delay?: number;
+    stagger?: number;
+    class?: string;
+}
+declare const TextGenerateEffect: import("svelte").Component<TextGenerateEffectProps, {}, "">;
+type TextGenerateEffect = ReturnType<typeof TextGenerateEffect>;
+export default TextGenerateEffect;

package/dist/fancy-ui/text-generate-effect/TextGenerateEffect.test.d.ts

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

package/dist/fancy-ui/text-generate-effect/TextGenerateEffect.test.js

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/svelte";
+import TextGenerateEffect from "./TextGenerateEffect.svelte";
+describe("TextGenerateEffect", () => {
+    it("renders all words as spans", () => {
+        const { container } = render(TextGenerateEffect, {
+            props: { words: "hello world test" },
+        });
+        const spans = container.querySelectorAll("span");
+        expect(spans.length).toBe(3);
+    });
+    it("words start hidden with blur", () => {
+        const { container } = render(TextGenerateEffect, {
+            props: { words: "fade in" },
+        });
+        const spans = container.querySelectorAll("span");
+        expect(spans[0].style.opacity).toBe("0");
+        expect(spans[0].style.filter).toContain("blur(10px)");
+    });
+    it("words start hidden without blur when filter is false", () => {
+        const { container } = render(TextGenerateEffect, {
+            props: { words: "no blur", filter: false },
+        });
+        const spans = container.querySelectorAll("span");
+        expect(spans[0].style.opacity).toBe("0");
+        expect(spans[0].style.filter).toBe("none");
+    });
+    it("reveals words after stagger delay", async () => {
+        vi.useFakeTimers();
+        const { container } = render(TextGenerateEffect, {
+            props: { words: "one two three", stagger: 100 },
+        });
+        const spans = container.querySelectorAll("span");
+        // Flush the outer setTimeout(fn, 0) + first word setTimeout(fn, 0)
+        await vi.advanceTimersByTimeAsync(1);
+        expect(spans[0].style.opacity).toBe("1");
+        expect(spans[1].style.opacity).toBe("0");
+        // After 100ms — second word
+        await vi.advanceTimersByTimeAsync(100);
+        expect(spans[1].style.opacity).toBe("1");
+        expect(spans[2].style.opacity).toBe("0");
+        // After 200ms — third word
+        await vi.advanceTimersByTimeAsync(100);
+        expect(spans[2].style.opacity).toBe("1");
+        vi.useRealTimers();
+    });
+    it("respects initial delay", async () => {
+        vi.useFakeTimers();
+        const { container } = render(TextGenerateEffect, {
+            props: { words: "delayed text", delay: 500 },
+        });
+        const spans = container.querySelectorAll("span");
+        await vi.advanceTimersByTimeAsync(499);
+        expect(spans[0].style.opacity).toBe("0");
+        await vi.advanceTimersByTimeAsync(2);
+        expect(spans[0].style.opacity).toBe("1");
+        vi.useRealTimers();
+    });
+    it("applies custom class", () => {
+        const { container } = render(TextGenerateEffect, {
+            props: { words: "styled", class: "my-class" },
+        });
+        const wrapper = container.firstElementChild;
+        expect(wrapper.className).toContain("my-class");
+    });
+    it("sets custom duration in transition style", () => {
+        const { container } = render(TextGenerateEffect, {
+            props: { words: "fast", duration: 0.3 },
+        });
+        const span = container.querySelector("span");
+        expect(span.style.transition).toContain("0.3s");
+    });
+});

package/dist/fancy-ui/text-generate-effect/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextGenerateEffect } from "./TextGenerateEffect.svelte";
+export type { TextGenerateEffectProps } from "./TextGenerateEffect.svelte";

package/dist/fancy-ui/text-generate-effect/index.js

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

package/dist/fancy-ui/text-reveal-card/README.md

@@ -0,0 +1,36 @@
+# TextRevealCard
+
+A card that reveals text as the user drags their mouse horizontally. Features animated stars in the background.
+
+## Components
+
+- `TextRevealCard` — Main card with mouse/touch reveal
+- `TextRevealStars` — Animated floating star dots
+
+## Props (TextRevealCard)
+
+| Prop         | Type     | Default | Description                 |
+| ------------ | -------- | ------- | --------------------------- |
+| `starsCount` | `number` | `130`   | Number of star dots         |
+| `starsClass` | `string` | `""`    | CSS classes for star dots   |
+| `class`      | `string` | `""`    | Additional CSS classes      |
+
+## Snippets
+
+- `children` — Header content above the reveal area
+- `text` — The revealed text (shown on mouse drag)
+- `revealText` — The base text (always visible)
+
+## Usage
+
+```svelte
+<TextRevealCard>
+  <p class="text-lg font-bold text-white">Hover to reveal</p>
+  {#snippet text()}
+    <p class="text-4xl font-bold text-white">Revealed!</p>
+  {/snippet}
+  {#snippet revealText()}
+    <p class="text-4xl font-bold text-white/20">Hidden text</p>
+  {/snippet}
+</TextRevealCard>
+```

package/dist/fancy-ui/text-reveal-card/TextRevealCard.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import TextRevealStars from "./TextRevealStars.svelte";
+	import type { Snippet } from "svelte";
+	import { onMount } from "svelte";
+
+	interface Props {
+		class?: string;
+		starsCount?: number;
+		starsClass?: string;
+		children?: Snippet;
+		text?: Snippet;
+		revealText?: Snippet;
+	}
+
+	let {
+		class: className = "",
+		starsCount = 130,
+		starsClass = "",
+		children,
+		text,
+		revealText,
+	}: Props = $props();
+
+	let cardRef: HTMLDivElement;
+	let widthPercentage = $state(0);
+	let isMouseOver = $state(false);
+
+	let rotateDeg = $derived((widthPercentage - 50) * 0.1);
+
+	function mouseMoveHandler(event: MouseEvent) {
+		event.preventDefault();
+		if (cardRef) {
+			const rect = cardRef.getBoundingClientRect();
+			const relativeX = event.clientX - rect.left;
+			widthPercentage = (relativeX / rect.width) * 100;
+		}
+	}
+
+	function mouseLeaveHandler() {
+		isMouseOver = false;
+		setTimeout(() => {
+			if (!isMouseOver) {
+				widthPercentage = 0;
+			}
+		}, 100);
+	}
+
+	function mouseEnterHandler() {
+		isMouseOver = true;
+	}
+
+	function touchMoveHandler(event: TouchEvent) {
+		event.preventDefault();
+		if (cardRef) {
+			const rect = cardRef.getBoundingClientRect();
+			const relativeX = event.touches[0]!.clientX - rect.left;
+			widthPercentage = (relativeX / rect.width) * 100;
+		}
+	}
+</script>
+
+<div
+	bind:this={cardRef}
+	class={cn(
+		"relative w-full max-w-[40rem] overflow-hidden rounded-lg border border-white/[0.08] bg-[#1d1c20] p-4 sm:p-6 md:p-8",
+		className
+	)}
+	role="presentation"
+	onmouseenter={mouseEnterHandler}
+	onmouseleave={mouseLeaveHandler}
+	onmousemove={mouseMoveHandler}
+	ontouchstart={mouseEnterHandler}
+	ontouchend={mouseLeaveHandler}
+	ontouchmove={touchMoveHandler}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+
+	<div class="relative flex h-40 items-center overflow-hidden">
+		<!-- Reveal layer -->
+		<div
+			style="width: 100%; opacity: {widthPercentage > 0 ? 1 : 0}; clip-path: inset(0 {100 -
+				widthPercentage}% 0 0); transition: {isMouseOver ? 'none' : 'all 0.4s ease-out'};"
+			class="absolute z-20 bg-[#1d1c20] will-change-transform"
+		>
+			{#if text}
+				{@render text()}
+			{/if}
+		</div>
+
+		<!-- Reveal line -->
+		<div
+			style="left: {widthPercentage}%; transform: rotate({rotateDeg}deg); opacity: {widthPercentage >
+			0
+				? 1
+				: 0}; transition: {isMouseOver ? 'none' : 'all 0.4s ease-out'};"
+			class="absolute z-50 h-40 w-[8px] bg-gradient-to-b from-transparent via-neutral-800 to-transparent will-change-transform"
+		></div>
+
+		<!-- Background text + stars -->
+		<div
+			class="overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,white,transparent)]"
+		>
+			{#if revealText}
+				{@render revealText()}
+			{/if}
+			<TextRevealStars {starsCount} class={starsClass} />
+		</div>
+	</div>
+</div>

package/dist/fancy-ui/text-reveal-card/TextRevealCard.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    starsCount?: number;
+    starsClass?: string;
+    children?: Snippet;
+    text?: Snippet;
+    revealText?: Snippet;
+}
+declare const TextRevealCard: import("svelte").Component<Props, {}, "">;
+type TextRevealCard = ReturnType<typeof TextRevealCard>;
+export default TextRevealCard;

package/dist/fancy-ui/text-reveal-card/TextRevealCard.test.d.ts

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

package/dist/fancy-ui/text-reveal-card/TextRevealCard.test.js

@@ -0,0 +1,34 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import TextRevealCard from "./TextRevealCard.svelte";
+describe("TextRevealCard", () => {
+    afterEach(cleanup);
+    it("renders the component", () => {
+        const { container } = render(TextRevealCard);
+        const card = container.querySelector(".bg-\\[\\#1d1c20\\]");
+        expect(card).toBeInTheDocument();
+    });
+    it("applies custom class", () => {
+        const { container } = render(TextRevealCard, {
+            props: { class: "my-reveal" },
+        });
+        const card = container.firstElementChild;
+        expect(card?.className).toContain("my-reveal");
+    });
+    it("renders reveal line", () => {
+        const { container } = render(TextRevealCard);
+        const line = container.querySelector(".via-neutral-800");
+        expect(line).toBeInTheDocument();
+    });
+    it("renders stars container", () => {
+        const { container } = render(TextRevealCard);
+        // Stars are rendered inside the component
+        const starsContainer = container.querySelector(".absolute.inset-0");
+        expect(starsContainer).toBeInTheDocument();
+    });
+    it("starts with 0% width", () => {
+        const { container } = render(TextRevealCard);
+        const revealLayer = container.querySelector(".z-20");
+        expect(revealLayer?.style.opacity).toBe("0");
+    });
+});

package/dist/fancy-ui/text-reveal-card/TextRevealStars.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+
+	interface Props {
+		starsCount?: number;
+		class?: string;
+	}
+
+	let { starsCount = 130, class: className = "" }: Props = $props();
+
+	interface StarData {
+		top: string;
+		left: string;
+		targetTop: string;
+		targetLeft: string;
+		opacity: number;
+		duration: number;
+	}
+
+	function randomMove() {
+		return Math.random() * 4 - 2;
+	}
+
+	function random() {
+		return Math.random();
+	}
+
+	// Generate star data reactively based on starsCount
+	let stars: StarData[] = $derived(
+		Array.from({ length: starsCount }, () => ({
+			top: `calc(${random() * 100}% + ${randomMove()}px)`,
+			left: `calc(${random() * 100}% + ${randomMove()}px)`,
+			targetTop: `calc(${random() * 100}% + ${randomMove()}px)`,
+			targetLeft: `calc(${random() * 100}% + ${randomMove()}px)`,
+			opacity: random(),
+			duration: random() * 10 + 20,
+		}))
+	);
+</script>
+
+<div class="absolute inset-0">
+	{#each stars as star}
+		<span
+			class={cn(
+				"star-animate absolute z-[1] inline-block h-0.5 w-0.5 rounded-full bg-white",
+				className
+			)}
+			style="top:{star.top};left:{star.left};--target-top:{star.targetTop};--target-left:{star.targetLeft};--star-opacity:{star.opacity};animation-duration:{star.duration}s;"
+		></span>
+	{/each}
+</div>
+
+<style>
+	:global {
+		@keyframes star-drift {
+			0% {
+				opacity: 0;
+				transform: scale(1);
+			}
+			50% {
+				opacity: var(--star-opacity, 0.5);
+				transform: scale(1.2);
+			}
+			100% {
+				opacity: 0;
+				transform: scale(0);
+				top: var(--target-top);
+				left: var(--target-left);
+			}
+		}
+	}
+
+	.star-animate {
+		animation: star-drift linear infinite;
+	}
+</style>

package/dist/fancy-ui/text-reveal-card/TextRevealStars.svelte.d.ts

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

package/dist/fancy-ui/text-reveal-card/index.d.ts

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

package/dist/fancy-ui/text-reveal-card/index.js

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

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

@@ -0,0 +1,56 @@
+# Timeline
+
+A vertical timeline with scroll-driven progress line and sticky labels.
+
+## Features
+
+- **Scroll-driven progress**: Gradient line (purple → blue) grows as user scrolls
+- **Sticky labels**: Item labels stay visible while scrolling through content
+- **Dot indicators**: Visual markers on the timeline line
+- **Responsive**: Labels hidden on mobile, full layout on desktop
+- **ResizeObserver**: Recalculates height on layout changes
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `TimelineItem[]` | `[]` | Timeline entries with `id` and `label` |
+| `title` | `string` | — | Heading text above the timeline |
+| `description` | `string` | — | Subheading text |
+| `class` | `string` | `''` | Additional CSS classes |
+
+## Snippets
+
+| Snippet | Args | Description |
+|---------|------|-------------|
+| `content` | `(item: TimelineItem)` | Content rendered for each timeline entry |
+
+## Usage
+
+```svelte
+<script>
+  import { Timeline } from '$lib/fancy-ui/timeline';
+
+  const items = [
+    { id: 'step-1', label: '2024' },
+    { id: 'step-2', label: '2023' },
+  ];
+</script>
+
+<Timeline {items} title="My Journey">
+  {#snippet content(item)}
+    {#if item.id === 'step-1'}
+      <p>First step content</p>
+    {:else if item.id === 'step-2'}
+      <p>Second step content</p>
+    {/if}
+  {/snippet}
+</Timeline>
+```
+
+## Implementation Notes
+
+- Replaced `motion-v` `useScroll` / `useTransform` with a native scroll event listener
+- Replaced Vue named slots (`<slot :name="item.id">`) with a single `content` snippet that receives the item
+- Uses ResizeObserver to keep timeline height in sync
+- Uses theme tokens (`bg-background`, `text-foreground`) instead of hardcoded colors

package/dist/fancy-ui/timeline/Timeline.svelte

@@ -0,0 +1,141 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface TimelineItem {
+		id: string;
+		label: string;
+	}
+
+	export interface TimelineProps {
+		/** Timeline entries */
+		items?: TimelineItem[];
+		/** Heading text */
+		title?: string;
+		/** Subheading text */
+		description?: string;
+		/** Additional CSS classes for the outer wrapper */
+		class?: string;
+		/** Content snippet, called for each item */
+		content?: Snippet<[TimelineItem]>;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+
+	let { items = [], title, description, class: className, content }: TimelineProps = $props();
+
+	let timelineRef: HTMLDivElement;
+	let timelineHeight = $state(0);
+	let scrollProgress = $state(0);
+
+	let progressHeight = $derived(scrollProgress * timelineHeight);
+	let progressOpacity = $derived(Math.min(scrollProgress / 0.1, 1));
+
+	function updateProgress() {
+		if (!timelineRef) return;
+
+		const rect = timelineRef.getBoundingClientRect();
+		const viewportHeight = window.innerHeight;
+
+		// Start tracking when top of timeline reaches 10% from top of viewport
+		const startOffset = viewportHeight * 0.1;
+		// End tracking when bottom of timeline reaches 50% of viewport
+		const endOffset = viewportHeight * 0.5;
+
+		const start = rect.top - startOffset;
+		const end = rect.bottom - endOffset;
+		const total = end - start;
+
+		if (total <= 0) {
+			scrollProgress = 0;
+			return;
+		}
+
+		const progress = -start / total;
+		scrollProgress = Math.max(0, Math.min(1, progress));
+	}
+
+	onMount(() => {
+		if (timelineRef) {
+			timelineHeight = timelineRef.getBoundingClientRect().height;
+		}
+
+		const resizeObserver = new ResizeObserver(() => {
+			if (timelineRef) {
+				timelineHeight = timelineRef.getBoundingClientRect().height;
+			}
+		});
+
+		resizeObserver.observe(timelineRef);
+		window.addEventListener("scroll", updateProgress, { passive: true });
+		updateProgress();
+
+		return () => {
+			resizeObserver.disconnect();
+			window.removeEventListener("scroll", updateProgress);
+		};
+	});
+</script>
+
+<div class={cn("w-full font-sans md:px-10", className)}>
+	{#if title || description}
+		<div class="mx-auto max-w-7xl px-4 py-20 md:px-8 lg:px-10">
+			{#if title}
+				<h2 class="text-foreground mb-4 max-w-4xl text-lg md:text-4xl">
+					{title}
+				</h2>
+			{/if}
+			{#if description}
+				<p class="text-muted-foreground max-w-sm text-sm md:text-base">
+					{description}
+				</p>
+			{/if}
+		</div>
+	{/if}
+
+	<div bind:this={timelineRef} class="relative z-0 mx-auto max-w-7xl pb-20">
+		{#each items as item, index (`${item.id}-${index}`)}
+			<div class="flex justify-start pt-10 md:gap-10 md:pt-40">
+				<!-- Sticky label -->
+				<div
+					class="sticky top-40 z-40 flex max-w-xs flex-col items-center self-start md:w-full md:flex-row lg:max-w-sm"
+				>
+					<div
+						class="bg-background absolute left-3 flex size-10 items-center justify-center rounded-full md:left-3"
+					>
+						<div
+							class="size-4 rounded-full border border-neutral-300 bg-neutral-200 p-2 dark:border-neutral-700 dark:bg-neutral-800"
+						/>
+					</div>
+					<h3
+						class="hidden text-xl font-bold text-neutral-500 md:block md:pl-20 md:text-5xl dark:text-neutral-500"
+					>
+						{item.label}
+					</h3>
+				</div>
+
+				<!-- Item content -->
+				<div class="w-full pr-4 pl-20 md:pl-4">
+					{#if content}
+						{@render content(item)}
+					{/if}
+				</div>
+			</div>
+		{/each}
+
+		<!-- Background line -->
+		<div
+			style:height="{timelineHeight}px"
+			class="absolute top-0 left-8 w-[2px] overflow-hidden bg-[linear-gradient(to_bottom,var(--tw-gradient-stops))] from-transparent from-0% via-neutral-200 to-transparent to-[99%] [mask-image:linear-gradient(to_bottom,transparent_0%,black_10%,black_90%,transparent_100%)] md:left-8 dark:via-neutral-700"
+		>
+			<!-- Animated progress line -->
+			<div
+				style:height="{progressHeight}px"
+				style:opacity={progressOpacity}
+				class="absolute inset-x-0 top-0 w-[2px] rounded-full bg-gradient-to-t from-purple-500 from-0% via-blue-500 via-10% to-transparent"
+			></div>
+		</div>
+	</div>
+</div>