fancy-ui-svelte 0.2.1 → 0.4.1

package/dist/fancy-ui/fluid-cursor/FluidCursorAdvanced.svelte.d.ts

@@ -0,0 +1,33 @@
+interface ColorRGB {
+    r: number;
+    g: number;
+    b: number;
+}
+interface Props {
+    simResolution?: number;
+    dyeResolution?: number;
+    captureResolution?: number;
+    densityDissipation?: number;
+    velocityDissipation?: number;
+    pressure?: number;
+    pressureIterations?: number;
+    curl?: number;
+    splatRadius?: number;
+    splatForce?: number;
+    shading?: boolean;
+    colorUpdateSpeed?: number;
+    backColor?: ColorRGB | string;
+    transparent?: boolean;
+    fluidColor?: string;
+    fluidColors?: string[];
+    colorIntensity?: number;
+    class?: string;
+    autoSplat?: boolean;
+    autoSplatInterval?: number;
+    interactive?: boolean;
+    pauseWhenHidden?: boolean;
+    splatOnMount?: boolean;
+}
+declare const FluidCursorAdvanced: import("svelte").Component<Props, {}, "">;
+type FluidCursorAdvanced = ReturnType<typeof FluidCursorAdvanced>;
+export default FluidCursorAdvanced;

package/dist/fancy-ui/fluid-cursor/FluidCursorAdvanced.test.d.ts

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

package/dist/fancy-ui/fluid-cursor/FluidCursorAdvanced.test.js

