fancy-ui-svelte 0.2.1

package/dist/fancy-ui/bento-grid/BentoGridCard.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+
+	interface Props {
+		name: string;
+		description: string;
+		href: string;
+		cta: string;
+		class?: string;
+		icon?: import("svelte").Snippet;
+		background?: import("svelte").Snippet;
+	}
+
+	let {
+		name,
+		description: desc,
+		href,
+		cta,
+		class: className = "",
+		icon,
+		background,
+	}: Props = $props();
+</script>
+
+<div
+	class={cn(
+		"group relative col-span-3 flex flex-col justify-end overflow-hidden rounded-xl",
+		"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
+		"transform-gpu dark:bg-black dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] dark:[border:1px_solid_rgba(255,255,255,.1)]",
+		className
+	)}
+>
+	{#if background}
+		{@render background()}
+	{/if}
+
+	<div
+		class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"
+	>
+		{#if icon}
+			<div
+				class="size-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75"
+			>
+				{@render icon()}
+			</div>
+		{:else}
+			<div
+				class="size-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75"
+			></div>
+		{/if}
+		<h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300">
+			{name}
+		</h3>
+		<p class="max-w-lg text-neutral-400">{desc}</p>
+	</div>
+
+	<div
+		class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"
+	>
+		<a
+			{href}
+			class="pointer-events-auto inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
+		>
+			{cta} &rarr;
+		</a>
+	</div>
+	<div
+		class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"
+	></div>
+</div>

package/dist/fancy-ui/bento-grid/BentoGridCard.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    name: string;
+    description: string;
+    href: string;
+    cta: string;
+    class?: string;
+    icon?: import("svelte").Snippet;
+    background?: import("svelte").Snippet;
+}
+declare const BentoGridCard: import("svelte").Component<Props, {}, "">;
+type BentoGridCard = ReturnType<typeof BentoGridCard>;
+export default BentoGridCard;

package/dist/fancy-ui/bento-grid/BentoGridItem.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+
+	interface Props {
+		class?: string;
+		header?: import("svelte").Snippet;
+		icon?: import("svelte").Snippet;
+		title?: import("svelte").Snippet;
+		description?: import("svelte").Snippet;
+	}
+
+	let { class: className = "", header, icon, title, description }: Props = $props();
+</script>
+
+<div
+	class={cn(
+		"group/bento shadow-input row-span-1 flex flex-col justify-between space-y-4 rounded-xl border border-transparent bg-white p-4 transition duration-200 hover:shadow-xl dark:border-white/[0.2] dark:bg-black dark:shadow-none",
+		className
+	)}
+>
+	{#if header}
+		{@render header()}
+	{/if}
+	<div class="transition duration-200 group-hover/bento:translate-x-2">
+		{#if icon}
+			{@render icon()}
+		{/if}
+		{#if title}
+			<div class="my-2 font-sans font-bold text-neutral-600 dark:text-neutral-200">
+				{@render title()}
+			</div>
+		{/if}
+		{#if description}
+			<div class="font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300">
+				{@render description()}
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/fancy-ui/bento-grid/BentoGridItem.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    class?: string;
+    header?: import("svelte").Snippet;
+    icon?: import("svelte").Snippet;
+    title?: import("svelte").Snippet;
+    description?: import("svelte").Snippet;
+}
+declare const BentoGridItem: import("svelte").Component<Props, {}, "">;
+type BentoGridItem = ReturnType<typeof BentoGridItem>;
+export default BentoGridItem;

package/dist/fancy-ui/bento-grid/README.md

@@ -0,0 +1,51 @@
+# Bento Grid
+
+Bento-style grid layout for organizing features and content cards.
+
+## Components
+
+- **BentoGrid** — Grid container with responsive columns.
+- **BentoGridItem** — Slot-based item with header, icon, title, and description snippets.
+- **BentoGridCard** — Props-based card with name, description, CTA link, optional icon and background.
+
+## Props
+
+### BentoGrid
+
+| Prop    | Type     | Default | Description              |
+| ------- | -------- | ------- | ------------------------ |
+| `class` | `string` | `''`    | Additional grid classes  |
+
+### BentoGridItem
+
+| Prop          | Type      | Default | Description        |
+| ------------- | --------- | ------- | ------------------ |
+| `class`       | `string`  | `''`    | Additional classes |
+| `header`      | `Snippet` | —       | Header area slot   |
+| `icon`        | `Snippet` | —       | Icon slot          |
+| `title`       | `Snippet` | —       | Title slot         |
+| `description` | `Snippet` | —       | Description slot   |
+
+### BentoGridCard
+
+| Prop          | Type      | Default | Description              |
+| ------------- | --------- | ------- | ------------------------ |
+| `name`        | `string`  | —       | Card title               |
+| `description` | `string`  | —       | Card description         |
+| `href`        | `string`  | —       | CTA link URL             |
+| `cta`         | `string`  | —       | CTA button text          |
+| `class`       | `string`  | `''`    | Additional classes       |
+| `icon`        | `Snippet` | —       | Icon snippet             |
+| `background`  | `Snippet` | —       | Background overlay slot  |
+
+## Usage
+
+```svelte
+<BentoGrid>
+  <BentoGridItem class="md:col-span-2">
+    {#snippet header()}<div class="h-full bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl" />{/snippet}
+    {#snippet title()}Feature{/snippet}
+    {#snippet description()}Description here.{/snippet}
+  </BentoGridItem>
+</BentoGrid>
+```

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

@@ -0,0 +1,3 @@
+export { default as BentoGrid } from "./BentoGrid.svelte";
+export { default as BentoGridItem } from "./BentoGridItem.svelte";
+export { default as BentoGridCard } from "./BentoGridCard.svelte";

package/dist/fancy-ui/bento-grid/index.js

@@ -0,0 +1,3 @@
+export { default as BentoGrid } from "./BentoGrid.svelte";
+export { default as BentoGridItem } from "./BentoGridItem.svelte";
+export { default as BentoGridCard } from "./BentoGridCard.svelte";

package/dist/fancy-ui/bg-falling-stars/FallingStarsBg.svelte

@@ -0,0 +1,163 @@
+<script lang="ts" module>
+	export interface FallingStarsBgProps {
+		/** Star color as hex string */
+		color?: string;
+		/** Number of stars */
+		count?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils";
+	import { onMount } from "svelte";
+
+	interface Star {
+		x: number;
+		y: number;
+		z: number;
+		speed: number;
+	}
+
+	let { color = "#FFF", count = 200, class: className = "" }: FallingStarsBgProps = $props();
+
+	let canvas: HTMLCanvasElement;
+	let perspective = 0;
+	let stars: Star[] = [];
+	let ctx: CanvasRenderingContext2D | null = null;
+	let dpr = 1;
+	let rafId = 0;
+
+	function hexToRgb(hex: string) {
+		let h = (hex || "#000").replace(/^#/, "");
+		if (h.length === 3) {
+			h = h
+				.split("")
+				.map((c) => c + c)
+				.join("");
+		}
+		const bigint = parseInt(h, 16) || 0;
+		return {
+			r: (bigint >> 16) & 255,
+			g: (bigint >> 8) & 255,
+			b: bigint & 255,
+		};
+	}
+
+	let cachedRgb = $derived(hexToRgb(color));
+
+	function resizeCanvas() {
+		if (!canvas) return;
+
+		dpr = window.devicePixelRatio || 1;
+		const width = Math.max(1, Math.floor(canvas.clientWidth));
+		const height = Math.max(1, Math.floor(canvas.clientHeight));
+
+		canvas.width = Math.floor(width * dpr);
+		canvas.height = Math.floor(height * dpr);
+		canvas.style.width = `${width}px`;
+		canvas.style.height = `${height}px`;
+
+		ctx = canvas.getContext("2d");
+		if (ctx) {
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		}
+
+		perspective = width / 2;
+	}
+
+	function drawStar(star: Star, width: number, height: number) {
+		if (!ctx) return;
+
+		const scale = perspective / (perspective + star.z);
+		const x2d = width / 2 + star.x * scale;
+		const y2d = height / 2 + star.y * scale;
+		const size = Math.max(scale * 3, 0.5);
+
+		const prevScale = perspective / (perspective + star.z + star.speed * 15);
+		const xPrev = width / 2 + star.x * prevScale;
+		const yPrev = height / 2 + star.y * prevScale;
+
+		const rgb = cachedRgb;
+
+		// Layered strokes from wide+faint to narrow+brighter to fake blur
+		const layerAlphas = [0.08, 0.14, 0.22];
+		for (let i = 0; i < layerAlphas.length; i++) {
+			ctx.beginPath();
+			ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${layerAlphas[i]})`;
+			ctx.lineWidth = size * (1.4 + i * 1.2);
+			ctx.moveTo(x2d, y2d);
+			ctx.lineTo(xPrev, yPrev);
+			ctx.stroke();
+		}
+
+		// Sharp center line
+		ctx.beginPath();
+		ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.6)`;
+		ctx.lineWidth = Math.max(1, size);
+		ctx.moveTo(x2d, y2d);
+		ctx.lineTo(xPrev, yPrev);
+		ctx.stroke();
+
+		// Dot
+		ctx.beginPath();
+		ctx.fillStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`;
+		ctx.arc(x2d, y2d, Math.max(0.5, size / 4), 0, Math.PI * 2);
+		ctx.fill();
+	}
+
+	function loop() {
+		if (!canvas) return;
+		if (!ctx) ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		const width = canvas.clientWidth;
+		const height = canvas.clientHeight;
+
+		ctx.clearRect(0, 0, width, height);
+
+		for (let i = 0; i < stars.length; i++) {
+			const star = stars[i];
+			drawStar(star, width, height);
+
+			star.z -= star.speed;
+
+			if (star.z <= 0) {
+				star.z = width || 1;
+				star.x = (Math.random() - 0.5) * 2 * width;
+				star.y = (Math.random() - 0.5) * 2 * height;
+			}
+		}
+
+		rafId = requestAnimationFrame(loop);
+	}
+
+	onMount(() => {
+		resizeCanvas();
+
+		const cssWidth = canvas.clientWidth;
+		const cssHeight = canvas.clientHeight;
+		stars = [];
+		for (let i = 0; i < count; i++) {
+			stars.push({
+				x: (Math.random() - 0.5) * 2 * cssWidth,
+				y: (Math.random() - 0.5) * 2 * cssHeight,
+				z: Math.random() * (cssWidth || 1),
+				speed: Math.random() * 5 + 2,
+			});
+		}
+
+		rafId = requestAnimationFrame(loop);
+
+		const resizeObserver = new ResizeObserver(() => resizeCanvas());
+		resizeObserver.observe(canvas);
+
+		return () => {
+			if (rafId) cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+	});
+</script>
+
+<canvas bind:this={canvas} class={cn("absolute inset-0 h-full w-full", className)}></canvas>

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

@@ -0,0 +1,11 @@
+export interface FallingStarsBgProps {
+    /** Star color as hex string */
+    color?: string;
+    /** Number of stars */
+    count?: number;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const FallingStarsBg: import("svelte").Component<FallingStarsBgProps, {}, "">;
+type FallingStarsBg = ReturnType<typeof FallingStarsBg>;
+export default FallingStarsBg;

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

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

package/dist/fancy-ui/bg-falling-stars/FallingStarsBg.test.js

@@ -0,0 +1,50 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import FallingStarsBg from "./FallingStarsBg.svelte";
+describe("FallingStarsBg", () => {
+    beforeEach(() => {
+        // Mock ResizeObserver (not available in jsdom) - must be a class
+        global.ResizeObserver = class {
+            observe = vi.fn();
+            unobserve = vi.fn();
+            disconnect = vi.fn();
+        };
+    });
+    afterEach(cleanup);
+    it("renders a canvas element", () => {
+        const { container } = render(FallingStarsBg);
+        const canvas = container.querySelector("canvas");
+        expect(canvas).toBeInTheDocument();
+    });
+    it("canvas has absolute positioning class", () => {
+        const { container } = render(FallingStarsBg);
+        const canvas = container.querySelector("canvas");
+        expect(canvas?.className).toContain("absolute");
+    });
+    it("canvas has inset-0 class", () => {
+        const { container } = render(FallingStarsBg);
+        const canvas = container.querySelector("canvas");
+        expect(canvas?.className).toContain("inset-0");
+    });
+    it("canvas has full width and height classes", () => {
+        const { container } = render(FallingStarsBg);
+        const canvas = container.querySelector("canvas");
+        expect(canvas?.className).toContain("h-full");
+        expect(canvas?.className).toContain("w-full");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(FallingStarsBg, {
+            props: { class: "my-stars" },
+        });
+        const canvas = container.querySelector("canvas");
+        expect(canvas?.className).toContain("my-stars");
+    });
+    it("preserves base classes when custom class is added", () => {
+        const { container } = render(FallingStarsBg, { props: { class: "extra" } });
+        const canvas = container.querySelector("canvas");
+        expect(canvas?.className).toContain("absolute");
+        expect(canvas?.className).toContain("inset-0");
+        expect(canvas?.className).toContain("h-full");
+        expect(canvas?.className).toContain("w-full");
+    });
+});

package/dist/fancy-ui/bg-falling-stars/README.md

@@ -0,0 +1,22 @@
+# FallingStarsBg
+
+Canvas-based 3D starfield background with perspective projection, motion trails, and glow effects.
+
+## Props
+
+| Prop    | Type     | Default  | Description           |
+|---------|----------|----------|-----------------------|
+| `color` | `string` | `"#FFF"` | Star color (hex)      |
+| `count` | `number` | `200`    | Number of stars       |
+| `class` | `string` | `""`     | Additional CSS classes |
+
+## Implementation Notes
+
+- Canvas rendering with `requestAnimationFrame` loop — no CSS/SVG animations.
+- 3D perspective: stars move toward camera with depth-based scaling (`perspective / (perspective + z)`).
+- Motion trails: lines drawn from previous to current projected position.
+- Glow layers: multiple strokes with decreasing opacity (`[0.08, 0.14, 0.22]`) plus a sharp center line and dot.
+- HiDPI: uses `devicePixelRatio` for crisp rendering on Retina displays.
+- Uses `ResizeObserver` instead of window resize listener for better responsiveness.
+- `$derived` used for cached RGB conversion so it updates reactively when `color` prop changes.
+- Cleanup: animation frame and resize observer are cleaned up on unmount via `onMount` return.

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

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

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

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

package/dist/fancy-ui/bg-stars/README.md

@@ -0,0 +1,41 @@
+# StarsBackground
+
+Animated starfield background with parallax mouse tracking.
+
+## Implementation Notes
+
+- **Motion library**: Replaced `motion-v` with CSS animations and manual spring physics
+- **Stars**: Generated using box-shadow technique (1000 + 400 + 200 stars across 3 layers)
+- **Parallax**: Mouse movement creates depth effect via spring interpolation
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `factor` | `number` | `0.05` | Parallax factor for mouse movement |
+| `speed` | `number` | `50` | Base animation speed in seconds |
+| `stiffness` | `number` | `50` | Spring stiffness for parallax |
+| `damping` | `number` | `20` | Spring damping for parallax |
+| `starColor` | `string` | `#fff` | Color of the stars |
+| `class` | `string` | - | Additional CSS classes |
+| `children` | `Snippet` | - | Content to render over stars |
+
+## Usage
+
+```svelte
+<script>
+  import { StarsBackground } from '$lib/fancy-ui/bg-stars';
+</script>
+
+<StarsBackground class="h-screen">
+  <div class="relative z-10 flex items-center justify-center h-full">
+    <h1 class="text-4xl text-white">Hello Stars</h1>
+  </div>
+</StarsBackground>
+```
+
+## Svelte-specific Details
+
+- Spring transition options (`stiffness`, `damping`) are separate props instead of a config object
+- Uses CSS `@keyframes` instead of motion-v for the scroll animation
+- Manual spring physics implementation via `requestAnimationFrame`