fancy-ui-svelte 0.5.0 → 0.6.0

package/dist/fancy-ui/noise-reveal/NoiseReveal.test.js

@@ -0,0 +1,123 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import NoiseReveal from "./NoiseReveal.svelte";
+// Holds the last renderer instance created by the mock
+const lastMock = { renderer: null };
+// Three.js uses WebGL which is not available in jsdom — mock the module
+vi.mock("three", () => {
+    function Vector2() {
+        return { x: 0, y: 0, set: vi.fn() };
+    }
+    function Texture() {
+        return { dispose: vi.fn(), colorSpace: "", image: {} };
+    }
+    function TextureLoader() {
+        return { load: vi.fn(() => Texture()) };
+    }
+    function ShaderMaterial() {
+        return {
+            uniforms: {
+                uTexture: { value: null },
+                uTime: { value: 0 },
+                uProgress: { value: 0 },
+                uRes: { value: Vector2() },
+                uImageRes: { value: Vector2() },
+            },
+            dispose: vi.fn(),
+        };
+    }
+    function PlaneGeometry() {
+        return { dispose: vi.fn() };
+    }
+    function Mesh() {
+        return { scale: { set: vi.fn() } };
+    }
+    function Scene() {
+        return { background: null, add: vi.fn() };
+    }
+    function PerspectiveCamera() {
+        return {
+            position: { set: vi.fn() },
+            aspect: 1,
+            updateProjectionMatrix: vi.fn(),
+        };
+    }
+    function Clock() {
+        return { getElapsedTime: vi.fn(() => 0) };
+    }
+    function WebGLRenderer() {
+        const instance = {
+            setClearColor: vi.fn(),
+            setPixelRatio: vi.fn(),
+            setSize: vi.fn(),
+            render: vi.fn(),
+            dispose: vi.fn(),
+            domElement: Object.assign(document.createElement("canvas"), {
+                style: { width: "", height: "" },
+            }),
+        };
+        lastMock.renderer = instance;
+        return instance;
+    }
+    return {
+        Scene,
+        PerspectiveCamera,
+        WebGLRenderer,
+        PlaneGeometry,
+        ShaderMaterial,
+        Mesh,
+        TextureLoader,
+        Texture,
+        Vector2,
+        Clock,
+        SRGBColorSpace: "srgb",
+    };
+});
+const src = "https://example.com/image.jpg";
+describe("NoiseReveal", () => {
+    afterEach(cleanup);
+    it("renders a div container", () => {
+        const { container } = render(NoiseReveal, { props: { src } });
+        expect(container.querySelector("div")).toBeTruthy();
+    });
+    it("applies default height class", () => {
+        const { container } = render(NoiseReveal, { props: { src } });
+        expect(container.querySelector("div")?.className).toContain("h-[400px]");
+    });
+    it("applies additional class", () => {
+        const { container } = render(NoiseReveal, { props: { src, class: "h-[600px]" } });
+        expect(container.querySelector("div")?.className).toContain("h-[600px]");
+    });
+    it("exposes alt text as an accessible image role", () => {
+        const { container } = render(NoiseReveal, { props: { src, alt: "Mountain at dusk" } });
+        const div = container.querySelector("div[role='img']");
+        expect(div).toBeTruthy();
+        expect(div?.getAttribute("aria-label")).toBe("Mountain at dusk");
+    });
+    it("has no img role without alt text", () => {
+        const { container } = render(NoiseReveal, { props: { src } });
+        expect(container.querySelector("div[role='img']")).toBeFalsy();
+    });
+    describe("cleanup on unmount", () => {
+        it("removes resize listener", () => {
+            const spy = vi.spyOn(window, "removeEventListener");
+            const { unmount } = render(NoiseReveal, { props: { src } });
+            unmount();
+            expect(spy).toHaveBeenCalledWith("resize", expect.any(Function));
+            spy.mockRestore();
+        });
+        it("cancels animation frame", () => {
+            const spy = vi.spyOn(window, "cancelAnimationFrame");
+            const { unmount } = render(NoiseReveal, { props: { src } });
+            unmount();
+            expect(spy).toHaveBeenCalled();
+            spy.mockRestore();
+        });
+        it("disposes renderer", () => {
+            const { unmount } = render(NoiseReveal, { props: { src } });
+            const renderer = lastMock.renderer;
+            unmount();
+            expect(renderer.dispose).toHaveBeenCalled();
+        });
+    });
+});

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

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

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

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

package/dist/fancy-ui/registry.js

@@ -485,6 +485,88 @@ export const registry = {
         ],
         slots: [{ name: "children", description: "Link text content" }],
     },
