fancy-ui-svelte 0.2.1

package/dist/fancy-ui/bg-stars/StarsBackground.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import { onMount } from "svelte";
+
+	interface Props {
+		/**
+		 * Parallax factor for mouse movement (default: 0.05)
+		 */
+		factor?: number;
+		/**
+		 * Base animation speed in seconds (default: 50)
+		 */
+		speed?: number;
+		/**
+		 * Spring stiffness for parallax (default: 50)
+		 */
+		stiffness?: number;
+		/**
+		 * Spring damping for parallax (default: 20)
+		 */
+		damping?: number;
+		/**
+		 * Color of the stars (default: #fff)
+		 */
+		starColor?: string;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Child content to render over the stars
+		 */
+		children?: import("svelte").Snippet;
+	}
+
+	let {
+		factor = 0.05,
+		speed = 50,
+		stiffness = 50,
+		damping = 20,
+		starColor = "#fff",
+		class: className,
+		children,
+	}: Props = $props();
+
+	// Star box-shadows (generated on mount)
+	let boxShadow1 = $state("");
+	let boxShadow2 = $state("");
+	let boxShadow3 = $state("");
+
+	// Spring animation state
+	let springX = $state(0);
+	let springY = $state(0);
+	let targetX = 0;
+	let targetY = 0;
+	let velocityX = 0;
+	let velocityY = 0;
+	let animationFrame: number;
+
+	function generateStars(count: number, color: string): string {
+		const shadows: string[] = [];
+		for (let i = 0; i < count; i++) {
+			const x = Math.floor(Math.random() * 4000) - 2000;
+			const y = Math.floor(Math.random() * 4000) - 2000;
+			shadows.push(`${x}px ${y}px ${color}`);
+		}
+		return shadows.join(", ");
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		const centerX = window.innerWidth / 2;
+		const centerY = window.innerHeight / 2;
+		targetX = -(e.clientX - centerX) * factor;
+		targetY = -(e.clientY - centerY) * factor;
+	}
+
+	function updateSpring() {
+		// Simple spring physics
+		const forceX = (targetX - springX) * (stiffness / 1000);
+		const forceY = (targetY - springY) * (stiffness / 1000);
+
+		velocityX = velocityX * (1 - damping / 100) + forceX;
+		velocityY = velocityY * (1 - damping / 100) + forceY;
+
+		springX += velocityX;
+		springY += velocityY;
+
+		animationFrame = requestAnimationFrame(updateSpring);
+	}
+
+	// Regenerate stars when color changes
+	$effect(() => {
+		boxShadow1 = generateStars(1000, starColor);
+		boxShadow2 = generateStars(400, starColor);
+		boxShadow3 = generateStars(200, starColor);
+	});
+
+	onMount(() => {
+		// Start spring animation loop
+		animationFrame = requestAnimationFrame(updateSpring);
+
+		return () => {
+			cancelAnimationFrame(animationFrame);
+		};
+	});
+
+	// Derived CSS custom properties for animation durations
+	let layer1Duration = $derived(`${speed}s`);
+	let layer2Duration = $derived(`${speed * 2}s`);
+	let layer3Duration = $derived(`${speed * 3}s`);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class={cn(
+		"relative size-full overflow-hidden bg-[radial-gradient(ellipse_at_bottom,_#262626_0%,_#000_100%)]",
+		className
+	)}
+	onmousemove={handleMouseMove}
+>
+	<div class="stars-parallax" style:transform="translate({springX}px, {springY}px)">
+		<!-- Star Layer 1 (smallest, fastest) -->
+		<div class="star-layer" style:--duration={layer1Duration}>
+			<div
+				class="star-field"
+				style:width="1px"
+				style:height="1px"
+				style:box-shadow={boxShadow1}
+			></div>
+			<div
+				class="star-field top-[2000px]"
+				style:width="1px"
+				style:height="1px"
+				style:box-shadow={boxShadow1}
+			></div>
+		</div>
+
+		<!-- Star Layer 2 (medium) -->
+		<div class="star-layer" style:--duration={layer2Duration}>
+			<div
+				class="star-field"
+				style:width="2px"
+				style:height="2px"
+				style:box-shadow={boxShadow2}
+			></div>
+			<div
+				class="star-field top-[2000px]"
+				style:width="2px"
+				style:height="2px"
+				style:box-shadow={boxShadow2}
+			></div>
+		</div>
+
+		<!-- Star Layer 3 (largest, slowest) -->
+		<div class="star-layer" style:--duration={layer3Duration}>
+			<div
+				class="star-field"
+				style:width="3px"
+				style:height="3px"
+				style:box-shadow={boxShadow3}
+			></div>
+			<div
+				class="star-field top-[2000px]"
+				style:width="3px"
+				style:height="3px"
+				style:box-shadow={boxShadow3}
+			></div>
+		</div>
+	</div>
+
+	<!-- Slot for child content -->
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.stars-parallax {
+		will-change: transform;
+	}
+
+	.star-layer {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 2000px;
+		animation: scroll-stars var(--duration, 50s) linear infinite;
+	}
+
+	.star-field {
+		position: absolute;
+		background: transparent;
+		border-radius: 50%;
+	}
+
+	@keyframes scroll-stars {
+		from {
+			transform: translateY(0);
+		}
+		to {
+			transform: translateY(-2000px);
+		}
+	}
+</style>

