fancy-ui-svelte 0.2.1 → 0.4.0

package/README.md

@@ -116,11 +116,25 @@ Beautiful animation and UI components for **Svelte 5**.
 
 ## Quick Start
 
-> **Status:** Pre-release. No npm package yet — components are available via copy-paste
-> or by cloning the repo. A registry-based install (`npx shadcn-svelte@latest add`) is
-> planned for v0.2.
+**Install via npm:**
 
-**Browse and copy a component:**
+```bash
+npm install fancy-ui
+```
+
+Then import any component:
+
+```ts
+import { Marquee, BorderBeam, Confetti } from 'fancy-ui';
+```
+
+To include Tailwind classes, add this to your app's CSS:
+
+```css
+@import "fancy-ui/tailwind.css";
+```
+
+**Or browse and copy a component:**
 1. Find the component you need in the [live demo](https://fancy-ui.rama.app)
 2. Copy the source from `src/lib/fancy-ui/[component-name]/`
 3. Paste into your project

package/dist/fancy-ui/compare/Compare.svelte

@@ -285,7 +285,7 @@
 	<!-- Second Content -->
 	<div
 		class={cn(
-			"absolute top-0 left-0 z-[19] h-full w-full rounded-2xl select-none",
+			"absolute top-0 left-0 z-[19] h-full w-full overflow-hidden rounded-2xl select-none",
 			secondContentClass
 		)}
 		style:pointer-events={isInteracting ? "none" : "auto"}

package/dist/fancy-ui/flip-words/FlipWords.svelte

@@ -20,11 +20,14 @@
 	import { cn } from "../../utils.js";
 	import { onMount } from "svelte";
 
+	const EXIT_MS = 600;
+
 	let { words, duration = 3000, class: className }: FlipWordsProps = $props();
 
 	let currentIndex = $state(0);
-	let isVisible = $state(true);
+	let isExiting = $state(false);
 	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+	let exitTimeoutId: ReturnType<typeof setTimeout> | null = null;
 
 	let currentWord = $derived(words[currentIndex] ?? "");
 	let splitWords = $derived(
@@ -35,37 +38,45 @@
 	);
 
 	function startAnimation() {
-		isVisible = false;
+		if (words.length < 2) return;
+
+		isExiting = true;
 
-		setTimeout(() => {
+		if (exitTimeoutId) clearTimeout(exitTimeoutId);
+		exitTimeoutId = setTimeout(() => {
+			isExiting = false;
 			currentIndex = (currentIndex + 1) % words.length;
-			isVisible = true;
-		}, 600);
+		}, EXIT_MS);
 	}
 
-	function scheduleNext() {
+	function scheduleNext(index: number, d: number) {
+		if (words.length < 2) return;
 		if (timeoutId) clearTimeout(timeoutId);
-		timeoutId = setTimeout(startAnimation, duration);
+		timeoutId = setTimeout(startAnimation, d);
 	}
 
 	$effect(() => {
-		if (isVisible) {
-			scheduleNext();
+		// Re-schedule whenever a new word becomes active (not during exit).
+		// Reference currentIndex and duration directly so the effect re-runs on changes.
+		if (!isExiting) {
+			scheduleNext(currentIndex, duration);
 		}
 	});
 
 	onMount(() => {
 		return () => {
 			if (timeoutId) clearTimeout(timeoutId);
+			if (exitTimeoutId) clearTimeout(exitTimeoutId);
 		};
 	});
 </script>
 
 <div class="flip-words relative inline-block px-2">
-	{#if isVisible}
+	{#key currentIndex}
 		<div
 			class={cn(
-				"flip-words-enter relative z-10 inline-block text-left text-neutral-900 dark:text-neutral-100",
+				"relative z-10 inline-block text-left text-neutral-900 dark:text-neutral-100",
+				isExiting ? "flip-words-exit" : "flip-words-enter",
 				className
 			)}
 		>
@@ -86,7 +97,7 @@
 				</span>
 			{/each}
 		</div>
-	{/if}
+	{/key}
 </div>
 
 <style>
@@ -127,9 +138,30 @@
 				transform: translateY(0);
 			}
 		}
+
+		@keyframes flipExitWord {
+			0% {
+				opacity: 1;
+				transform: translateY(0);
+				filter: blur(0);
+			}
+			100% {
+				opacity: 0;
+				transform: translateY(-10px);
+				filter: blur(8px);
+			}
+		}
+	}
+
+	.flip-words {
+		--flip-words-ms: 0.6s;
 	}
 
 	.flip-words-enter {
-		animation: flipEnterWord 0.6s ease-in-out forwards;
+		animation: flipEnterWord var(--flip-words-ms) ease-in-out forwards;
+	}
+
+	.flip-words-exit {
+		animation: flipExitWord var(--flip-words-ms) ease-in-out forwards;
 	}
 </style>

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

@@ -49,4 +49,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

@@ -54,6 +54,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/registry.js

@@ -553,6 +553,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.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -71,6 +71,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",