fancy-ui-svelte 0.2.1

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

@@ -0,0 +1,52 @@
+export * from "./apple-card-carousel/index.js";
+export * from "./line-hover-link/index.js";
+export * from "./animated-beam/index.js";
+export * from "./animated-testimonials/index.js";
+export * from "./fluid-cursor/index.js";
+export * from "./animated-tooltip/index.js";
+export * from "./blur-reveal/index.js";
+export * from "./bg-falling-stars/index.js";
+export * from "./bg-stars/index.js";
+export * from "./border-beam/index.js";
+export * from "./glow-border/index.js";
+export * from "./marquee/index.js";
+export * from "./compare/index.js";
+export * from "./image-trail-cursor/index.js";
+export * from "./interactive-grid-pattern/index.js";
+export * from "./logo-cloud/index.js";
+export * from "./direction-aware-hover/index.js";
+export * from "./rainbow-button/index.js";
+export * from "./ripple-button/index.js";
+export * from "./shimmer-button/index.js";
+export * from "./timeline/index.js";
+export * from "./meteors/index.js";
+export * from "./flickering-grid/index.js";
+export * from "./neon-border/index.js";
+export * from "./colourful-text/index.js";
+export * from "./flip-words/index.js";
+export * from "./hyper-text/index.js";
+export * from "./letter-pullup/index.js";
+export * from "./number-ticker/index.js";
+export * from "./sparkles-text/index.js";
+export * from "./box-reveal/index.js";
+export * from "./card-3d/index.js";
+export * from "./card-spotlight/index.js";
+export * from "./bento-grid/index.js";
+export * from "./flip-card/index.js";
+export * from "./book/index.js";
+export * from "./glare-card/index.js";
+export * from "./text-reveal-card/index.js";
+export * from "./container-scroll/index.js";
+export * from "./container-text-flip/index.js";
+export * from "./focus/index.js";
+export * from "./liquid-glass/index.js";
+export * from "./smooth-cursor/index.js";
+export * from "./sparkles/index.js";
+export * from "./glowing-effect/index.js";
+export * from "./confetti/index.js";
+export * from "./ripple/index.js";
+export * from "./text-generate-effect/index.js";
+export * from "./line-shadow-text/index.js";
+export * from "./tracing-beam/index.js";
+export * from "./displacement-text/index.js";
+export { registry, categories, categoryLabels, categoryDescriptions, getAllComponents, getComponent, getComponentsByStatus, getComponentsByCategory, getComponentsGroupedByCategory, getComponentsGroupedByStatus, searchComponents, getStats, hasComponent, getComponentCategory, } from "./registry.js";

package/dist/fancy-ui/index.js

@@ -0,0 +1,64 @@
+// FancyUI - Component Library
+// Re-exports all implemented FancyUI components
+// =============================================================================
+// Components
+// =============================================================================
+export * from "./apple-card-carousel/index.js";
+export * from "./line-hover-link/index.js";
+export * from "./animated-beam/index.js";
+export * from "./animated-testimonials/index.js";
+export * from "./fluid-cursor/index.js";
+export * from "./animated-tooltip/index.js";
+export * from "./blur-reveal/index.js";
+export * from "./bg-falling-stars/index.js";
+export * from "./bg-stars/index.js";
+export * from "./border-beam/index.js";
+export * from "./glow-border/index.js";
+export * from "./marquee/index.js";
+export * from "./compare/index.js";
+export * from "./image-trail-cursor/index.js";
+export * from "./interactive-grid-pattern/index.js";
+export * from "./logo-cloud/index.js";
+export * from "./direction-aware-hover/index.js";
+export * from "./rainbow-button/index.js";
+export * from "./ripple-button/index.js";
+export * from "./shimmer-button/index.js";
+export * from "./timeline/index.js";
+export * from "./meteors/index.js";
+export * from "./flickering-grid/index.js";
+export * from "./neon-border/index.js";
+export * from "./colourful-text/index.js";
+export * from "./flip-words/index.js";
+export * from "./hyper-text/index.js";
+export * from "./letter-pullup/index.js";
+export * from "./number-ticker/index.js";
+export * from "./sparkles-text/index.js";
+export * from "./box-reveal/index.js";
+export * from "./card-3d/index.js";
+export * from "./card-spotlight/index.js";
+export * from "./bento-grid/index.js";
+export * from "./flip-card/index.js";
+export * from "./book/index.js";
+export * from "./glare-card/index.js";
+export * from "./text-reveal-card/index.js";
+export * from "./container-scroll/index.js";
+export * from "./container-text-flip/index.js";
+export * from "./focus/index.js";
+export * from "./liquid-glass/index.js";
+export * from "./smooth-cursor/index.js";
+export * from "./sparkles/index.js";
+export * from "./glowing-effect/index.js";
+export * from "./confetti/index.js";
+export * from "./ripple/index.js";
+export * from "./text-generate-effect/index.js";
+export * from "./line-shadow-text/index.js";
+export * from "./tracing-beam/index.js";
+export * from "./displacement-text/index.js";
+// =============================================================================
+// Registry
+// =============================================================================
+export { 
+// Data
+registry, categories, categoryLabels, categoryDescriptions, 
+// Helpers
+getAllComponents, getComponent, getComponentsByStatus, getComponentsByCategory, getComponentsGroupedByCategory, getComponentsGroupedByStatus, searchComponents, getStats, hasComponent, getComponentCategory, } from "./registry.js";