package/dist/fancy-ui/bg-stars/StarsBackground.svelte.d.ts

@@ -0,0 +1,33 @@
+interface Props {
+    /**
+     * Parallax factor for mouse movement (default: 0.05)
+     */
+    factor?: number;
+    /**
+     * Base animation speed in seconds (default: 50)
+     */
+    speed?: number;
+    /**
+     * Spring stiffness for parallax (default: 50)
+     */
+    stiffness?: number;
+    /**
+     * Spring damping for parallax (default: 20)
+     */
+    damping?: number;
+    /**
+     * Color of the stars (default: #fff)
+     */
+    starColor?: string;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Child content to render over the stars
+     */
+    children?: import("svelte").Snippet;
+}
+declare const StarsBackground: import("svelte").Component<Props, {}, "">;
+type StarsBackground = ReturnType<typeof StarsBackground>;
+export default StarsBackground;

package/dist/fancy-ui/bg-stars/StarsBackground.test.d.ts

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

package/dist/fancy-ui/bg-stars/StarsBackground.test.js

@@ -0,0 +1,46 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import StarsBackground from "./StarsBackground.svelte";
+describe("StarsBackground", () => {
+    afterEach(cleanup);
+    it("renders a container div", () => {
+        const { container } = render(StarsBackground);
+        const div = container.firstElementChild;
+        expect(div).toBeInTheDocument();
+    });
+    it("has overflow-hidden class", () => {
+        const { container } = render(StarsBackground);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("overflow-hidden");
+    });
+    it("renders three star layers", () => {
+        const { container } = render(StarsBackground);
+        const layers = container.querySelectorAll(".star-layer");
+        expect(layers.length).toBe(3);
+    });
+    it("renders six star fields (2 per layer)", () => {
+        const { container } = render(StarsBackground);
+        const fields = container.querySelectorAll(".star-field");
+        expect(fields.length).toBe(6);
+    });
+    it("applies custom class names", () => {
+        const { container } = render(StarsBackground, {
+            props: { class: "my-stars" },
+        });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-stars");
+    });
+    it("preserves base classes when custom class is added", () => {
+        const { container } = render(StarsBackground, {
+            props: { class: "extra" },
+        });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("overflow-hidden");
+        expect(div?.className).toContain("size-full");
+    });
+    it("has radial gradient background class", () => {
+        const { container } = render(StarsBackground);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("bg-[radial-gradient");
+    });
+});

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

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

package/dist/fancy-ui/bg-stars/index.js

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

package/dist/fancy-ui/blur-reveal/BlurReveal.svelte

