fancy-ui-svelte 0.2.1

package/dist/fancy-ui/hyper-text/HyperText.svelte

@@ -0,0 +1,112 @@
+<script lang="ts" module>
+	/**
+	 * HyperText - Character scramble effect
+	 *
+	 * Displays text that scrambles through random characters on hover (or on load),
+	 * then resolves back to the original text. Each character is individually animated
+	 * with a staggered reveal.
+	 */
+	export interface HyperTextProps {
+		/** Text to display and scramble */
+		text: string;
+		/** Total animation duration in ms */
+		duration?: number;
+		/** Whether to animate on initial load */
+		animateOnLoad?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+
+	let { text, duration = 800, animateOnLoad = false, class: className }: HyperTextProps = $props();
+
+	const ALPHABETS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+	let displayChars = $derived(text.split(""));
+	let displayText = $state<string[]>([]);
+	let intervalId: ReturnType<typeof setInterval> | null = null;
+	let iterations = 0;
+
+	// Sync displayText when text prop changes
+	$effect(() => {
+		displayText = displayChars;
+	});
+
+	function getRandomLetter(): string {
+		return ALPHABETS[Math.floor(Math.random() * ALPHABETS.length)];
+	}
+
+	function startAnimation() {
+		stopAnimation();
+		iterations = 0;
+		const intervalMs = duration / (text.length * 10);
+
+		intervalId = setInterval(() => {
+			if (iterations < text.length) {
+				displayText = displayText.map((l, i) =>
+					l === " " ? l : i <= iterations ? text[i] : getRandomLetter()
+				);
+				iterations += 0.1;
+			} else {
+				stopAnimation();
+				displayText = text.split("");
+			}
+		}, intervalMs);
+	}
+
+	function stopAnimation() {
+		if (intervalId) {
+			clearInterval(intervalId);
+			intervalId = null;
+		}
+	}
+
+	function triggerAnimation() {
+		iterations = 0;
+		startAnimation();
+	}
+
+	onMount(() => {
+		if (animateOnLoad) {
+			triggerAnimation();
+		}
+		return stopAnimation;
+	});
+</script>
+
+<div
+	class={cn("hyper-text flex scale-100 cursor-default overflow-hidden py-2", className)}
+	onmouseenter={triggerAnimation}
+	role="presentation"
+>
+	<div class="flex">
+		{#each displayText as letter, i (i)}
+			<span
+				class={cn("hyper-text-char inline-block font-mono", letter === " " ? "w-3" : "")}
+				style="animation:hyperFadeIn 0.3s ease forwards;animation-delay:{i *
+					(duration / (text.length * 10))}ms;opacity:0"
+			>
+				{letter.toUpperCase()}
+			</span>
+		{/each}
+	</div>
+</div>
+
+<style>
+	:global {
+		@keyframes hyperFadeIn {
+			0% {
+				opacity: 0;
+				transform: translateY(-10px);
+			}
+			100% {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+	}
+</style>

package/dist/fancy-ui/hyper-text/HyperText.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * HyperText - Character scramble effect
+ *
+ * Displays text that scrambles through random characters on hover (or on load),
+ * then resolves back to the original text. Each character is individually animated
+ * with a staggered reveal.
+ */
+export interface HyperTextProps {
+    /** Text to display and scramble */
+    text: string;
+    /** Total animation duration in ms */
+    duration?: number;
+    /** Whether to animate on initial load */
+    animateOnLoad?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const HyperText: import("svelte").Component<HyperTextProps, {}, "">;
+type HyperText = ReturnType<typeof HyperText>;
+export default HyperText;

package/dist/fancy-ui/hyper-text/HyperText.test.d.ts

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

package/dist/fancy-ui/hyper-text/HyperText.test.js

@@ -0,0 +1,39 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import HyperText from "./HyperText.svelte";
+describe("HyperText", () => {
+    afterEach(cleanup);
+    it("renders one span per character", () => {
+        const { container } = render(HyperText, { props: { text: "Hello" } });
+        const chars = container.querySelectorAll(".hyper-text-char");
+        expect(chars.length).toBe(5);
+    });
+    it("displays text in uppercase", () => {
+        const { container } = render(HyperText, { props: { text: "abc" } });
+        const wrapper = container.querySelector(".hyper-text");
+        // Text content may be scrambled or resolved, but should exist
+        expect(wrapper?.textContent?.trim().length).toBeGreaterThan(0);
+    });
+    it("applies custom class names", () => {
+        const { container } = render(HyperText, {
+            props: { text: "Test", class: "my-hyper" },
+        });
+        const wrapper = container.querySelector(".hyper-text");
+        expect(wrapper?.className).toContain("my-hyper");
+    });
+    it("applies animation styles to each character", () => {
+        const { container } = render(HyperText, { props: { text: "Hi" } });
+        const chars = container.querySelectorAll(".hyper-text-char");
+        chars.forEach((char) => {
+            const style = char.getAttribute("style") ?? "";
+            expect(style).toContain("animation");
+            expect(style).toContain("hyperFadeIn");
+        });
+    });
+    it("renders spaces with w-3 class", () => {
+        const { container } = render(HyperText, { props: { text: "A B" } });
+        const chars = container.querySelectorAll(".hyper-text-char");
+        expect(chars.length).toBe(3);
+        expect(chars[1].className).toContain("w-3");
+    });
+});

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

@@ -0,0 +1,19 @@
+# HyperText
+
+Character scramble effect. Displays text that scrambles through random uppercase characters on hover, then resolves back to the original text with staggered reveal.
+
+## Props
+
+| Prop            | Type      | Default | Description                        |
+| --------------- | --------- | ------- | ---------------------------------- |
+| `text`          | `string`  | required| Text to display and scramble       |
+| `duration`      | `number`  | `800`   | Total animation duration (ms)      |
+| `animateOnLoad` | `boolean` | `false` | Whether to animate on initial load |
+| `class`         | `string`  | `''`    | Additional CSS classes             |
+
+## Usage
+
+```svelte
+<HyperText text="Hover me!" />
+<HyperText text="Auto animate" animateOnLoad />
+```

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

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

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

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

package/dist/fancy-ui/image-trail-cursor/ImageTrailCursor.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" module>
+	import type { VariantType } from "./trail-variants.js";
+
+	export interface ImageTrailCursorProps {
+		images?: string[];
+		variant?: VariantType;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { cn } from "../../utils.js";
+	import { variantMap, type ImageTrailVariant } from "./trail-variants.js";
+
+	let { images = [], variant = "type1", class: className = "" }: ImageTrailCursorProps = $props();
+
+	let containerRef: HTMLDivElement;
+	let currentInstance: ImageTrailVariant | null = null;
+	let mounted = false;
+
+	function resetImageStyles() {
+		if (!containerRef) return;
+		const imgEls = containerRef.querySelectorAll<HTMLDivElement>(".content__img");
+		for (const el of imgEls) {
+			el.style.cssText = "";
+			const inner = el.querySelector<HTMLDivElement>(".content__img-inner");
+			if (inner) {
+				// Preserve background-image set by Svelte, only clear GSAP residue
+				const bgImage = inner.style.backgroundImage;
+				inner.style.cssText = "";
+				if (bgImage) inner.style.backgroundImage = bgImage;
+			}
+		}
+	}
+
+	function initializeVariant() {
+		if (!containerRef) return;
+
+		if (currentInstance) {
+			currentInstance.destroy();
+			currentInstance = null;
+		}
+
+		resetImageStyles();
+
+		const Variant = variantMap[variant] || variantMap.type1;
+		currentInstance = new Variant(containerRef);
+	}
+
+	onMount(() => {
+		initializeVariant();
+		mounted = true;
+
+		return () => {
+			if (currentInstance) {
+				currentInstance.destroy();
+				currentInstance = null;
+			}
+		};
+	});
+
+	$effect(() => {
+		// Track the variant prop
+		variant;
+
+		// Skip the first run (onMount handles initial setup)
+		if (!mounted) return;
+
+		initializeVariant();
+	});
+</script>
+
+<div
+	bind:this={containerRef}
+	class={cn("relative z-[100] h-full w-full overflow-visible rounded-lg bg-transparent", className)}
+	style="touch-action: none;"
+>
+	{#each images as image, i (variant + i)}
+		<div
+			class="content__img absolute top-0 left-0 aspect-[1.1] w-[120px] overflow-hidden rounded-[10px] opacity-0 [will-change:transform,filter] sm:w-[190px] sm:rounded-[15px]"
+		>
+			<div
+				class="content__img-inner absolute top-[-10px] left-[-10px] h-[calc(100%+20px)] w-[calc(100%+20px)] bg-cover bg-center"
+				style="background-image: url({image})"
+			></div>
+		</div>
+	{/each}
+</div>

package/dist/fancy-ui/image-trail-cursor/ImageTrailCursor.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { VariantType } from "./trail-variants.js";
+export interface ImageTrailCursorProps {
+    images?: string[];
+    variant?: VariantType;
+    class?: string;
+}
+declare const ImageTrailCursor: import("svelte").Component<ImageTrailCursorProps, {}, "">;
+type ImageTrailCursor = ReturnType<typeof ImageTrailCursor>;
+export default ImageTrailCursor;

package/dist/fancy-ui/image-trail-cursor/ImageTrailCursor.test.d.ts

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

package/dist/fancy-ui/image-trail-cursor/ImageTrailCursor.test.js

@@ -0,0 +1,60 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import ImageTrailCursor from "./ImageTrailCursor.svelte";
+describe("ImageTrailCursor", () => {
+    afterEach(cleanup);
+    it("renders a container div", () => {
+        const { container } = render(ImageTrailCursor);
+        const div = container.firstElementChild;
+        expect(div).toBeInTheDocument();
+    });
+    it("renders one content__img per image", () => {
+        const { container } = render(ImageTrailCursor, {
+            props: { images: ["/a.jpg", "/b.jpg", "/c.jpg"] },
+        });
+        const imgs = container.querySelectorAll(".content__img");
+        expect(imgs.length).toBe(3);
+    });
+    it("renders content__img-inner with background-image", () => {
+        const { container } = render(ImageTrailCursor, {
+            props: { images: ["/test.jpg"] },
+        });
+        const inner = container.querySelector(".content__img-inner");
+        expect(inner).toBeInTheDocument();
+        expect(inner?.style.backgroundImage).toContain("/test.jpg");
+    });
+    it("renders empty when no images provided", () => {
+        const { container } = render(ImageTrailCursor, { props: { images: [] } });
+        const imgs = container.querySelectorAll(".content__img");
+        expect(imgs.length).toBe(0);
+    });
+    it("applies custom class names", () => {
+        const { container } = render(ImageTrailCursor, {
+            props: { class: "my-trail" },
+        });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-trail");
+    });
+    it("preserves base classes", () => {
+        const { container } = render(ImageTrailCursor, {
+            props: { class: "extra" },
+        });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("relative");
+    });
+    it("sets touch-action: none on the container", () => {
+        const { container } = render(ImageTrailCursor);
+        const div = container.firstElementChild;
+        expect(div?.getAttribute("style")).toContain("touch-action: none");
+    });
+    it("uses responsive image classes (mobile-first + sm breakpoint)", () => {
+        const { container } = render(ImageTrailCursor, {
+            props: { images: ["/a.jpg"] },
+        });
+        const img = container.querySelector(".content__img");
+        expect(img?.className).toContain("w-[120px]");
+        expect(img?.className).toContain("rounded-[10px]");
+        expect(img?.className).toContain("sm:w-[190px]");
+        expect(img?.className).toContain("sm:rounded-[15px]");
+    });
+});

package/dist/fancy-ui/image-trail-cursor/README.md

@@ -0,0 +1,36 @@
+# ImageTrailCursor
+
+Cursor-following image trail effect with 8 animation variants. Images appear at the cursor position as you move the mouse, each variant providing a distinct visual style.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `images` | `string[]` | `[]` | Array of image URLs for the trail |
+| `variant` | `VariantType` | `'type1'` | Animation variant (`type1` through `type8`) |
+| `class` | `string` | `''` | Additional CSS classes for the container |
+
+## Variants
+
+| Variant | Description |
+|---------|-------------|
+| `type1` | Basic fade & scale trail |
+| `type2` | Scale-up with brightness burst |
+| `type3` | Float-up exit with random x drift |
+| `type4` | Momentum-based drift with brightness/contrast |
+| `type5` | Rotation + momentum fling |
+| `type6` | Speed-reactive size, blur, grayscale |
+| `type7` | Stacking trail with visible queue |
+| `type8` | 3D perspective based on cursor position |
+
+## Dependencies
+
+- **GSAP** (`gsap`) — Required for animation timelines. First GSAP dependency in the project.
+
+## Implementation Notes
+
+- Extracted a `BaseVariant` abstract class to eliminate ~800 lines of duplicated constructor/render/destroy boilerplate across the 8 variant classes.
+- Added proper `destroy()` methods (missing in vendor): cancels RAF, removes event listeners, kills GSAP tweens, cleans up `ImageItem` resize listeners.
+- Fixed `VariantType` to include `type8` (vendor TypeScript type stopped at `type7` but code had 8 variants).
+- Properly typed `variantMap` as `Record<VariantType, ...>` instead of `{ [key: string]: any }`.
+- The Svelte component resets inline styles before re-initializing on variant switch to prevent GSAP style residue.

package/dist/fancy-ui/image-trail-cursor/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ImageTrailCursor } from "./ImageTrailCursor.svelte";
+export type { ImageTrailCursorProps } from "./ImageTrailCursor.svelte";
+export type { VariantType } from "./trail-variants.js";

package/dist/fancy-ui/image-trail-cursor/index.js

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

package/dist/fancy-ui/image-trail-cursor/trail-variants.d.ts

@@ -0,0 +1,107 @@
+export type VariantType = "type1" | "type2" | "type3" | "type4" | "type5" | "type6" | "type7" | "type8";
+export interface ImageTrailVariant {
+    destroy(): void;
+}
+export declare class ImageItem {
+    DOM: {
+        el: HTMLDivElement;
+        inner: HTMLDivElement | null;
+    };
+    defaultStyle: gsap.TweenVars;
+    rect: DOMRect | null;
+    private resizeHandler;
+    constructor(DOM_el: HTMLDivElement);
+    private initEvents;
+    private getRect;
+    destroy(): void;
+}
+declare abstract class BaseVariant implements ImageTrailVariant {
+    protected container: HTMLDivElement;
+    protected DOM: {
+        el: HTMLDivElement;
+    };
+    protected images: ImageItem[];
+    protected imagesTotal: number;
+    protected imgPosition: number;
+    protected zIndexVal: number;
+    protected activeImagesCount: number;
+    protected isIdle: boolean;
+    protected mousePos: {
+        x: number;
+        y: number;
+    };
+    protected lastMousePos: {
+        x: number;
+        y: number;
+    };
+    protected cacheMousePos: {
+        x: number;
+        y: number;
+    };
+    protected touchActive: boolean;
+    private positionHistory;
+    private static readonly HISTORY_MAX_AGE;
+    private static readonly HISTORY_MAX_LEN;
+    private rafId;
+    private rafStarted;
+    private destroyed;
+    private handlePointerMove;
+    private initRender;
+    private handleTouchStart;
+    private handleTouchEnd;
+    constructor(container: HTMLDivElement);
+    private startRafLoop;
+    private pushPositionHistory;
+    protected getTouchVelocity(): {
+        dx: number;
+        dy: number;
+    };
+    protected get threshold(): number;
+    protected render(): void;
+    protected updateCache(): void;
+    protected abstract showNextImage(): void;
+    protected onImageActivated(): void;
+    protected onImageDeactivated(): void;
+    destroy(): void;
+}
+export declare class ImageTrailVariant1 extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant2 extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant3 extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant4 extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant5 extends BaseVariant {
+    private lastAngle;
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant6 extends BaseVariant {
+    protected updateCache(): void;
+    private mapSpeedToSize;
+    private mapSpeedToBrightness;
+    private mapSpeedToBlur;
+    private mapSpeedToGrayscale;
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant7 extends BaseVariant {
+    private visibleImagesCount;
+    private visibleImagesTotal;
+    constructor(container: HTMLDivElement);
+    protected updateCache(): void;
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariant8 extends BaseVariant {
+    private rotation;
+    private cachedRotation;
+    private zValue;
+    private cachedZValue;
+    constructor(container: HTMLDivElement);
+    protected showNextImage(): void;
+}
+export declare const variantMap: Record<VariantType, new (container: HTMLDivElement) => ImageTrailVariant>;
+export {};