fancy-ui-svelte 0.2.1

package/dist/fancy-ui/direction-aware-hover/DirectionAwareHover.svelte

@@ -0,0 +1,232 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { cn } from "../../utils";
+	import { fade } from "svelte/transition";
+
+	type Direction = "top" | "bottom" | "left" | "right";
+
+	interface Props {
+		imageUrl: string;
+		imageAlt?: string;
+		childrenClass?: string;
+		imageClass?: string;
+		class?: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let {
+		imageUrl,
+		imageAlt = "image",
+		childrenClass: childrenClassProp = "",
+		imageClass: imageClassProp = "",
+		class: className = "",
+		children,
+	}: Props = $props();
+
+	let divRef: HTMLDivElement;
+	let direction = $state<Direction | null>(null);
+	let isTouched = $state(false);
+	let isMobile = $state(false);
+	let touchTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function detectMobile() {
+		isMobile = window.matchMedia("(max-width: 768px)").matches || "ontouchstart" in window;
+	}
+
+	function getDirection(
+		ev: MouseEvent | { clientX: number; clientY: number },
+		obj: HTMLElement
+	): number {
+		const { width: w, height: h, left, top } = obj.getBoundingClientRect();
+		const x = ev.clientX - left - (w / 2) * (w > h ? h / w : 1);
+		const y = ev.clientY - top - (h / 2) * (h > w ? w / h : 1);
+		const d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
+		return d;
+	}
+
+	function mapDirection(d: number): Direction {
+		switch (d) {
+			case 0:
+				return "top";
+			case 1:
+				return "right";
+			case 2:
+				return "bottom";
+			case 3:
+				return "left";
+			default:
+				return "left";
+		}
+	}
+
+	function handleMouseEnter(event: MouseEvent) {
+		if (isMobile) return;
+		if (!divRef) return;
+
+		const fetchedDirection = getDirection(event, divRef);
+		direction = mapDirection(fetchedDirection);
+	}
+
+	function handleMouseLeave() {
+		if (isMobile) return;
+		direction = null;
+	}
+
+	function handleTouchStart(event: TouchEvent) {
+		if (!isMobile) return;
+
+		isTouched = true;
+
+		if (!divRef) return;
+		const touch = event.touches[0];
+		const fetchedDirection = getDirection(
+			{ clientX: touch.clientX, clientY: touch.clientY },
+			divRef
+		);
+		direction = mapDirection(fetchedDirection);
+
+		// Auto-hide after 3 seconds on mobile
+		if (touchTimer) clearTimeout(touchTimer);
+		touchTimer = setTimeout(() => {
+			handleTouchEnd();
+		}, 3000);
+	}
+
+	function handleTouchEnd() {
+		if (touchTimer) {
+			clearTimeout(touchTimer);
+			touchTimer = null;
+		}
+
+		setTimeout(() => {
+			direction = null;
+			isTouched = false;
+		}, 300);
+	}
+
+	let containerClass = $derived(
+		cn(
+			"group/card relative overflow-hidden rounded-lg bg-transparent transition-all duration-300",
+			"h-48 w-48",
+			"sm:h-64 sm:w-64",
+			"md:h-80 md:w-80",
+			"lg:h-96 lg:w-96",
+			"xl:h-[28rem] xl:w-[28rem]",
+			"touch-manipulation",
+			"active:scale-[0.98]",
+			"md:active:scale-100",
+			className
+		)
+	);
+
+	let imageClass = $derived(
+		cn(
+			"h-full w-full object-cover transition-transform duration-300",
+			"scale-125",
+			"sm:scale-[1.35]",
+			"md:scale-150",
+			imageClassProp
+		)
+	);
+
+	let childrenClass = $derived(
+		cn(
+			"absolute z-40 text-white transition-opacity duration-300",
+			"bottom-2 left-2 text-sm",
+			"sm:bottom-3 sm:left-3 sm:text-base",
+			"md:bottom-4 md:left-4 md:text-lg",
+			childrenClassProp
+		)
+	);
+
+	let overlayClass = $derived.by(() => {
+		const baseClasses = "absolute inset-0 z-10 transition-all duration-300";
+		const backgroundClasses = "bg-black/40 dark:bg-black/60";
+
+		let transformClasses = "";
+		switch (direction) {
+			case "top":
+				transformClasses = "-translate-y-full group-hover/card:translate-y-0";
+				break;
+			case "bottom":
+				transformClasses = "translate-y-full group-hover/card:translate-y-0";
+				break;
+			case "left":
+				transformClasses = "-translate-x-full group-hover/card:translate-x-0";
+				break;
+			case "right":
+				transformClasses = "translate-x-full group-hover/card:translate-x-0";
+				break;
+			default:
+				transformClasses = "";
+		}
+
+		return cn(baseClasses, backgroundClasses, transformClasses);
+	});
+
+	let imageContainerClass = $derived(
+		cn("relative size-full bg-gray-50 transition-transform duration-300 dark:bg-black", {
+			"translate-y-2 md:translate-y-5": direction === "top",
+			"-translate-y-2 md:-translate-y-5": direction === "bottom",
+			"translate-x-2 md:translate-x-5": direction === "left",
+			"-translate-x-2 md:-translate-x-5": direction === "right",
+		})
+	);
+
+	onMount(() => {
+		detectMobile();
+		window.addEventListener("resize", detectMobile);
+
+		return () => {
+			window.removeEventListener("resize", detectMobile);
+			if (touchTimer) {
+				clearTimeout(touchTimer);
+			}
+		};
+	});
+</script>
+
+<div
+	bind:this={divRef}
+	class={containerClass}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	ontouchstart={handleTouchStart}
+	ontouchend={handleTouchEnd}
+	role="figure"
+>
+	<div class="relative size-full overflow-hidden">
+		{#if direction !== null}
+			<div class={overlayClass} transition:fade={{ duration: 300 }}></div>
+		{/if}
+
+		<div class={imageContainerClass}>
+			<img src={imageUrl} alt={imageAlt} class={imageClass} width="1000" height="1000" />
+		</div>
+
+		{#if direction !== null || isTouched}
+			<div class={childrenClass} transition:fade={{ duration: 300 }}>
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Enhanced mobile touch targets */
+	@media (max-width: 768px) {
+		:global(.group\/card) {
+			min-height: 44px;
+			min-width: 44px;
+		}
+	}
+
+	/* Smooth transitions for reduced motion preference */
+	@media (prefers-reduced-motion: reduce) {
+		:global(*) {
+			transition-duration: 0.1s !important;
+		}
+	}
+</style>

package/dist/fancy-ui/direction-aware-hover/DirectionAwareHover.svelte.d.ts

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

package/dist/fancy-ui/direction-aware-hover/DirectionAwareHover.test.d.ts

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

package/dist/fancy-ui/direction-aware-hover/DirectionAwareHover.test.js

@@ -0,0 +1,78 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import DirectionAwareHover from "./DirectionAwareHover.svelte";
+describe("DirectionAwareHover", () => {
+    beforeEach(() => {
+        // Mock window.matchMedia (not available in jsdom)
+        Object.defineProperty(window, "matchMedia", {
+            writable: true,
+            value: vi.fn().mockImplementation((query) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: vi.fn(),
+                removeListener: vi.fn(),
+                addEventListener: vi.fn(),
+                removeEventListener: vi.fn(),
+                dispatchEvent: vi.fn(),
+            })),
+        });
+    });
+    afterEach(cleanup);
+    it("renders a figure container", () => {
+        const { container } = render(DirectionAwareHover, {
+            props: { imageUrl: "/test.jpg" },
+        });
+        const figure = container.querySelector('[role="figure"]');
+        expect(figure).toBeInTheDocument();
+    });
+    it("renders an image with correct src", () => {
+        const { container } = render(DirectionAwareHover, {
+            props: { imageUrl: "/test.jpg" },
+        });
+        const img = container.querySelector("img");
+        expect(img).toHaveAttribute("src", "/test.jpg");
+    });
+    it("renders an image with correct alt", () => {
+        const { container } = render(DirectionAwareHover, {
+            props: { imageUrl: "/test.jpg", imageAlt: "My image" },
+        });
+        const img = container.querySelector("img");
+        expect(img).toHaveAttribute("alt", "My image");
+    });
+    it("uses default alt text", () => {
+        const { container } = render(DirectionAwareHover, {
+            props: { imageUrl: "/test.jpg" },
+        });
+        const img = container.querySelector("img");
+        expect(img).toHaveAttribute("alt", "image");
+    });
+    it("has overflow-hidden class on the container", () => {
+        const { container } = render(DirectionAwareHover, {
+            props: { imageUrl: "/test.jpg" },
+        });
+        const figure = container.querySelector('[role="figure"]');
+        expect(figure?.className).toContain("overflow-hidden");
+    });
+    it("has rounded-lg class on the container", () => {
+        const { container } = render(DirectionAwareHover, {
+            props: { imageUrl: "/test.jpg" },
+        });
+        const figure = container.querySelector('[role="figure"]');
+        expect(figure?.className).toContain("rounded-lg");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(DirectionAwareHover, {
+            props: { imageUrl: "/test.jpg", class: "custom-hover" },
+        });
+        const figure = container.querySelector('[role="figure"]');
+        expect(figure?.className).toContain("custom-hover");
+    });
+    it("image has object-cover class", () => {
+        const { container } = render(DirectionAwareHover, {
+            props: { imageUrl: "/test.jpg" },
+        });
+        const img = container.querySelector("img");
+        expect(img?.className).toContain("object-cover");
+    });
+});

package/dist/fancy-ui/direction-aware-hover/README.md

@@ -0,0 +1,47 @@
+# DirectionAwareHover
+
+An image card that reveals an overlay sliding in from the direction the mouse entered.
+
+## Features
+
+- **Direction detection**: Overlay slides in from the direction the cursor enters
+- **Image parallax**: Image shifts slightly opposite to the hover direction
+- **Touch support**: Tap on mobile to reveal, auto-hides after 3 seconds
+- **Responsive**: Scales from mobile to desktop with appropriate sizing
+- **Reduced motion**: Respects `prefers-reduced-motion`
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `imageUrl` | `string` | (required) | URL of the image to display |
+| `imageAlt` | `string` | `'image'` | Alt text for the image |
+| `class` | `string` | `''` | Additional CSS classes for the container |
+| `imageClass` | `string` | `''` | Additional CSS classes for the image |
+| `childrenClass` | `string` | `''` | Additional CSS classes for the content overlay |
+
+## Snippets
+
+| Snippet | Description |
+|---------|-------------|
+| `children` | Content to display on hover overlay |
+
+## Usage
+
+```svelte
+<script>
+  import { DirectionAwareHover } from '$lib/fancy-ui/direction-aware-hover';
+</script>
+
+<DirectionAwareHover imageUrl="/photo.jpg">
+  <p class="font-bold">Title</p>
+  <p class="text-sm">Subtitle</p>
+</DirectionAwareHover>
+```
+
+## Implementation Notes
+
+- Replaced Vue `Transition` with Svelte `transition:fade`
+- Replaced Vue computed with Svelte `$derived`
+- Extracted `mapDirection` helper to avoid repeated switch blocks
+- Used plain object for `getDirection` touch coordinates instead of constructing a `MouseEvent`

package/dist/fancy-ui/direction-aware-hover/index.d.ts

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

package/dist/fancy-ui/direction-aware-hover/index.js

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

package/dist/fancy-ui/displacement-text/DisplacementText.svelte

@@ -0,0 +1,224 @@
+<script lang="ts" module>
+	export interface DisplacementTextProps {
+		/** Text to display */
+		text?: string;
+		/** Font size in pixels */
+		fontSize?: number;
+		/** Font family */
+		font?: string;
+		/** Fixed text color (overrides theme colors) */
+		color?: string;
+		/** Text color in light mode */
+		lightColor?: string;
+		/** Text color in dark mode */
+		darkColor?: string;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import * as THREE from "three";
+	import { cn } from "../../utils.js";
+
+	let {
+		text = "Hover Me",
+		fontSize = 200,
+		font = "Inter, sans-serif",
+		color,
+		lightColor = "#000000",
+		darkColor = "#ffffff",
+		class: className = "",
+	}: DisplacementTextProps = $props();
+
+	let container: HTMLDivElement;
+
+	const vertexShader = `
+		varying vec2 vUv;
+		uniform vec3 uDisplacement;
+
+		float easeInOutCubic(float x) {
+			return x < 0.5 ? 4.0 * x * x * x : 1.0 - pow(-2.0 * x + 2.0, 3.0) / 2.0;
+		}
+
+		float map(float value, float min1, float max1, float min2, float max2) {
+			return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+		}
+
+		void main() {
+			vUv = uv;
+			vec3 displaced = position;
+			vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+			float dist = length(uDisplacement - worldPosition.rgb);
+			float minDistance = 3.0;
+
+			if (dist < minDistance) {
+				float mapped = map(dist, 0.0, minDistance, 1.0, 0.0);
+				displaced.z += easeInOutCubic(mapped);
+			}
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4(displaced, 1.0);
+		}
+	`;
+
+	const fragmentShader = `
+		varying vec2 vUv;
+		uniform sampler2D uTexture;
+
+		void main() {
+			gl_FragColor = texture2D(uTexture, vUv);
+		}
+	`;
+
+	function createTextTexture(t: string, size: number, f: string, c: string): THREE.Texture {
+		const canvas = document.createElement("canvas");
+		canvas.width = 2048;
+		canvas.height = 2048;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return new THREE.CanvasTexture(canvas);
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.font = `bold ${size}px ${f}`;
+		ctx.fillStyle = c;
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.fillText(t, canvas.width / 2, canvas.height / 2);
+
+		const texture = new THREE.CanvasTexture(canvas);
+		texture.needsUpdate = true;
+		return texture;
+	}
+
+	$effect(() => {
+		if (!container) return;
+
+		const _text = text;
+		const _fontSize = fontSize;
+		const _font = font;
+		const _color = color;
+		const _lightColor = lightColor;
+		const _darkColor = darkColor;
+
+		const rect = container.getBoundingClientRect();
+		const width = rect.width || 1;
+		const height = rect.height || 1;
+		if (height === 0) return;
+
+		const scene = new THREE.Scene();
+		scene.background = null;
+
+		const cameraDistance = 8;
+		const aspect = width / height;
+		const camera = new THREE.OrthographicCamera(
+			-cameraDistance * aspect,
+			cameraDistance * aspect,
+			cameraDistance,
+			-cameraDistance,
+			0.01,
+			1000
+		);
+		camera.position.set(0, -10, 5);
+		camera.lookAt(0, 0, 0);
+
+		const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+		renderer.setClearColor(0x000000, 0);
+		renderer.setPixelRatio(window.devicePixelRatio);
+		renderer.setSize(width, height, false);
+		renderer.domElement.style.width = "100%";
+		renderer.domElement.style.height = "100%";
+		container.appendChild(renderer.domElement);
+
+		const geometry = new THREE.PlaneGeometry(15, 15, 100, 100);
+		const getActiveColor = () =>
+			_color || (document.documentElement.classList.contains("dark") ? _darkColor : _lightColor);
+
+		let currentColor = getActiveColor();
+		let textTexture = createTextTexture(_text, _fontSize, _font, currentColor);
+
+		const shaderMaterial = new THREE.ShaderMaterial({
+			uniforms: {
+				uTexture: { value: textTexture },
+				uDisplacement: { value: new THREE.Vector3(0, 0, 0) },
+			},
+			vertexShader,
+			fragmentShader,
+			transparent: true,
+			depthWrite: false,
+			side: THREE.DoubleSide,
+		});
+
+		const plane = new THREE.Mesh(geometry, shaderMaterial);
+		plane.rotation.z = Math.PI / 4;
+		scene.add(plane);
+
+		const hitGeometry = new THREE.PlaneGeometry(500, 500);
+		const hitMaterial = new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 });
+		const hitPlane = new THREE.Mesh(hitGeometry, hitMaterial);
+		scene.add(hitPlane);
+
+		const raycaster = new THREE.Raycaster();
+		const pointer = new THREE.Vector2();
+
+		const onPointerMove = (e: PointerEvent) => {
+			const bounds = container.getBoundingClientRect();
+			pointer.x = ((e.clientX - bounds.left) / bounds.width) * 2 - 1;
+			pointer.y = -((e.clientY - bounds.top) / bounds.height) * 2 + 1;
+			raycaster.setFromCamera(pointer, camera);
+			const [hit] = raycaster.intersectObject(hitPlane);
+			if (hit) (shaderMaterial.uniforms.uDisplacement.value as THREE.Vector3).copy(hit.point);
+		};
+
+		container.addEventListener("pointermove", onPointerMove);
+
+		const handleResize = () => {
+			const r = container.getBoundingClientRect();
+			if (r.height === 0) return;
+			const a = r.width / r.height;
+			camera.left = -cameraDistance * a;
+			camera.right = cameraDistance * a;
+			camera.updateProjectionMatrix();
+			renderer.setSize(r.width, r.height, false);
+		};
+
+		window.addEventListener("resize", handleResize);
+
+		let animationId = 0;
+		const animate = () => {
+			animationId = requestAnimationFrame(animate);
+			renderer.render(scene, camera);
+		};
+		animate();
+
+		const observer = new MutationObserver(() => {
+			const next = getActiveColor();
+			if (next !== currentColor) {
+				const tex = createTextTexture(_text, _fontSize, _font, next);
+				shaderMaterial.uniforms.uTexture.value = tex;
+				textTexture.dispose();
+				textTexture = tex;
+				currentColor = next;
+			}
+		});
+		if (!_color)
+			observer.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ["class"],
+			});
+
+		return () => {
+			window.removeEventListener("resize", handleResize);
+			container.removeEventListener("pointermove", onPointerMove);
+			cancelAnimationFrame(animationId);
+			observer.disconnect();
+			if (renderer.domElement.parentNode === container) container.removeChild(renderer.domElement);
+			renderer.dispose();
+			textTexture.dispose();
+			geometry.dispose();
+			shaderMaterial.dispose();
+			hitGeometry.dispose();
+			hitMaterial.dispose();
+		};
+	});
+</script>
+
+<div bind:this={container} class={cn("relative h-[400px] w-full", className)}></div>

package/dist/fancy-ui/displacement-text/DisplacementText.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface DisplacementTextProps {
+    /** Text to display */
+    text?: string;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font family */
+    font?: string;
+    /** Fixed text color (overrides theme colors) */
+    color?: string;
+    /** Text color in light mode */
+    lightColor?: string;
+    /** Text color in dark mode */
+    darkColor?: string;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const DisplacementText: import("svelte").Component<DisplacementTextProps, {}, "">;
+type DisplacementText = ReturnType<typeof DisplacementText>;
+export default DisplacementText;

package/dist/fancy-ui/displacement-text/DisplacementText.test.d.ts

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