@@ -0,0 +1,126 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface BlurRevealProps {
+		/** Animation duration in seconds */
+		duration?: number;
+		/** Stagger delay between children in seconds */
+		delay?: number;
+		/** Initial blur amount (CSS value) */
+		blur?: string;
+		/** Initial vertical offset in pixels */
+		yOffset?: number;
+		/** Additional CSS classes for the container */
+		class?: string;
+		/** Content to reveal */
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+
+	let {
+		duration = 1,
+		delay = 0.2,
+		blur = "20px",
+		yOffset = 20,
+		class: className,
+		children,
+	}: BlurRevealProps = $props();
+
+	let containerRef: HTMLDivElement;
+	let isInView = $state(false);
+
+	onMount(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						isInView = true;
+						observer.disconnect();
+					}
+				}
+			},
+			{ threshold: 0.1 }
+		);
+
+		observer.observe(containerRef);
+
+		return () => observer.disconnect();
+	});
+</script>
+
+<div
+	bind:this={containerRef}
+	class={cn(className)}
+	style:--blur-reveal-duration="{duration}s"
+	style:--blur-reveal-delay="{delay}s"
+	style:--blur-reveal-blur={blur}
+	style:--blur-reveal-y="{yOffset}px"
+>
+	{#if children}
+		<div class="blur-reveal-wrapper" class:is-visible={isInView}>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.blur-reveal-wrapper > :global(*) {
+		opacity: 0;
+		filter: blur(var(--blur-reveal-blur, 20px));
+		transform: translateY(var(--blur-reveal-y, 20px));
+		transition:
+			opacity var(--blur-reveal-duration, 1s) ease-in-out,
+			filter var(--blur-reveal-duration, 1s) ease-in-out,
+			transform var(--blur-reveal-duration, 1s) ease-in-out;
+	}
+
+	.blur-reveal-wrapper.is-visible > :global(*) {
+		opacity: 1;
+		filter: blur(0px);
+		transform: translateY(0);
+	}
+
+	/* Stagger delays for direct children */
+	.blur-reveal-wrapper.is-visible > :global(:nth-child(1)) {
+		transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 0);
+	}
+	.blur-reveal-wrapper.is-visible > :global(:nth-child(2)) {
+		transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 1);
+	}
+	.blur-reveal-wrapper.is-visible > :global(:nth-child(3)) {
+		transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 2);
+	}
+	.blur-reveal-wrapper.is-visible > :global(:nth-child(4)) {
+		transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 3);
+	}
+	.blur-reveal-wrapper.is-visible > :global(:nth-child(5)) {
+		transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 4);
+	}
+	.blur-reveal-wrapper.is-visible > :global(:nth-child(6)) {
+		transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 5);
+	}
+	.blur-reveal-wrapper.is-visible > :global(:nth-child(7)) {
+		transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 6);
+	}
+	.blur-reveal-wrapper.is-visible > :global(:nth-child(8)) {
+		transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 7);
+	}
+	.blur-reveal-wrapper.is-visible > :global(:nth-child(9)) {
+		transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 8);
+	}
+	.blur-reveal-wrapper.is-visible > :global(:nth-child(10)) {
+		transition-delay: calc(var(--blur-reveal-delay, 0.2s) * 9);
+	}
+
+	/* Respect reduced motion */
+	@media (prefers-reduced-motion: reduce) {
+		.blur-reveal-wrapper > :global(*) {
+			transition-duration: 0.1s !important;
+			transition-delay: 0s !important;
+		}
+	}
+</style>

package/dist/fancy-ui/blur-reveal/BlurReveal.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+export interface BlurRevealProps {
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Stagger delay between children in seconds */
+    delay?: number;
+    /** Initial blur amount (CSS value) */
+    blur?: string;
+    /** Initial vertical offset in pixels */
+    yOffset?: number;
+    /** Additional CSS classes for the container */
+    class?: string;
+    /** Content to reveal */
+    children?: Snippet;
+}
+declare const BlurReveal: import("svelte").Component<BlurRevealProps, {}, "">;
+type BlurReveal = ReturnType<typeof BlurReveal>;
+export default BlurReveal;

