fancy-ui-svelte 0.8.0 → 0.9.0

package/dist/fancy-ui/registry.js

@@ -68,7 +68,7 @@ export const registry = {
     "apple-card-carousel": {
         name: "AppleCardCarousel",
         slug: "apple-card-carousel",
-        description: "Horizontal card carousel with spring-animated full-screen expansion, inspired by Apple's App Store UI",
+        description: "Horizontal card carousel where the focused card expands into a spring-animated full-screen view",
         category: "cards",
         status: "done",
         credits: [
@@ -246,7 +246,7 @@ export const registry = {
     "blur-reveal": {
         name: "BlurReveal",
         slug: "blur-reveal",
-        description: "Scroll-triggered blur-to-clear reveal animation with staggered children",
+        description: "Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion",
         category: "text",
         status: "done",
         credits: [{ source: "Magic UI", url: "https://magicui.design/docs/components/blur-fade" }],
@@ -284,7 +284,7 @@ export const registry = {
     "border-beam": {
         name: "BorderBeam",
         slug: "border-beam",
-        description: "Animated beam effect that travels around borders",
+        description: "Gradient beam that races around a container's border using a CSS offset-path animation, masked so only the border ring is painted, with configurable size, speed, anchor position, and gradient colors",
         category: "effects",
         status: "done",
         credits: [{ source: "Magic UI", url: "https://magicui.design/docs/components/border-beam" }],
@@ -405,7 +405,7 @@ export const registry = {
     "image-trail-cursor": {
         name: "ImageTrailCursor",
         slug: "image-trail-cursor",
-        description: "Cursor-following image trail with 8 animation variants",
+        description: "Trail of images that spawn and animate along the cursor's path, powered by GSAP timelines, with 8 selectable variants spanning simple fades, momentum drift, rotation flings, and 3D perspective tilt",
         category: "effects",
         status: "done",
         tags: ["cursor", "animation", "images", "trail", "interactive"],
@@ -643,7 +643,7 @@ export const registry = {
     "ripple-button": {
         name: "RippleButton",
         slug: "ripple-button",
-        description: "Button with ripple click effect",
+        description: "Button that spawns an expanding, fading ripple circle centered on the click point, with configurable color and duration",
         category: "buttons",
         status: "done",
         credits: [{ source: "Magic UI", url: "https://magicui.design/docs/components/ripple-button" }],
@@ -734,7 +734,7 @@ export const registry = {
     "bg-stars": {
         name: "StarsBackground",
         slug: "bg-stars",
-        description: "Animated starfield background with parallax mouse tracking",
+        description: "Three-layer starfield background that scrolls continuously while parallax-shifting in response to cursor movement via spring physics, with stars rendered as box-shadow dots across near, mid, and far depth layers",
         category: "backgrounds",
         status: "done",
         credits: [
@@ -773,11 +773,11 @@ export const registry = {
     dock: {
         name: "Dock",
         slug: "dock",
-        description: "macOS-style dock with icon magnification on hover",
+        description: "Icon dock where each item magnifies smoothly as the cursor approaches, sharing pointer position via Svelte context so every DockIcon scales by proximity within a configurable magnification and distance range",
         category: "navigation",
         status: "done",
         credits: [{ source: "Magic UI", url: "https://magicui.design/docs/components/dock" }],
-        tags: ["dock", "navigation", "macos", "magnification", "hover"],
+        tags: ["dock", "navigation", "launcher", "magnification", "hover"],
         props: [
             {
                 name: "magnification",
@@ -809,7 +809,7 @@ export const registry = {
     "fluid-cursor": {
         name: "FluidCursor",
         slug: "fluid-cursor",
-        description: "WebGL fluid simulation that follows cursor movement",
+        description: "Full Navier-Stokes fluid simulation that swirls color in response to cursor and touch movement, running on WebGL2 with a WebGL1 fallback and an optional WebGPU HDR path for wide-gamut, brighter-than-white glow",
         category: "effects",
         status: "done",
         credits: [
@@ -952,7 +952,7 @@ export const registry = {
     "glow-border": {
         name: "GlowBorder",
         slug: "glow-border",
-        description: "Animated glowing border effect with gradient support",
+        description: "Glowing ring that animates around a container's edge by sweeping a radial gradient's position, masked with CSS mask-composite so only the border ring is painted, supporting single or multi-color gradients",
         category: "effects",
         status: "done",
         credits: [
@@ -1100,7 +1100,7 @@ export const registry = {
     "flickering-grid": {
         name: "FlickeringGrid",
         slug: "flickering-grid",
-        description: "Canvas-based grid of squares with flickering opacity",
+        description: "Canvas grid of squares that flicker in and out of opacity at random each frame, pausing automatically via IntersectionObserver when scrolled off-screen and resizing to fit its container via ResizeObserver",
         category: "backgrounds",
         status: "done",
         credits: [
@@ -1183,7 +1183,7 @@ export const registry = {
     "colourful-text": {
         name: "ColourfulText",
         slug: "colourful-text",
-        description: "Per-character color animation with shuffling colors",
+        description: "Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions",
         category: "text",
         status: "done",
         credits: [
@@ -1238,7 +1238,7 @@ export const registry = {
     "hyper-text": {
         name: "HyperText",
         slug: "hyper-text",
-        description: "Character scramble effect that activates on hover",
+        description: "Text that scrambles into random uppercase letters and resolves character-by-character back to the original on hover, with a staggered per-letter reveal and an optional animate-on-load mode",
         category: "text",
         status: "done",
         credits: [{ source: "Magic UI", url: "https://magicui.design/docs/components/hyper-text" }],
@@ -1321,7 +1321,7 @@ export const registry = {
     "sparkles-text": {
         name: "SparklesText",
         slug: "sparkles-text",
-        description: "Text with animated SVG sparkle stars overlay",
+        description: "Text overlaid with small SVG star sparkles that scale, rotate, and fade in a continuous loop, each one regenerating at a random position once its lifespan expires, cycling between two configurable colors",
         category: "text",
         status: "done",
         credits: [{ source: "Aceternity UI", url: "https://ui.aceternity.com/components/sparkles" }],
@@ -1345,7 +1345,7 @@ export const registry = {
     "box-reveal": {
         name: "BoxReveal",
         slug: "box-reveal",
-        description: "Content reveal with sliding colored box animation",
+        description: "Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver",
         category: "text",
         status: "done",
         credits: [{ source: "Magic UI", url: "https://magicui.design/docs/components/box-reveal" }],
@@ -1395,7 +1395,7 @@ export const registry = {
     "card-spotlight": {
         name: "CardSpotlight",
         slug: "card-spotlight",
-        description: "Card with mouse-following radial gradient spotlight overlay",
+        description: "Card whose radial-gradient spotlight tracks the cursor as it moves inside, fading in on hover and parking itself off-canvas when the pointer leaves, with configurable gradient size, color, and opacity",
         category: "cards",
         status: "done",
         credits: [
@@ -1967,7 +1967,7 @@ export const registry = {
     ripple: {
         name: "Ripple",
         slug: "ripple",
-        description: "Concentric pulsing circles with ripple wave animation",
+        description: "Set of concentric circles that pulse in a staggered wave, each ring larger, more transparent, and more delayed than the last, with the outermost ring rendered dashed to suggest a fading signal",
         category: "effects",
         status: "done",
         credits: [{ source: "Magic UI", url: "https://magicui.design/docs/components/ripple" }],
@@ -2125,7 +2125,7 @@ export const registry = {
     "matrix-rain": {
         name: "MatrixRain",
         slug: "matrix-rain",
-        description: "Canvas-based Matrix-style falling glyph rain with configurable color, speed, and density",
+        description: "Canvas-based falling glyph rain with configurable color, speed, and density",
         category: "backgrounds",
         status: "done",
         tags: ["background", "matrix", "canvas", "animation", "glyphs", "cyberpunk"],
@@ -2134,7 +2134,7 @@ export const registry = {
                 name: "color",
                 type: "string",
                 default: '"#00ff41"',
-                description: "Glyph color (the classic Matrix green)",
+                description: "Glyph color (classic terminal green)",
             },
             {
                 name: "speed",
@@ -2206,7 +2206,7 @@ export const registry = {
     "noise-reveal": {
         name: "NoiseReveal",
         slug: "noise-reveal",
-        description: "WebGL image reveal with a Perlin-noise dissolve mask, contracting radial gradient, and wave displacement, inspired by a Codrops shader effect",
+        description: "WebGL image reveal with a Perlin-noise dissolve mask, contracting radial gradient, and wave displacement",
         category: "media",
         status: "done",
         credits: [

package/dist/fancy-ui/ripple-button/README.md

@@ -0,0 +1,36 @@
+# RippleButton
+
+A button that spawns a Material-style expanding ripple circle from the exact click position on every click, layered behind the button's content.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { RippleButton } from "fancy-ui-svelte";
+</script>
+
+<RippleButton onclick={() => console.log("clicked")}>Click me</RippleButton>
+
+<RippleButton rippleColor="#f472b6" duration={800} class="bg-primary text-primary-foreground">
+	Custom ripple
+</RippleButton>
+```
+
+## Props
+
+| Prop          | Type      | Default     | Description                        |
+| ------------- | --------- | ----------- | ---------------------------------- |
+| `rippleColor` | `string`  | `"#ADD8E6"` | Color of the ripple effect         |
+| `duration`    | `number`  | `600`       | Animation duration in milliseconds |
+| `class`       | `string`  | —           | Additional CSS classes             |
+| `children`    | `Snippet` | —           | Button content                     |
+
+`RippleButtonProps` also extends `HTMLButtonAttributes` (minus `class`), and any attributes not explicitly listed above (e.g. `type`, `aria-*`, `data-*`) are spread onto the rendered `<button>` via `...restProps`.
+
+## Implementation notes
+
+- `onclick` is intercepted, not overwritten: the component's own `handleClick` always creates the ripple first, then calls the caller's `onclick` (if provided) with the original event — passing `onclick` works exactly as it would on a plain `<button>`.
+- Ripple size is `Math.max(width, height)` of the button so a single circle always covers the whole button regardless of click position; position is computed from `event.clientX/Y` relative to the button's `getBoundingClientRect()`, centered on the click point.
+- Each ripple is tracked in a `ripples` array keyed by `Date.now()` and removed via `setTimeout(duration)` after the animation finishes — rapid repeated clicks stack multiple concurrent ripple elements rather than restarting a single one.
+- `duration` is threaded into the CSS animation via the `--ripple-duration` custom property, so the visual animation and the removal timeout always stay in sync even when `duration` changes between renders.
+- No `prefers-reduced-motion` handling — the ripple scale/opacity animation plays on every click regardless of user preference.

package/dist/fancy-ui/smooth-cursor/SmoothCursor.test.d.ts

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

package/dist/fancy-ui/smooth-cursor/SmoothCursor.test.js

@@ -0,0 +1,45 @@
+import { render, cleanup, fireEvent } from "@testing-library/svelte";
+import { createRawSnippet } from "svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import SmoothCursor from "./SmoothCursor.svelte";
+function textSnippet(html) {
+    return createRawSnippet(() => ({ render: () => html }));
+}
+describe("SmoothCursor", () => {
+    afterEach(cleanup);
+    it("renders hidden (opacity-0) before any pointer movement", () => {
+        const { container } = render(SmoothCursor);
+        const cursor = container.firstElementChild;
+        expect(cursor.className).toContain("opacity-0");
+        expect(cursor.className).not.toContain("opacity-100");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(SmoothCursor, { props: { class: "my-cursor" } });
+        const cursor = container.firstElementChild;
+        expect(cursor.className).toContain("my-cursor");
+    });
+    it("renders the default arrow svg when no cursor snippet is provided", () => {
+        const { container } = render(SmoothCursor);
+        expect(container.querySelector("svg")).toBeTruthy();
+    });
+    it("renders a custom cursor snippet instead of the default arrow", () => {
+        const { container } = render(SmoothCursor, {
+            props: { cursor: textSnippet("<div data-testid='custom-cursor'></div>") },
+        });
+        expect(container.querySelector("svg")).toBeFalsy();
+        expect(container.querySelector("[data-testid='custom-cursor']")).toBeTruthy();
+    });
+    it("hides the native cursor on mount and restores it on unmount", () => {
+        const { unmount } = render(SmoothCursor);
+        expect(document.body.style.cursor).toBe("none");
+        unmount();
+        expect(document.body.style.cursor).toBe("");
+    });
+    it("becomes visible once the pointer moves, and unmount does not throw once the animation loop is running", async () => {
+        const { container, unmount } = render(SmoothCursor);
+        const cursor = container.firstElementChild;
+        await fireEvent.mouseMove(document, { clientX: 120, clientY: 80 });
+        expect(cursor.className).toContain("opacity-100");
+        expect(() => unmount()).not.toThrow();
+    });
+});

package/dist/fancy-ui/terminal-text/README.md

@@ -0,0 +1,48 @@
+# TerminalText
+
+Streams an array of lines onto the screen character by character, terminal-style, with a blinking block cursor and an optional post-stream "glitch" effect that randomly swaps a visible character for a glyph for a moment.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { TerminalText } from "fancy-ui-svelte";
+</script>
+
+<div class="rounded-lg border bg-black p-5 text-green-400">
+	<TerminalText
+		lines={[
+			"[INFO]  boot sequence complete",
+			"[WARN]  memory fragmentation at sector 0x4A2F",
+			"[OK]    all systems nominal",
+		]}
+		speed={25}
+	/>
+</div>
+```
+
+```svelte
+<!-- Glitch effect after streaming finishes, and a completion callback -->
+<TerminalText lines={["Connection established."]} glitch onComplete={() => console.log("done")} />
+```
+
+## Props
+
+| Prop         | Type         | Default | Description                                                |
+| ------------ | ------------ | ------- | ---------------------------------------------------------- |
+| `lines`      | `string[]`   | —       | Array of lines to stream character by character (required) |
+| `speed`      | `number`     | `40`    | Delay between each character in ms                         |
+| `delay`      | `number`     | `0`     | Initial delay before streaming starts, in ms               |
+| `cursor`     | `boolean`    | `true`  | Show the blinking cursor                                   |
+| `cursorChar` | `string`     | `"█"`   | Character used as the cursor                               |
+| `glitch`     | `boolean`    | `false` | Enable random character glitching after streaming          |
+| `class`      | `string`     | —       | Additional CSS classes                                     |
+| `onComplete` | `() => void` | —       | Called once, after the last line finishes streaming        |
+
+## Implementation notes
+
+- Streaming is scheduled with a flat list of `setTimeout` calls computed up front from a running `totalDelay` counter (one timeout per character, plus a `speed * 3` pause between lines), not a single interval — every timeout is tracked and cleared together (`clearAllTimeouts`) so restarting the stream never leaves stray callbacks running.
+- Streaming and glitching are two independent `$effect`s. The streaming effect depends on `lines`, `speed`, and `delay` only (`void`-read to declare the dependency without using the value), so toggling `glitch` mid-stream does not restart the text. The glitch effect depends only on `glitch` and starts/stops its own self-rescheduling loop (`scheduleGlitch`, random 2–4s interval).
+- The glitch loop picks a random visible character from a random non-empty line, swaps in a random glyph from a fixed set, and restores the original character after 100ms — it checks that the same `(lineIdx, charIdx)` is still the active glitch before restoring, so it can't clobber a different glitch that started in between.
+- The blinking cursor is CSS-only (`animation: blink 1s step-end infinite`) and is rendered after whichever line is currently last — while streaming that's the in-progress line, once `done` it moves to its own trailing line.
+- No `prefers-reduced-motion` handling — lines always stream character-by-character and the cursor always blinks, regardless of user preference.

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

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

package/dist/fancy-ui/terminal-text/TerminalText.test.js

@@ -0,0 +1,88 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import TerminalText from "./TerminalText.svelte";
+// The template has static whitespace between its {#each} and {#if} blocks
+// that shows up as stray spaces in textContent depending on which branch is
+// active. Stripping all whitespace isolates the actual streamed characters.
+function text(el) {
+    return (el.textContent ?? "").replace(/\s+/g, "");
+}
+describe("TerminalText", () => {
+    afterEach(() => {
+        cleanup();
+        vi.useRealTimers();
+    });
+    it("renders nothing until the first scheduled tick, then streams characters over time and completes", async () => {
+        vi.useFakeTimers();
+        const onComplete = vi.fn();
+        const { container } = render(TerminalText, {
+            props: { lines: ["hi"], speed: 10, onComplete },
+        });
+        const wrapper = container.firstElementChild;
+        // The effect only schedules timeouts synchronously; none have fired yet.
+        expect(text(wrapper)).toBe("");
+        // t=0: empty line placeholder + blinking cursor appear.
+        await vi.advanceTimersByTimeAsync(1);
+        expect(text(wrapper)).toBe("█");
+        expect(onComplete).not.toHaveBeenCalled();
+        // t=10: first character streamed in.
+        await vi.advanceTimersByTimeAsync(9);
+        expect(text(wrapper)).toBe("h█");
+        // t=20: second character streamed in.
+        await vi.advanceTimersByTimeAsync(10);
+        expect(text(wrapper)).toBe("hi█");
+        expect(onComplete).not.toHaveBeenCalled();
+        // t=50: stream marked done, onComplete fires exactly once.
+        await vi.advanceTimersByTimeAsync(30);
+        expect(text(wrapper)).toBe("hi█");
+        expect(onComplete).toHaveBeenCalledTimes(1);
+    });
+    it("renders no cursor glyph anywhere when cursor is false", async () => {
+        vi.useFakeTimers();
+        const { container } = render(TerminalText, {
+            props: { lines: ["ok"], speed: 5, cursor: false },
+        });
+        await vi.advanceTimersByTimeAsync(25);
+        const wrapper = container.firstElementChild;
+        expect(text(wrapper)).toBe("ok");
+        expect(container.querySelector(".cursor-blink")).toBeFalsy();
+    });
+    it("streams multiple lines in order, one div per line", async () => {
+        vi.useFakeTimers();
+        const { container } = render(TerminalText, {
+            props: { lines: ["a", "bb"], speed: 10, cursor: false },
+        });
+        await vi.advanceTimersByTimeAsync(90);
+        const wrapper = container.firstElementChild;
+        const lineDivs = Array.from(wrapper.children);
+        expect(lineDivs).toHaveLength(2);
+        expect(lineDivs[0].textContent).toBe("a");
+        expect(lineDivs[1].textContent).toBe("bb");
+    });
+    it("applies custom class names alongside the base classes", () => {
+        const { container } = render(TerminalText, {
+            props: { lines: ["x"], class: "my-terminal" },
+        });
+        const wrapper = container.firstElementChild;
+        expect(wrapper.className).toContain("my-terminal");
+        expect(wrapper.className).toContain("font-mono");
+    });
+    it("uses a custom cursor character once the stream is done", async () => {
+        vi.useFakeTimers();
+        const { container } = render(TerminalText, {
+            props: { lines: ["a"], speed: 5, cursorChar: "_" },
+        });
+        // push@0, char@5, done@20 (5 + speed*3=15)
+        await vi.advanceTimersByTimeAsync(20);
+        const wrapper = container.firstElementChild;
+        expect(text(wrapper)).toBe("a_");
+    });
+    it("does not throw or leave dangling timers when glitch is enabled", async () => {
+        vi.useFakeTimers();
+        const { unmount } = render(TerminalText, {
+            props: { lines: ["glitchy line"], speed: 5, glitch: true },
+        });
+        await vi.advanceTimersByTimeAsync(5000);
+        expect(() => unmount()).not.toThrow();
+    });
+});

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "fancy-ui-svelte",
   "private": false,
-  "version": "0.8.0",
+  "version": "0.9.0",
+  "description": "61 animated UI components for Svelte 5 — WebGL, GSAP and CSS motion, styled with Tailwind CSS v4.",
+  "author": "Rama Herbin",
+  "funding": "https://github.com/sponsors/RamaHerbin",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -15,10 +18,18 @@
   "keywords": [
     "svelte",
     "svelte5",
+    "sveltekit",
     "components",
+    "component-library",
     "animations",
+    "animated-components",
+    "motion",
     "ui",
-    "tailwind"
+    "ui-library",
+    "tailwind",
+    "tailwindcss",
+    "webgl",
+    "typescript"
   ],
   "sideEffects": [
     "**/*.css",
@@ -110,6 +121,8 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "check:registry": "node scripts/check-registry.mjs",
     "check:i18n": "node scripts/check-i18n.mjs",
+    "build:assets": "node scripts/build-synthwave-assets.mjs",
+    "build:og": "node scripts/build-og-images.mjs",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:e2e": "playwright test",