@@ -0,0 +1,86 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import FluidCursorAdvanced from "./FluidCursorAdvanced.svelte";
+describe("FluidCursorAdvanced", () => {
+    afterEach(cleanup);
+    it("renders a container div", () => {
+        const { container } = render(FluidCursorAdvanced);
+        const div = container.firstElementChild;
+        expect(div).toBeInTheDocument();
+    });
+    it("renders a canvas element", () => {
+        const { container } = render(FluidCursorAdvanced);
+        const canvas = container.querySelector("canvas");
+        expect(canvas).toBeInTheDocument();
+    });
+    it("canvas does not share the hard-coded id with FluidCursor", () => {
+        const { container } = render(FluidCursorAdvanced);
+        const canvas = container.querySelector("canvas");
+        expect(canvas?.id).not.toBe("fluid");
+    });
+    it("container has pointer-events-none class (contained mode)", () => {
+        const { container } = render(FluidCursorAdvanced);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("pointer-events-none");
+    });
+    it("container has absolute positioning in contained mode", () => {
+        const { container } = render(FluidCursorAdvanced);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("absolute");
+        expect(div?.className).toContain("inset-0");
+    });
+    it("canvas fills container in contained mode", () => {
+        const { container } = render(FluidCursorAdvanced);
+        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(FluidCursorAdvanced, { props: { class: "my-advanced" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-advanced");
+    });
+    describe("interaction props", () => {
+        it("interactive={false} does not register mouse event listeners", () => {
+            const addSpy = vi.spyOn(window, "addEventListener");
+            render(FluidCursorAdvanced, { props: { interactive: false } });
+            const mousedownCalls = addSpy.mock.calls.filter(([event]) => event === "mousedown");
+            expect(mousedownCalls).toHaveLength(0);
+            const mousemoveCalls = addSpy.mock.calls.filter(([event]) => event === "mousemove");
+            expect(mousemoveCalls).toHaveLength(0);
+            addSpy.mockRestore();
+        });
+        it("mounts without error with autoSplat={true} and splatOnMount={true}", () => {
+            const { container } = render(FluidCursorAdvanced, {
+                props: { autoSplat: true, splatOnMount: true },
+            });
+            expect(container.querySelector("canvas")).toBeInTheDocument();
+        });
+        it("pauseWhenHidden={false} does not instantiate IntersectionObserver", () => {
+            const observeSpy = vi.fn();
+            const mockObserver = vi.fn(() => ({ observe: observeSpy, disconnect: vi.fn() }));
+            vi.stubGlobal("IntersectionObserver", mockObserver);
+            render(FluidCursorAdvanced, { props: { pauseWhenHidden: false } });
+            expect(mockObserver).not.toHaveBeenCalled();
+            vi.unstubAllGlobals();
+        });
+    });
+    describe("color props", () => {
+        it("renders without error when fluidColor is provided", () => {
+            const { container } = render(FluidCursorAdvanced, { props: { fluidColor: "#6366f1" } });
+            expect(container.querySelector("canvas")).toBeInTheDocument();
+        });
+        it("renders without error when fluidColors palette is provided", () => {
+            const { container } = render(FluidCursorAdvanced, {
+                props: { fluidColors: ["#6366f1", "#ec4899"] },
+            });
+            expect(container.querySelector("canvas")).toBeInTheDocument();
+        });
+        it("warns and falls back when an invalid hex color is passed", () => {
+            const warn = vi.spyOn(console, "warn").mockImplementation(() => { });
+            render(FluidCursorAdvanced, { props: { backColor: "not-a-color" } });
+            expect(warn).toHaveBeenCalledWith(expect.stringContaining("[FluidCursorAdvanced] Invalid hex color"));
+            warn.mockRestore();
+        });
+    });
+});

package/dist/fancy-ui/fluid-cursor/README.md

@@ -9,6 +9,7 @@ A WebGL-based fluid simulation that follows the cursor, creating beautiful flowi
 - Configurable simulation parameters
 - Transparent background support
 - Automatic canvas resizing
+- Controllable fluid colors via hex strings (fixed color, palette cycling, or random)
 
 ## Implementation Notes
 
@@ -27,6 +28,30 @@ The component implements a full Navier-Stokes fluid simulation with:
 - Advection for both velocity and dye
 - Gradient subtraction for incompressible flow
 
+## Color Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `fluidColor` | `string` (hex) | — | Fixed fluid color. Disables random cycling. |
+| `fluidColors` | `string[]` (hex) | — | Palette to cycle through on each splat. |
+| `colorIntensity` | `number` | `0.15` | Intensity multiplier applied to fluid colors (0–1). |
+| `backColor` | `{ r, g, b }` or `string` (hex) | `{ r: 0.5, g: 0, b: 0 }` | Background color — accepts RGB object or hex string. |
+
+**Priority**: `fluidColor` > `fluidColors` > random HSV
+
+### Examples
+
+```svelte
+<!-- Fixed teal fluid -->
+<FluidCursor fluidColor="#00ffcc" />
+
+<!-- Cycling palette -->
+<FluidCursor fluidColors={["#ff0080", "#00ffcc", "#7700ff"]} colorIntensity={0.3} />
+
+<!-- Hex background -->
+<FluidCursor backColor="#1a1a2e" />
+```
+
 ### Event Handling
 
 - Window-level mouse/touch events for full-screen tracking

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

@@ -1 +1,2 @@
 export { default as FluidCursor } from "./FluidCursor.svelte";
+export { default as FluidCursorAdvanced } from "./FluidCursorAdvanced.svelte";

package/dist/fancy-ui/fluid-cursor/index.js

@@ -1 +1,2 @@
 export { default as FluidCursor } from "./FluidCursor.svelte";
+export { default as FluidCursorAdvanced } from "./FluidCursorAdvanced.svelte";

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

@@ -13,6 +13,8 @@ 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 "./interactive-hover-button/index.js";
+export * from "./gradient-button/index.js";
 export * from "./logo-cloud/index.js";
 export * from "./direction-aware-hover/index.js";
 export * from "./rainbow-button/index.js";
@@ -49,4 +51,6 @@ 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 * from "./matrix-rain/index.js";
+export * from "./terminal-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

@@ -18,6 +18,8 @@ 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 "./interactive-hover-button/index.js";
+export * from "./gradient-button/index.js";
 export * from "./logo-cloud/index.js";
 export * from "./direction-aware-hover/index.js";
 export * from "./rainbow-button/index.js";
@@ -54,6 +56,8 @@ 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 * from "./matrix-rain/index.js";
+export * from "./terminal-text/index.js";
 // =============================================================================
 // Registry
 // =============================================================================

package/dist/fancy-ui/matrix-rain/MatrixRain.svelte

@@ -0,0 +1,127 @@
+<script lang="ts" module>
+	export interface MatrixRainProps {
+		color?: string;
+		speed?: number;
+		density?: number;
+		glyphSize?: number;
+		fadeOpacity?: number;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		color = "#00ff41",
+		speed = 1.0,
+		density = 1.0,
+		glyphSize = 16,
+		fadeOpacity = 0.05,
+		class: className,
+	}: MatrixRainProps = $props();
+
+	const GLYPHS =
+		"アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&";
+
+	let canvas: HTMLCanvasElement;
+	let ctx: CanvasRenderingContext2D | null = null;
+	let rafId: number;
+	let columns: number[] = [];
+	let frameCount = 0;
+	let canvasW = 0;
+	let canvasH = 0;
+
+	function randomGlyph(): string {
+		return GLYPHS[Math.floor(Math.random() * GLYPHS.length)];
+	}
+
+	function init(w: number, h: number) {
+		const safeGlyphSize = Math.max(1, glyphSize);
+		const safeDensity = Math.max(0.1, density);
+		const colCount = Math.max(1, Math.floor(w / (safeGlyphSize * safeDensity)));
+		columns = Array.from({ length: colCount }, () =>
+			Math.floor(Math.random() * (h / safeGlyphSize))
+		);
+	}
+
+	function draw() {
+		if (!ctx) return;
+
+		const w = canvasW;
+		const h = canvasH;
+
+		// Fade trail
+		ctx.fillStyle = `rgba(0, 0, 0, ${fadeOpacity})`;
+		ctx.fillRect(0, 0, w, h);
+
+		ctx.font = `${glyphSize}px monospace`;
+		ctx.shadowBlur = 8;
+		ctx.shadowColor = color;
+
+		const rowsPerFrame = Math.max(1, speed);
+		frameCount++;
+
+		// Only advance every N frames to control speed below 1x
+		const shouldAdvance = speed >= 1 || frameCount % Math.round(1 / speed) === 0;
+
+		if (shouldAdvance) {
+			for (let i = 0; i < columns.length; i++) {
+				const x = i * glyphSize * density;
+				const y = columns[i] * glyphSize;
+
+				// Head character (bright white)
+				ctx.fillStyle = "#ffffff";
+				ctx.fillText(randomGlyph(), x, y);
+
+				// Body glyph one step behind (dimmer)
+				if (columns[i] > 1) {
+					ctx.fillStyle = color;
+					ctx.fillText(randomGlyph(), x, y - glyphSize);
+				}
+
+				// Reset column when it exits bottom, with random delay
+				if (y > h && Math.random() > 0.975) {
+					columns[i] = 0;
+				} else {
+					columns[i] += rowsPerFrame;
+				}
+			}
+		}
+
+		ctx.shadowBlur = 0;
+		rafId = requestAnimationFrame(draw);
+	}
+
+	$effect(() => {
+		ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		// Set canvas size to container size with HiDPI scaling
+		const resize = () => {
+			const dpr = window.devicePixelRatio || 1;
+			canvasW = canvas.clientWidth;
+			canvasH = canvas.clientHeight;
+			canvas.width = Math.floor(canvasW * dpr);
+			canvas.height = Math.floor(canvasH * dpr);
+			ctx!.setTransform(dpr, 0, 0, dpr, 0, 0);
+			ctx!.fillStyle = "black";
+			ctx!.fillRect(0, 0, canvasW, canvasH);
+			init(canvasW, canvasH);
+		};
+
+		resize();
+
+		const observer = new ResizeObserver(resize);
+		observer.observe(canvas);
+
+		rafId = requestAnimationFrame(draw);
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			observer.disconnect();
+		};
+	});
+</script>
+
+<canvas bind:this={canvas} class={cn("block h-full w-full bg-black", className)}></canvas>

package/dist/fancy-ui/matrix-rain/MatrixRain.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface MatrixRainProps {
+    color?: string;
+    speed?: number;
+    density?: number;
+    glyphSize?: number;
+    fadeOpacity?: number;
+    class?: string;
+}
+declare const MatrixRain: import("svelte").Component<MatrixRainProps, {}, "">;
+type MatrixRain = ReturnType<typeof MatrixRain>;
+export default MatrixRain;

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

@@ -0,0 +1,3 @@
+import MatrixRain from "./MatrixRain.svelte";
+import type { MatrixRainProps } from "./MatrixRain.svelte";
+export { MatrixRain, type MatrixRainProps };

package/dist/fancy-ui/matrix-rain/index.js

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

package/dist/fancy-ui/number-ticker/NumberTicker.svelte

@@ -117,10 +117,7 @@
 
 <span
 	bind:this={spanRef}
-	class={cn(
-		"number-ticker inline-block tracking-wider text-black tabular-nums dark:text-white",
-		className
-	)}
+	class={cn("number-ticker inline-block text-black tabular-nums dark:text-white", className)}
 >
 	{formattedValue}
 </span>

package/dist/fancy-ui/registry.js

@@ -243,6 +243,16 @@ export const registry = {
             { source: "Inspira UI", url: "https://inspira-ui.com/components/cursor/fluid-cursor" },
         ],
     },
+    "fluid-cursor-advanced": {
+        name: "FluidCursorAdvanced",
+        slug: "fluid-cursor-advanced",
+        description: "WebGL fluid simulation confined to a parent container element",
+        category: "effects",
+        status: "done",
+        credits: [
+            { source: "Inspira UI", url: "https://inspira-ui.com/components/cursor/fluid-cursor" },
+        ],
+    },
     "glow-border": {
         name: "GlowBorder",
         slug: "glow-border",
@@ -553,6 +563,20 @@ export const registry = {
         status: "done",
         credits: [{ source: "VengenceUI", url: "https://vengenceui.com/docs/liquid-text" }],
     },
+    "matrix-rain": {
+        name: "MatrixRain",
+        slug: "matrix-rain",
+        description: "Canvas-based Matrix-style falling glyph rain with configurable color, speed, and density",
+        category: "backgrounds",
+        status: "done",
+    },
+    "terminal-text": {
+        name: "TerminalText",
+        slug: "terminal-text",
+        description: "Terminal-style text streamer with per-character animation, blinking cursor, and glitch effect",
+        category: "text",
+        status: "done",
+    },
 };
 // =============================================================================
 // Registry Helpers

package/dist/fancy-ui/tailwind.css

@@ -1,3 +1,3 @@
-/* Import this file in your app's CSS to include fancy-ui-svelte Tailwind classes:
-   @import "fancy-ui-svelte/tailwind.css"; */
+/* Import this file in your app's CSS to include fancy-ui Tailwind classes:
+   @import "fancy-ui/tailwind.css"; */
 @source "..";

package/dist/fancy-ui/terminal-text/TerminalText.svelte

@@ -0,0 +1,187 @@
+<script lang="ts" module>
+	export interface TerminalTextProps {
+		lines: string[];
+		speed?: number;
+		delay?: number;
+		cursor?: boolean;
+		cursorChar?: string;
+		glitch?: boolean;
+		class?: string;
+		onComplete?: () => void;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		lines,
+		speed = 40,
+		delay = 0,
+		cursor = true,
+		cursorChar = "█",
+		glitch = false,
+		class: className,
+		onComplete,
+	}: TerminalTextProps = $props();
+
+	const GLITCH_GLYPHS = "アイウエオ@#$%&!?░▒▓█▄▀■□▪▫";
+
+	let displayedLines = $state<string[]>([]);
+	let done = $state(false);
+	let glitchState = $state<{ lineIdx: number; charIdx: number; original: string } | null>(null);
+
+	let timeouts: ReturnType<typeof setTimeout>[] = [];
+
+	function scheduleTimeout(fn: () => void, ms: number) {
+		const id = setTimeout(fn, ms);
+		timeouts.push(id);
+		return id;
+	}
+
+	function clearAllTimeouts() {
+		timeouts.forEach(clearTimeout);
+		timeouts = [];
+	}
+
+	function streamLines() {
+		clearAllTimeouts();
+		displayedLines = [];
+		done = false;
+		glitchState = null;
+
+		let totalDelay = delay;
+
+		for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+			const line = lines[lineIdx];
+
+			// Push empty line placeholder
+			const capturedIdx = lineIdx;
+			scheduleTimeout(() => {
+				displayedLines = [...displayedLines, ""];
+			}, totalDelay);
+
+			// Stream characters one by one
+			for (let charIdx = 0; charIdx < line.length; charIdx++) {
+				const capturedChar = charIdx;
+				const capturedLine = line;
+				totalDelay += speed;
+				scheduleTimeout(() => {
+					displayedLines = displayedLines.map((l, i) =>
+						i === capturedIdx ? capturedLine.slice(0, capturedChar + 1) : l
+					);
+				}, totalDelay);
+			}
+
+			// Small pause between lines
+			totalDelay += speed * 3;
+		}
+
+		// Mark done
+		scheduleTimeout(() => {
+			done = true;
+			onComplete?.();
+		}, totalDelay);
+	}
+
+	function startGlitchLoop() {
+		function glitchOnce() {
+			if (displayedLines.length === 0) return;
+
+			// Pick a random line with content
+			const linesWithContent = displayedLines
+				.map((l, i) => ({ l, i }))
+				.filter(({ l }) => l.length > 0);
+			if (linesWithContent.length === 0) return;
+
+			const { l, i } = linesWithContent[Math.floor(Math.random() * linesWithContent.length)];
+			const charIdx = Math.floor(Math.random() * l.length);
+			const original = l[charIdx];
+			const fakeGlyph = GLITCH_GLYPHS[Math.floor(Math.random() * GLITCH_GLYPHS.length)];
+
+			glitchState = { lineIdx: i, charIdx, original };
+
+			// Temporarily replace char in display via glitchState, restore after 100ms
+			displayedLines = displayedLines.map((line, idx) => {
+				if (idx !== i) return line;
+				return line.slice(0, charIdx) + fakeGlyph + line.slice(charIdx + 1);
+			});
+
+			scheduleTimeout(() => {
+				if (glitchState && glitchState.lineIdx === i && glitchState.charIdx === charIdx) {
+					displayedLines = displayedLines.map((line, idx) => {
+						if (idx !== i) return line;
+						return line.slice(0, charIdx) + original + line.slice(charIdx + 1);
+					});
+					glitchState = null;
+				}
+			}, 100);
+		}
+
+		function scheduleGlitch() {
+			// Random interval between 2s and 4s
+			const interval = 2000 + Math.random() * 2000;
+			scheduleTimeout(() => {
+				if (glitch) glitchOnce();
+				scheduleGlitch();
+			}, interval);
+		}
+
+		scheduleGlitch();
+	}
+
+	$effect(() => {
+		// React only to lines/speed/delay — changing glitch won't restart the stream
+		void lines;
+		void speed;
+		void delay;
+
+		streamLines();
+
+		return () => {
+			clearAllTimeouts();
+		};
+	});
+
+	$effect(() => {
+		// React to glitch changes without restarting the stream
+		void glitch;
+
+		if (glitch) {
+			startGlitchLoop();
+		} else {
+			glitchState = null;
+		}
+	});
+</script>
+
+<div class={cn("font-mono text-sm leading-relaxed", className)}>
+	{#each displayedLines as line, i}
+		<div class="min-h-[1.4em]">
+			<span>{line}</span>{#if cursor && i === displayedLines.length - 1 && !done}<span
+					class="cursor-blink">{cursorChar}</span
+				>{/if}
+		</div>
+	{/each}
+	{#if cursor && done}
+		<div class="min-h-[1.4em]">
+			<span class="cursor-blink">{cursorChar}</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.cursor-blink {
+		animation: blink 1s step-end infinite;
+	}
+
+	@keyframes blink {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0;
+		}
+	}
+</style>

package/dist/fancy-ui/terminal-text/TerminalText.svelte.d.ts

@@ -0,0 +1,13 @@
+export interface TerminalTextProps {
+    lines: string[];
+    speed?: number;
+    delay?: number;
+    cursor?: boolean;
+    cursorChar?: string;
+    glitch?: boolean;
+    class?: string;
+    onComplete?: () => void;
+}
+declare const TerminalText: import("svelte").Component<TerminalTextProps, {}, "">;
+type TerminalText = ReturnType<typeof TerminalText>;
+export default TerminalText;

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

@@ -0,0 +1,3 @@
+import TerminalText from "./TerminalText.svelte";
+import type { TerminalTextProps } from "./TerminalText.svelte";
+export { TerminalText, type TerminalTextProps };

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fancy-ui-svelte",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.4.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -46,6 +46,7 @@
     "tailwindcss": "^4.0.0"
   },
   "dependencies": {
+    "@vercel/analytics": "^2.0.1",
     "canvas-confetti": "^1.9.4",
     "clsx": "^2.1.1",
     "gsap": "^3.14.2",
@@ -71,6 +72,7 @@
     "@types/three": "^0.183.1",
     "arctic": "^3.7.0",
     "bits-ui": "^2.15.4",
+    "isomorphic-dompurify": "^3.7.1",
     "jsdom": "^28.0.0",
     "marked": "^17.0.3",
     "nanoid": "^5.1.6",