package/dist/fancy-ui/blur-reveal/BlurReveal.test.d.ts

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

package/dist/fancy-ui/blur-reveal/BlurReveal.test.js

@@ -0,0 +1,47 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import BlurReveal from "./BlurReveal.svelte";
+describe("BlurReveal", () => {
+    beforeEach(() => {
+        // Mock IntersectionObserver (not available in jsdom) - must be a class
+        global.IntersectionObserver = class {
+            observe = vi.fn();
+            unobserve = vi.fn();
+            disconnect = vi.fn();
+        };
+    });
+    afterEach(cleanup);
+    it("renders a container div", () => {
+        const { container } = render(BlurReveal);
+        const div = container.firstElementChild;
+        expect(div).toBeInTheDocument();
+    });
+    it("sets default CSS custom properties", () => {
+        const { container } = render(BlurReveal);
+        const div = container.firstElementChild;
+        expect(div.style.getPropertyValue("--blur-reveal-duration")).toBe("1s");
+        expect(div.style.getPropertyValue("--blur-reveal-delay")).toBe("0.2s");
+        expect(div.style.getPropertyValue("--blur-reveal-blur")).toBe("20px");
+        expect(div.style.getPropertyValue("--blur-reveal-y")).toBe("20px");
+    });
+    it("sets CSS custom properties from props", () => {
+        const { container } = render(BlurReveal, {
+            props: { duration: 2, delay: 0.5, blur: "10px", yOffset: 30 },
+        });
+        const div = container.firstElementChild;
+        expect(div.style.getPropertyValue("--blur-reveal-duration")).toBe("2s");
+        expect(div.style.getPropertyValue("--blur-reveal-delay")).toBe("0.5s");
+        expect(div.style.getPropertyValue("--blur-reveal-blur")).toBe("10px");
+        expect(div.style.getPropertyValue("--blur-reveal-y")).toBe("30px");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(BlurReveal, { props: { class: "my-reveal" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-reveal");
+    });
+    it("does not render blur-reveal-wrapper without children", () => {
+        const { container } = render(BlurReveal);
+        const wrapper = container.querySelector(".blur-reveal-wrapper");
+        expect(wrapper).not.toBeInTheDocument();
+    });
+});

package/dist/fancy-ui/blur-reveal/README.md

@@ -0,0 +1,41 @@
+# BlurReveal
+
+A scroll-triggered reveal animation that transitions children from blurred and offset to clear and in-place, with staggered delays.
+
+## Features
+
+- **Scroll trigger**: Animates when the element enters the viewport via IntersectionObserver
+- **Staggered children**: Each direct child animates sequentially with a configurable delay
+- **Customizable blur**: Control blur amount, Y offset, duration, and stagger delay
+- **Reduced motion**: Respects `prefers-reduced-motion`
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `duration` | `number` | `1` | Animation duration in seconds |
+| `delay` | `number` | `0.2` | Stagger delay between children in seconds |
+| `blur` | `string` | `'20px'` | Initial blur amount (CSS value) |
+| `yOffset` | `number` | `20` | Initial vertical offset in pixels |
+| `class` | `string` | `''` | Additional CSS classes for the container |
+
+## Usage
+
+```svelte
+<script>
+  import { BlurReveal } from '$lib/fancy-ui/blur-reveal';
+</script>
+
+<BlurReveal>
+  <h1>This fades in first</h1>
+  <p>This fades in second</p>
+  <p>This fades in third</p>
+</BlurReveal>
+```
+
+## Implementation Notes
+
+- Replaced `motion-v` with IntersectionObserver + CSS transitions
+- The reference design iterates VNodes from `slots.default()` to wrap each in a `Motion` component; this Svelte version applies stagger via `:nth-child` CSS selectors on direct children
+- Default `delay` changed from `2` to `0.2` — the original value was a multiplier used differently by motion-v
+- Supports up to 10 staggered children via CSS; beyond that, extra children animate with the same delay as the 10th

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

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

package/dist/fancy-ui/blur-reveal/index.js

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

package/dist/fancy-ui/book/Book.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import {
+		BOOK_RADIUS_MAP as radiusMap,
+		BOOK_SIZE_MAP as sizeMap,
+		BOOK_COLOR_MAP as colorMap,
+		BOOK_SHADOW_SIZE_MAP as shadowSizeMap,
+		type BookRadius,
+		type BookSize,
+		type BookColor,
+		type BookShadowSize,
+	} from "./index.js";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		class?: string;
+		duration?: number;
+		color?: BookColor;
+		isStatic?: boolean;
+		size?: BookSize;
+		radius?: BookRadius;
+		shadowSize?: BookShadowSize;
+		children?: Snippet;
+	}
+
+	let {
+		class: className = "",
+		duration = 1000,
+		color = "zinc",
+		isStatic = false,
+		size = "md",
+		radius = "md",
+		shadowSize = "lg",
+		children,
+	}: Props = $props();
+
+	let computedGradient = $derived(colorMap[color] || colorMap.zinc);
+</script>
+
+<div
+	class={cn(
+		"group z-10 w-min [--shadowColor:#bbb] [perspective:800px] dark:[--shadowColor:#111]",
+		className
+	)}
+>
+	<div
+		style="width: {sizeMap[size].width}; transition: transform {duration}ms ease"
+		class={cn(
+			"relative aspect-[3/4] [transform-style:preserve-3d]",
+			isStatic
+				? "[transform:rotateY(-30deg)]"
+				: "[transform:rotateY(0deg)] group-hover:[transform:rotateY(-30deg)]",
+			radiusMap[radius]
+		)}
+	>
+		<!-- Front face -->
+		<div
+			class="absolute inset-y-0 left-0 flex size-full flex-col justify-end overflow-hidden bg-gradient-to-tr p-6 text-white {computedGradient.from} {computedGradient.to} {radiusMap[
+				radius
+			]}"
+			style="transform: translateZ(25px); box-shadow: 5px 5px 20px var(--shadowColor);"
+		>
+			<div
+				class="absolute top-0 left-0 h-full"
+				style="min-width: 8.2%; background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 12%, hsla(0, 0%, 100%, .25) 29.25%, hsla(0, 0%, 100%, 0) 50.5%, hsla(0, 0%, 100%, 0) 75.25%, hsla(0, 0%, 100%, .25) 91%, hsla(0, 0%, 100%, 0)), linear-gradient(90deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .1) 12%, transparent 30%, rgba(0, 0, 0, .02) 50%, rgba(0, 0, 0, .2) 73.5%, rgba(0, 0, 0, .5) 75.25%, rgba(0, 0, 0, .15) 85.25%, transparent); opacity: 0.2;"
+			></div>
+			<div class="pl-1">
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+		</div>
+
+		<!-- Spine -->
+		<div
+			class="absolute left-0 bg-white"
+			style="top: 3px; bottom: 3px; width: 48px; transform: translateX({sizeMap[size]
+				.spineTranslation}) rotateY(90deg); background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(249,249,249,1) 50%);"
+		></div>
+
+		<!-- Back face -->
+		<div
+			class="absolute inset-y-0 left-0 flex size-full flex-col justify-end overflow-hidden bg-gradient-to-tr p-6 text-white {computedGradient.from} {computedGradient.to} {radiusMap[
+				radius
+			]}"
+			style="transform: translateZ(-25px); box-shadow: {shadowSizeMap[shadowSize]};"
+		></div>
+	</div>
+</div>

package/dist/fancy-ui/book/Book.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type BookRadius, type BookSize, type BookColor, type BookShadowSize } from "./index.js";
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    duration?: number;
+    color?: BookColor;
+    isStatic?: boolean;
+    size?: BookSize;
+    radius?: BookRadius;
+    shadowSize?: BookShadowSize;
+    children?: Snippet;
+}
+declare const Book: import("svelte").Component<Props, {}, "">;
+type Book = ReturnType<typeof Book>;
+export default Book;

package/dist/fancy-ui/book/Book.test.d.ts

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