+    "line-reveal": {
+        name: "LineReveal",
+        slug: "line-reveal",
+        description: "Staggered line-by-line text reveal with lines computed by pretext instead of DOM splitting",
+        category: "text",
+        status: "done",
+        credits: [{ source: "pretext", url: "https://github.com/chenglou/pretext" }],
+        tags: ["text", "animation", "reveal", "stagger", "pretext", "typography"],
+        props: [
+            { name: "text", type: "string", description: "Text to reveal", required: true },
+            {
+                name: "font",
+                type: "string",
+                default: "'600 32px \"Helvetica Neue\", Helvetica, Arial, sans-serif'",
+                description: "CSS font shorthand used for both measurement and rendering",
+            },
+            {
+                name: "lineHeight",
+                type: "number",
+                default: "1.2 × font size",
+                description: "Line height in pixels",
+            },
+            {
+                name: "stagger",
+                type: "number",
+                default: "0.08",
+                description: "Delay between lines in seconds",
+            },
+            {
+                name: "duration",
+                type: "number",
+                default: "0.7",
+                description: "Animation duration per line in seconds",
+            },
+            { name: "delay", type: "number", default: "0", description: "Initial delay in seconds" },
+            {
+                name: "once",
+                type: "boolean",
+                default: "true",
+                description: "Animate only on first viewport entry",
+            },
+            { name: "class", type: "string", description: "Additional CSS classes" },
+        ],
+    },
+    "editorial-engine": {
+        name: "EditorialEngine",
+        slug: "editorial-engine",
+        description: "Live magazine layout: multi-column text flowing around draggable orbs with zero DOM reads, powered by pretext",
+        category: "text",
+        status: "done",
+        credits: [
+            { source: "pretext editorial engine", url: "https://chenglou.me/pretext/editorial-engine/" },
+        ],
+        tags: ["text", "layout", "magazine", "columns", "pretext", "interactive", "typography"],
+        props: [
+            {
+                name: "headline",
+                type: "string",
+                default: "built-in copy",
+                description: "Auto-sized headline (largest font size that breaks no word)",
+            },
+            {
+                name: "body",
+                type: "string",
+                default: "built-in copy",
+                description: "Body text, paragraphs separated by blank lines",
+            },
+            {
+                name: "pullquotes",
+                type: "string[]",
+                default: "built-in quotes",
+                description: "Up to two pullquotes embedded in the columns",
+            },
+            {
+                name: "fontFamily",
+                type: "string",
+                default: "Palatino serif stack",
+                description: "Font family stack used for all text",
+            },
+            { name: "class", type: "string", description: "Additional CSS classes for the stage" },
+        ],
+    },
     "logo-cloud": {
         name: "LogoCloud",
         slug: "logo-cloud",
@@ -855,17 +937,6 @@ export const registry = {
             },
         ],
     },
-    "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" },
-        ],
-        tags: ["cursor", "webgl", "fluid", "simulation", "interactive", "contained"],
-    },
     "glow-border": {
         name: "GlowBorder",
         slug: "glow-border",
@@ -2040,6 +2111,52 @@ 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",
+        category: "media",
+        status: "done",
+        credits: [
+            {
+                source: "Codrops",
+                url: "https://tympanus.net/codrops/2024/12/02/how-to-code-a-shader-based-reveal-effect-with-react-three-fiber-glsl/",
+            },
+            {
+                source: "colindmg/r3f-image-reveal-effect",
+                url: "https://github.com/colindmg/r3f-image-reveal-effect",
+            },
+        ],
+        tags: ["media", "image", "reveal", "webgl", "shader", "threejs", "noise"],
+        props: [
+            { name: "src", type: "string", description: "Image URL", required: true },
+            { name: "alt", type: "string", description: "Accessible label for the image" },
+            {
+                name: "trigger",
+                type: '"view" | "manual"',
+                default: '"view"',
+                description: 'Reveal trigger: "view" = on viewport entry, "manual" = via revealed prop',
+            },
+            {
+                name: "revealed",
+                type: "boolean",
+                default: "false",
+                description: 'Manual reveal state (used with trigger="manual"; also allows re-hiding)',
+            },
+            {
+                name: "duration",
+                type: "number",
+                default: "1.5",
+                description: "Reveal animation duration in seconds",
+            },
+            {
+                name: "delay",
+                type: "number",
+                default: "0",
+                description: 'Delay before reveal in seconds (trigger="view")',
+            },
+        ],
+    },
 };
 // =============================================================================
 // Registry Helpers

package/dist/types.d.ts

@@ -119,4 +119,6 @@ export interface ComponentMeta {
     events?: EventDef[];
     /** Version when component was added */
     since?: string;
+    /** Kept only as a backwards-compatible alias; hidden from generated docs */
+    deprecated?: boolean;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fancy-ui-svelte",
   "private": false,
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -50,7 +50,7 @@
     "tailwindcss": "^4.0.0"
   },
   "dependencies": {
-    "@vercel/analytics": "^2.0.1",
+    "@chenglou/pretext": "^0.0.5",
     "canvas-confetti": "^1.9.4",
     "clsx": "^2.1.1",
     "gsap": "^3.14.2",
@@ -59,6 +59,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
+    "@vercel/analytics": "^2.0.1",
     "@internationalized/date": "^3.10.1",
     "@lucide/svelte": "^0.562.0",
     "@playwright/test": "^1.58.2",
@@ -101,6 +102,7 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "check:registry": "node scripts/check-registry.mjs",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:e2e": "playwright test",