package/dist/fancy-ui/interactive-grid-pattern/InteractiveGridPattern.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" module>
+	export interface InteractiveGridPatternProps {
+		/** Additional CSS classes for the SVG container */
+		class?: string;
+		/** Additional CSS classes for individual squares */
+		squaresClassName?: string;
+		/** Width of each square in pixels */
+		width?: number;
+		/** Height of each square in pixels */
+		height?: number;
+		/** Grid dimensions [columns, rows] */
+		squares?: [number, number];
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		class: className,
+		squaresClassName,
+		width = 40,
+		height = 40,
+		squares = [24, 24] as [number, number],
+	}: InteractiveGridPatternProps = $props();
+
+	let hoveredSquare: number | null = $state(null);
+
+	const cols = $derived(squares[0]);
+	const rows = $derived(squares[1]);
+	const totalSquares = $derived(cols * rows);
+	const gridWidth = $derived(width * cols);
+	const gridHeight = $derived(height * rows);
+
+	function getX(index: number) {
+		return (index % cols) * width;
+	}
+
+	function getY(index: number) {
+		return Math.floor(index / cols) * height;
+	}
+</script>
+
+<svg
+	width={gridWidth}
+	height={gridHeight}
+	class={cn("absolute inset-0 h-full w-full border border-gray-400/30", className)}
+>
+	{#each { length: totalSquares } as _, index}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<rect
+			x={getX(index)}
+			y={getY(index)}
+			{width}
+			{height}
+			class={cn(
+				"interactive-grid-square stroke-gray-400/30 transition-all duration-100 ease-in-out",
+				hoveredSquare === index ? "fill-gray-300/30" : "fill-transparent",
+				squaresClassName
+			)}
+			onmouseenter={() => (hoveredSquare = index)}
+			onmouseleave={() => (hoveredSquare = null)}
+		/>
+	{/each}
+</svg>
+
+<style>
+	.interactive-grid-square:not(:hover) {
+		transition-duration: 1000ms;
+	}
+</style>

package/dist/fancy-ui/interactive-grid-pattern/InteractiveGridPattern.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface InteractiveGridPatternProps {
+    /** Additional CSS classes for the SVG container */
+    class?: string;
+    /** Additional CSS classes for individual squares */
+    squaresClassName?: string;
+    /** Width of each square in pixels */
+    width?: number;
+    /** Height of each square in pixels */
+    height?: number;
+    /** Grid dimensions [columns, rows] */
+    squares?: [number, number];
+}
+declare const InteractiveGridPattern: import("svelte").Component<InteractiveGridPatternProps, {}, "">;
+type InteractiveGridPattern = ReturnType<typeof InteractiveGridPattern>;
+export default InteractiveGridPattern;

package/dist/fancy-ui/interactive-grid-pattern/InteractiveGridPattern.test.d.ts

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

package/dist/fancy-ui/interactive-grid-pattern/InteractiveGridPattern.test.js

@@ -0,0 +1,47 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import InteractiveGridPattern from "./InteractiveGridPattern.svelte";
+describe("InteractiveGridPattern", () => {
+    afterEach(cleanup);
+    it("renders an SVG element", () => {
+        const { container } = render(InteractiveGridPattern, {
+            props: { squares: [3, 3] },
+        });
+        const svg = container.querySelector("svg");
+        expect(svg).toBeInTheDocument();
+    });
+    it("renders correct number of rect elements", () => {
+        const { container } = render(InteractiveGridPattern, {
+            props: { squares: [4, 3] },
+        });
+        const rects = container.querySelectorAll("rect");
+        expect(rects.length).toBe(12);
+    });
+    it("renders default 24x24 grid", () => {
+        const { container } = render(InteractiveGridPattern);
+        const rects = container.querySelectorAll("rect");
+        expect(rects.length).toBe(576);
+    });
+    it("each rect has interactive-grid-square class", () => {
+        const { container } = render(InteractiveGridPattern, {
+            props: { squares: [2, 2] },
+        });
+        const rects = container.querySelectorAll(".interactive-grid-square");
+        expect(rects.length).toBe(4);
+    });
+    it("applies custom class names to SVG", () => {
+        const { container } = render(InteractiveGridPattern, {
+            props: { squares: [2, 2], class: "my-grid" },
+        });
+        const svg = container.querySelector("svg");
+        expect(svg?.getAttribute("class")).toContain("my-grid");
+    });
+    it("sets correct SVG dimensions based on props", () => {
+        const { container } = render(InteractiveGridPattern, {
+            props: { squares: [5, 3], width: 50, height: 30 },
+        });
+        const svg = container.querySelector("svg");
+        expect(svg).toHaveAttribute("width", "250");
+        expect(svg).toHaveAttribute("height", "90");
+    });
+});

package/dist/fancy-ui/interactive-grid-pattern/README.md

@@ -0,0 +1,30 @@
+# InteractiveGridPattern
+
+SVG grid of squares that highlight on hover with smooth fade transitions.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { InteractiveGridPattern } from '$lib/fancy-ui/interactive-grid-pattern';
+</script>
+
+<div class="relative h-96 w-full overflow-hidden">
+  <InteractiveGridPattern />
+</div>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `class` | `string` | - | Classes on the SVG container |
+| `squaresClassName` | `string` | - | Classes on individual rect elements |
+| `width` | `number` | `40` | Square width in pixels |
+| `height` | `number` | `40` | Square height in pixels |
+| `squares` | `[number, number]` | `[24, 24]` | Grid dimensions `[columns, rows]` |
+
+## Implementation Notes
+
+- Uses `$state` for hover tracking, Svelte 5 `onmouseenter`/`onmouseleave` handlers
+- CSS transition: 100ms on hover-in, 1000ms on hover-out via `:not(:hover)` selector

package/dist/fancy-ui/interactive-grid-pattern/index.d.ts

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

package/dist/fancy-ui/interactive-grid-pattern/index.js

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

package/dist/fancy-ui/interactive-hover-button/InteractiveHoverButton.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	type BaseProps = {
+		/** Button label text */
+		text?: string;
+		/** Custom CSS class */
+		class?: string;
+		/** Button content (overrides text prop) */
+		children?: Snippet;
+	};
+
+	export type InteractiveHoverButtonProps = BaseProps & Omit<HTMLButtonAttributes, keyof BaseProps>;
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		text = "Button",
+		class: className,
+		children,
+		...restProps
+	}: InteractiveHoverButtonProps = $props();
+</script>
+
+<button
+	class={cn(
+		"group bg-background relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-semibold",
+		className
+	)}
+	{...restProps}
+>
+	<div class="flex items-center gap-2">
+		<div
+			class="bg-primary size-2 rounded-lg transition-all duration-300 group-hover:scale-[100.8]"
+		></div>
+		<span
+			class="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0"
+		>
+			{#if children}
+				{@render children()}
+			{:else}
+				{text}
+			{/if}
+		</span>
+	</div>
+
+	<div
+		class="text-primary-foreground absolute top-0 z-10 flex size-full translate-x-12 items-center justify-center gap-2 opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100"
+	>
+		<span>
+			{#if children}
+				{@render children()}
+			{:else}
+				{text}
+			{/if}
+		</span>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M5 12h14" />
+			<path d="m12 5 7 7-7 7" />
+		</svg>
+	</div>
+</button>

package/dist/fancy-ui/interactive-hover-button/InteractiveHoverButton.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type BaseProps = {
+    /** Button label text */
+    text?: string;
+    /** Custom CSS class */
+    class?: string;
+    /** Button content (overrides text prop) */
+    children?: Snippet;
+};
+export type InteractiveHoverButtonProps = BaseProps & Omit<HTMLButtonAttributes, keyof BaseProps>;
+declare const InteractiveHoverButton: import("svelte").Component<InteractiveHoverButtonProps, {}, "">;
+type InteractiveHoverButton = ReturnType<typeof InteractiveHoverButton>;
+export default InteractiveHoverButton;

package/dist/fancy-ui/interactive-hover-button/InteractiveHoverButton.test.d.ts

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

package/dist/fancy-ui/interactive-hover-button/InteractiveHoverButton.test.js

@@ -0,0 +1,64 @@
+import { render, screen, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import InteractiveHoverButton from "./InteractiveHoverButton.svelte";
+describe("InteractiveHoverButton", () => {
+    afterEach(cleanup);
+    it("renders a button element", () => {
+        render(InteractiveHoverButton);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it('renders default text "Button" when no text prop is provided', () => {
+        render(InteractiveHoverButton);
+        const button = screen.getByRole("button");
+        expect(button).toHaveTextContent("Button");
+    });
+    it("renders custom text from the text prop", () => {
+        render(InteractiveHoverButton, { props: { text: "Get Started" } });
+        const button = screen.getByRole("button");
+        expect(button).toHaveTextContent("Get Started");
+    });
+    it("displays the text twice (initial + hover overlay)", () => {
+        render(InteractiveHoverButton, { props: { text: "Subscribe" } });
+        const matches = screen.getAllByText("Subscribe");
+        expect(matches).toHaveLength(2);
+    });
+    it("renders the arrow SVG icon", () => {
+        render(InteractiveHoverButton);
+        const button = screen.getByRole("button");
+        const svg = button.querySelector("svg");
+        expect(svg).toBeInTheDocument();
+        expect(svg?.querySelectorAll("path")).toHaveLength(2);
+    });
+    it("applies custom class names", () => {
+        render(InteractiveHoverButton, { props: { class: "my-custom-class" } });
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("my-custom-class");
+    });
+    it("preserves base classes when custom class is added", () => {
+        render(InteractiveHoverButton, { props: { class: "extra" } });
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("overflow-hidden");
+        expect(button.className).toContain("rounded-full");
+    });
+    it("forwards native button attributes", () => {
+        render(InteractiveHoverButton, {
+            props: { disabled: true, type: "submit", "aria-label": "Sign up" },
+        });
+        const button = screen.getByRole("button");
+        expect(button).toBeDisabled();
+        expect(button).toHaveAttribute("type", "submit");
+        expect(button).toHaveAttribute("aria-label", "Sign up");
+    });
+    it("contains the dot element with bg-primary class", () => {
+        render(InteractiveHoverButton);
+        const button = screen.getByRole("button");
+        const dot = button.querySelector(".bg-primary");
+        expect(dot).toBeInTheDocument();
+    });
+    it("has hover overlay with translate and opacity classes", () => {
+        render(InteractiveHoverButton);
+        const button = screen.getByRole("button");
+        const overlay = button.querySelector(".translate-x-12.opacity-0");
+        expect(overlay).toBeInTheDocument();
+    });
+});

package/dist/fancy-ui/interactive-hover-button/README.md

@@ -0,0 +1,28 @@
+# InteractiveHoverButton
+
+Button with a hover animation: text slides out to the right while an arrow and duplicate text slide in from the right. A small `bg-primary` dot scales up to fill the button background.
+
+## Props
+
+| Prop       | Type     | Default    | Description                         |
+|------------|----------|------------|-------------------------------------|
+| `text`     | `string` | `"Button"` | Button label text                   |
+| `class`    | `string` | `""`       | Additional CSS classes              |
+| `children` | Snippet  | -          | Optional content (overrides `text`) |
+
+Also accepts all standard `<button>` attributes via `...restProps`.
+
+## Animation details
+
+All animations are pure CSS via Tailwind `group-hover` utilities, no JS required:
+
+- **Dot**: `scale-1` -> `scale-[100.8]` fills the button background with `bg-primary`
+- **Initial text**: slides right (`translate-x-12`) and fades out (`opacity-0`)
+- **Hover text + arrow**: slides in from right (`-translate-x-5`) and fades in (`opacity-100`)
+- All transitions use `duration-300`
+
+## Porting notes
+
+- Direct port, no structural changes needed
+- Inline SVG arrow (no Lucide dependency)
+- Uses theme tokens: `bg-background`, `bg-primary`, `text-primary-foreground`

package/dist/fancy-ui/interactive-hover-button/index.d.ts

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

package/dist/fancy-ui/interactive-hover-button/index.js

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

package/dist/fancy-ui/letter-pullup/LetterPullup.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" module>
+	/**
+	 * LetterPullup - Staggered letter pull-up animation
+	 *
+	 * Each letter of the provided text pulls up from below with a staggered delay,
+	 * creating a wave-like entrance effect. Pure CSS animation.
+	 */
+	export interface LetterPullupProps {
+		/** Text to animate (each character gets its own animation) */
+		words: string;
+		/** Delay between each letter animation (seconds) */
+		delay?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let { words, delay = 0.05, class: className }: LetterPullupProps = $props();
+
+	let letters = $derived(words.split(""));
+</script>
+
+<div class="letter-pullup flex justify-center">
+	{#each letters as letter, index (index)}
+		<span
+			class={cn(
+				"letter-pullup-char inline-block text-center text-4xl font-bold tracking-[-0.02em] text-black drop-shadow-sm md:leading-[5rem] dark:text-white",
+				className
+			)}
+			style="animation:letterPullUp 0.5s ease forwards;animation-delay:{index *
+				delay}s;opacity:0;transform:translateY(100px)"
+		>
+			{#if letter === " "}
+				&nbsp;
+			{:else}
+				{letter}
+			{/if}
+		</span>
+	{/each}
+</div>
+
+<style>
+	:global {
+		@keyframes letterPullUp {
+			0% {
+				opacity: 0;
+				transform: translateY(100px);
+			}
+			100% {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+	}
+</style>

package/dist/fancy-ui/letter-pullup/LetterPullup.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * LetterPullup - Staggered letter pull-up animation
+ *
+ * Each letter of the provided text pulls up from below with a staggered delay,
+ * creating a wave-like entrance effect. Pure CSS animation.
+ */
+export interface LetterPullupProps {
+    /** Text to animate (each character gets its own animation) */
+    words: string;
+    /** Delay between each letter animation (seconds) */
+    delay?: number;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const LetterPullup: import("svelte").Component<LetterPullupProps, {}, "">;
+type LetterPullup = ReturnType<typeof LetterPullup>;
+export default LetterPullup;

package/dist/fancy-ui/letter-pullup/LetterPullup.test.d.ts

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

package/dist/fancy-ui/letter-pullup/LetterPullup.test.js

@@ -0,0 +1,49 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import LetterPullup from "./LetterPullup.svelte";
+describe("LetterPullup", () => {
+    afterEach(cleanup);
+    it("renders one span per character", () => {
+        const { container } = render(LetterPullup, { props: { words: "Hello" } });
+        const chars = container.querySelectorAll(".letter-pullup-char");
+        expect(chars.length).toBe(5);
+    });
+    it("renders spaces as non-breaking spaces", () => {
+        const { container } = render(LetterPullup, { props: { words: "A B" } });
+        const chars = container.querySelectorAll(".letter-pullup-char");
+        expect(chars.length).toBe(3);
+        expect(chars[1].innerHTML).toContain(" ");
+    });
+    it("applies staggered animation delays", () => {
+        const { container } = render(LetterPullup, {
+            props: { words: "AB", delay: 0.1 },
+        });
+        const chars = container.querySelectorAll(".letter-pullup-char");
+        const style0 = chars[0].getAttribute("style") ?? "";
+        const style1 = chars[1].getAttribute("style") ?? "";
+        expect(style0).toContain("animation-delay");
+        expect(style0).toMatch(/animation-delay:\s*0s/);
+        expect(style1).toContain("animation-delay");
+        expect(style1).toMatch(/animation-delay:\s*0\.1s/);
+    });
+    it("applies custom class names", () => {
+        const { container } = render(LetterPullup, {
+            props: { words: "Hi", class: "my-pullup" },
+        });
+        const chars = container.querySelectorAll(".letter-pullup-char");
+        chars.forEach((char) => {
+            expect(char.className).toContain("my-pullup");
+        });
+    });
+    it("has pull-up animation style", () => {
+        const { container } = render(LetterPullup, { props: { words: "X" } });
+        const char = container.querySelector(".letter-pullup-char");
+        const style = char.getAttribute("style") ?? "";
+        expect(style).toContain("letterPullUp");
+    });
+    it("renders correct text content", () => {
+        const { container } = render(LetterPullup, { props: { words: "Test" } });
+        const wrapper = container.querySelector(".letter-pullup");
+        expect(wrapper?.textContent).toContain("Test");
+    });
+});

package/dist/fancy-ui/letter-pullup/README.md

@@ -0,0 +1,18 @@
+# LetterPullup
+
+Staggered letter pull-up animation. Each character pulls up from below with a configurable delay between letters, creating a wave-like entrance effect.
+
+## Props
+
+| Prop    | Type     | Default | Description                                 |
+| ------- | -------- | ------- | ------------------------------------------- |
+| `words` | `string` | required| Text to animate                             |
+| `delay` | `number` | `0.05`  | Delay between each letter animation (secs)  |
+| `class` | `string` | `''`    | Additional CSS classes                      |
+
+## Usage
+
+```svelte
+<LetterPullup words="Hello World" />
+<LetterPullup words="Slow reveal" delay={0.1} />
+```

package/dist/fancy-ui/letter-pullup/index.d.ts

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

package/dist/fancy-ui/letter-pullup/index.js

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