fancy-ui-svelte 0.4.0 → 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";

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";

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",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fancy-ui-svelte",
   "private": false,
-  "version": "0.4.0",
+  "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",