fancy-ui-svelte 0.8.0 → 0.9.0

package/dist/fancy-ui/fluid-cursor/webgpu-engine.js

@@ -263,19 +263,22 @@ async function createWebGpuFluid(canvas, opts) {
         }
         const context = maybeContext;
         context.configure(configuration);
+        // Browsers that do not support toneMapping drop the member, which
+        // getConfiguration() makes observable. Surface it as data (not just a
+        // DEV log) so callers can tell an extended-tone-mapping canvas from a
+        // clamped fallback; whether the display is HDR is checked separately by
+        // startWebGpuFluid.
+        let extendedToneMapping = false;
+        try {
+            const applied = context.getConfiguration?.();
+            extendedToneMapping = applied?.toneMapping?.mode === "extended";
+        }
+        catch {
+            // getConfiguration unsupported (e.g. Safari): assume clamped output.
+        }
         if (import.meta.env.DEV) {
-            // Browsers that do not support toneMapping drop the member, which
-            // getConfiguration() makes observable — log the real level.
-            let extended = false;
-            try {
-                const applied = context.getConfiguration?.();
-                extended = applied?.toneMapping?.mode === "extended";
-            }
-            catch {
-                // getConfiguration unsupported: assume clamped output.
-            }
-            console.info(extended
-                ? "[FluidCursor] HDR level: webgpu-hdr (extended tone mapping active)"
+            console.info(extendedToneMapping
+                ? "[FluidCursor] extended tone mapping active (webgpu-hdr if the display reports high dynamic range)"
                 : "[FluidCursor] HDR level: webgpu-sdr (float16 + P3, tone mapping clamped by browser)");
         }
         let destroyed = false;
@@ -610,6 +613,7 @@ async function createWebGpuFluid(canvas, opts) {
             get lost() {
                 return lost;
             },
+            extendedToneMapping,
             destroy() {
                 destroyed = true;
                 device.destroy();
@@ -625,8 +629,13 @@ async function createWebGpuFluid(canvas, opts) {
 }
 /**
  * Full WebGPU setup for FluidCursor: engine + pointer wiring + rAF loop +
- * visibility pause + auto splats. Resolves with a cleanup function, or with
- * `null` when WebGPU is unavailable (caller falls back to the WebGL path).
+ * visibility pause + auto splats. Resolves with a {@link FluidCursorHandle}
+ * (augmented with `cleanup`), or with `null` when WebGPU is unavailable
+ * (caller falls back to the WebGL path).
+ *
+ * Handle coordinates are top-left origin in [0,1]; WebGPU texcoords already
+ * use a top-origin convention, so no Y flip happens here (the WebGL path owns
+ * its own flip).
  */
 export async function startWebGpuFluid(canvas, opts) {
     const maybeEngine = await createWebGpuFluid(canvas, opts);
@@ -634,6 +643,19 @@ export async function startWebGpuFluid(canvas, opts) {
         return null;
     const engine = maybeEngine;
     const pointers = [pointerPrototype()];
+    // Dedicated synthetic pointer driven programmatically through the handle. It
+    // lives alongside the mouse pointer in the same list, so updateFrame splats
+    // both and the two inputs coexist. Created on first programmatic use, so a
+    // consumer that never drives the handle costs nothing.
+    let autopilotPointer = null;
+    let penWasUp = true;
+    function ensureAutopilotPointer() {
+        if (!autopilotPointer) {
+            autopilotPointer = pointerPrototype();
+            pointers.push(autopilotPointer);
+        }
+        return autopilotPointer;
+    }
     let animationFrameId = 0;
     let lastUpdateTime = Date.now();
     let colorUpdateTimer = 0;
@@ -734,6 +756,11 @@ export async function startWebGpuFluid(canvas, opts) {
         if (colorUpdateTimer >= 1) {
             colorUpdateTimer = colorUpdateTimer % 1;
             pointers.forEach((p) => {
+                // The synthetic pointer's color belongs to the handle: pulling from
+                // the generator here would advance the shared palette index twice per
+                // update and overwrite explicit stroke colors.
+                if (p === autopilotPointer)
+                    return;
                 p.color = opts.generateColor();
             });
         }
@@ -823,25 +850,77 @@ export async function startWebGpuFluid(canvas, opts) {
             engine.splat(Math.random(), Math.random(), (Math.random() - 0.5) * 200, (Math.random() - 0.5) * 200, opts.generateColor());
         }, opts.autoSplatInterval);
     }
-    return () => {
-        stopped = true;
-        cancelAnimationFrame(animationFrameId);
-        if (observer)
-            observer.disconnect();
-        if (autoSplatTimer)
-            clearInterval(autoSplatTimer);
-        if (opts.interactive) {
-            window.removeEventListener("mousedown", handleMouseDown);
-            document.body.removeEventListener("mousemove", handleFirstMouseMove);
-            window.removeEventListener("mousemove", handleMouseMove);
-            document.body.removeEventListener("touchstart", handleFirstTouchStart);
-            window.removeEventListener("touchstart", handleTouchStart);
-            window.removeEventListener("touchmove", handleTouchMove);
-        }
-        if (opts.contained) {
-            window.removeEventListener("resize", updateCanvasRectCache);
-            window.removeEventListener("scroll", updateCanvasRectCache);
-        }
-        engine.destroy();
+    // Extended tone mapping only proves the browser kept the configuration — an
+    // SDR display still clamps the output — so "webgpu-hdr" requires both. The
+    // display state is sampled once here and does not follow the window to
+    // another monitor.
+    const hdrDisplay = typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? window.matchMedia("(dynamic-range: high)").matches
+        : false;
+    const renderLevel = engine.extendedToneMapping && hdrDisplay ? "webgpu-hdr" : "webgpu-sdr";
+    return {
+        /**
+         * x,y in [0,1], top-left origin. WebGPU texcoords are already top-origin,
+         * so the coordinates pass straight through.
+         */
+        moveTo(x, y, color) {
+            const pointer = ensureAutopilotPointer();
+            const posX = x * canvas.width;
+            const posY = y * canvas.height;
+            if (penWasUp) {
+                // First move of a new stroke: reposition only (mirrors
+                // updatePointerDownData) so the jump from the previous stroke's
+                // end never draws a connecting streak.
+                penWasUp = false;
+                pointer.down = true;
+                pointer.moved = false;
+                pointer.texcoordX = posX / canvas.width;
+                pointer.texcoordY = posY / canvas.height;
+                pointer.prevTexcoordX = pointer.texcoordX;
+                pointer.prevTexcoordY = pointer.texcoordY;
+                pointer.deltaX = 0;
+                pointer.deltaY = 0;
+                // A stroke with no explicit color takes a fresh generated one, as a
+                // real pointer-down does: the prototype's black would inject
+                // invisible dye.
+                pointer.color = color ?? opts.generateColor();
+                return;
+            }
+            updatePointerMoveData(pointer, posX, posY, color ?? pointer.color);
+        },
+        penUp() {
+            // `moved` is deliberately left alone: updateFrame consumes and clears it
+            // on the next frame, so clearing it here would swallow the final segment
+            // of a stroke finished synchronously before that frame.
+            penWasUp = true;
+            if (autopilotPointer)
+                autopilotPointer.down = false;
+        },
+        /** No Y flip on the WebGPU path. */
+        burst(x, y, dx, dy, color) {
+            engine.splat(x, y, dx, dy, color);
+        },
+        renderLevel,
+        cleanup() {
+            stopped = true;
+            cancelAnimationFrame(animationFrameId);
+            if (observer)
+                observer.disconnect();
+            if (autoSplatTimer)
+                clearInterval(autoSplatTimer);
+            if (opts.interactive) {
+                window.removeEventListener("mousedown", handleMouseDown);
+                document.body.removeEventListener("mousemove", handleFirstMouseMove);
+                window.removeEventListener("mousemove", handleMouseMove);
+                document.body.removeEventListener("touchstart", handleFirstTouchStart);
+                window.removeEventListener("touchstart", handleTouchStart);
+                window.removeEventListener("touchmove", handleTouchMove);
+            }
+            if (opts.contained) {
+                window.removeEventListener("resize", updateCanvasRectCache);
+                window.removeEventListener("scroll", updateCanvasRectCache);
+            }
+            engine.destroy();
+        },
     };
 }

package/dist/fancy-ui/line-hover-link/README.md

@@ -0,0 +1,37 @@
+# LineHoverLink
+
+An anchor with a pure-CSS underline hover effect, selectable from 11 variants. No JavaScript runs on hover — every variant is `::before`/`::after` pseudo-elements or an inline SVG stroke animated with CSS `transition`/`transform`/`stroke-dashoffset`, triggered by `:hover`/`:focus-visible`.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { LineHoverLink } from "fancy-ui-svelte";
+</script>
+
+<LineHoverLink href="/about" variant="slide">About</LineHoverLink>
+<LineHoverLink href="/contact" variant="scribble" target="_blank">Contact</LineHoverLink>
+```
+
+## Props
+
+| Prop         | Type               | Default   | Description            |
+| ------------ | ------------------ | --------- | ---------------------- |
+| `variant`    | `LineHoverVariant` | `"slide"` | The animation variant  |
+| `href`       | `string`           | `"#"`     | Link href              |
+| `target`     | `string`           | —         | Link target            |
+| `rel`        | `string`           | —         | Link rel               |
+| `aria-label` | `string`           | —         | Accessible label       |
+| `class`      | `string`           | `""`      | Additional CSS classes |
+
+Children (slot content) are the link's visible text/label.
+
+`LineHoverVariant` is one of: `"slide" | "double" | "grow" | "strike" | "fade" | "pulse" | "swap" | "sweep" | "bounce" | "arc" | "scribble"`.
+
+## Implementation notes
+
+- The component has no `<script>`-side reactive state beyond two `$derived` values — everything visual is CSS selected by a `link-hover--<variant>` class.
+- `arc` and `scribble` render an inline `<svg>` with a single `<path pathLength="1">` instead of a pseudo-element underline; both use the same technique (`stroke-dasharray: 1; stroke-dashoffset: 1` at rest, animated to `0` on hover/focus via `transition: stroke-dashoffset`).
+- `strike`, `bounce`, `arc`, and `scribble` wrap the link text in an inner `<span>` (via the `needsSpan` derived flag) because those variants also transform the text itself (scale for `strike`, translate for `bounce`) independently of the underline graphic.
+- `rel` defaults to `"noopener noreferrer"` automatically when `target="_blank"` and no explicit `rel` was passed, via the `relValue` derived value — an explicit `rel` prop is never overridden.
+- All variants respond to both `:hover` and `:focus-visible`, so the effect is keyboard-navigable, not mouse-only.

package/dist/fancy-ui/line-reveal/LineReveal.test.d.ts

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

package/dist/fancy-ui/line-reveal/LineReveal.test.js

@@ -0,0 +1,77 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import LineReveal from "./LineReveal.svelte";
+// pretext's prepareWithSegments() needs a canvas 2d context or OffscreenCanvas
+// for text measurement — neither exists under jsdom (getContext is mocked to
+// return null in src/test-setup.ts). Stubbing document.fonts.load() with a
+// promise that never resolves keeps the component on its pre-measurement
+// fallback branch instead of letting the effect's `.then()` handler call
+// into pretext and throw "Text measurement requires OffscreenCanvas or a DOM
+// canvas context."
+function stubNeverLoadingFonts() {
+    Object.defineProperty(document, "fonts", {
+        configurable: true,
+        writable: true,
+        value: { load: () => new Promise(() => { }) },
+    });
+}
+class MockIntersectionObserver {
+    callback;
+    static instances = [];
+    constructor(callback) {
+        this.callback = callback;
+        MockIntersectionObserver.instances.push(this);
+    }
+    observe = vi.fn();
+    disconnect = vi.fn();
+    unobserve = vi.fn();
+}
+vi.stubGlobal("IntersectionObserver", MockIntersectionObserver);
+describe("LineReveal", () => {
+    beforeEach(stubNeverLoadingFonts);
+    afterEach(() => {
+        cleanup();
+        MockIntersectionObserver.instances = [];
+    });
+    it("mounts and renders the root wrapper", () => {
+        const { container } = render(LineReveal, { props: { text: "Hello there" } });
+        const root = container.firstElementChild;
+        expect(root.className).toContain("relative");
+        expect(root.className).toContain("w-full");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(LineReveal, {
+            props: { text: "Hello", class: "my-reveal" },
+        });
+        const root = container.firstElementChild;
+        expect(root.className).toContain("my-reveal");
+    });
+    it("keeps the full text available to screen readers via a sr-only span", () => {
+        const { container } = render(LineReveal, { props: { text: "Accessible copy" } });
+        const srOnly = container.querySelector(".sr-only");
+        expect(srOnly?.textContent).toBe("Accessible copy");
+    });
+    it("renders the pre-measure fallback (hidden text) before pretext has measured", () => {
+        const { container } = render(LineReveal, { props: { text: "Falls back" } });
+        const fallback = container.querySelector('[aria-hidden="true"]');
+        expect(fallback).toBeTruthy();
+        expect(fallback.textContent).toBe("Falls back");
+        expect(fallback.style.visibility).toBe("hidden");
+    });
+    it("sets the font style from the font prop", () => {
+        const { container } = render(LineReveal, {
+            props: { text: "Styled", font: "700 24px Georgia, serif" },
+        });
+        const root = container.firstElementChild;
+        expect(root.getAttribute("style") ?? "").toContain("24px");
+    });
+    it("observes the container element for intersection", () => {
+        render(LineReveal, { props: { text: "Watch me" } });
+        const lastInstance = MockIntersectionObserver.instances.at(-1);
+        expect(lastInstance?.observe).toHaveBeenCalled();
+    });
+    it("unmounts cleanly", () => {
+        const { unmount } = render(LineReveal, { props: { text: "Bye" } });
+        expect(() => unmount()).not.toThrow();
+    });
+});

package/dist/fancy-ui/marquee/README.md

@@ -0,0 +1,57 @@
+# Marquee
+
+An infinite scrolling row (or column) of content, built by rendering multiple copies of its children side by side and animating the whole track by `-100% - gap` on a seamless loop — no JS-measured widths, no `requestAnimationFrame`.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { Marquee, ReviewCard } from "fancy-ui-svelte";
+
+	const reviews = [
+		{ name: "Jack", username: "@jack", body: "Amazing.", img: "https://avatar.vercel.sh/jack" },
+	];
+</script>
+
+<Marquee pauseOnHover class="[--duration:20s]">
+	{#each reviews as review}
+		<ReviewCard {...review} />
+	{/each}
+</Marquee>
+```
+
+Two rows scrolling in opposite directions (a common pattern) are just two `<Marquee>`s, one with `reverse`:
+
+```svelte
+<Marquee pauseOnHover>
+	{#each firstRow as r}
+		<ReviewCard {...r} />
+	{/each}
+</Marquee>
+<Marquee reverse pauseOnHover>
+	{#each secondRow as r}
+		<ReviewCard {...r} />
+	{/each}
+</Marquee>
+```
+
+## Props
+
+| Prop           | Type      | Default | Description                                  |
+| -------------- | --------- | ------- | -------------------------------------------- |
+| `reverse`      | `boolean` | `false` | Reverse the scroll direction                 |
+| `pauseOnHover` | `boolean` | `false` | Pause the animation on hover                 |
+| `vertical`     | `boolean` | `false` | Scroll vertically instead of horizontally    |
+| `repeat`       | `number`  | `4`     | Number of times to repeat the children track |
+| `class`        | `string`  | —       | Additional CSS classes                       |
+
+Children are the content to repeat and scroll.
+
+`ReviewCard` is also exported as a ready-made card for testimonial-style marquees, taking `img`, `name`, `username`, and `body` props — its own prop type isn't re-exported as a named type, so consumers writing their own card don't need to match its shape exactly.
+
+## Implementation notes
+
+- Speed and gap are CSS custom properties (`--duration: 40s`, `--gap: 1rem` by default) set on the root and overridable per-instance via `class="[--duration:20s]"` — there's no `speed`/`gap` prop.
+- The seamless loop works because `repeat` renders that many identical copies of `children` in a row and animates the whole flex track by exactly `-100% - var(--gap)` (one child-set width) — too low a `repeat` on a narrow set of children can leave a visible gap on wide viewports.
+- `pauseOnHover` pauses via `group-hover:[animation-play-state:paused]` on the whole marquee group, not per-item.
+- No `prefers-reduced-motion` handling — the scroll animation runs continuously regardless of user preference.

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

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

package/dist/fancy-ui/matrix-rain/MatrixRain.test.js

@@ -0,0 +1,30 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import MatrixRain from "./MatrixRain.svelte";
+describe("MatrixRain", () => {
+    afterEach(cleanup);
+    it("renders a canvas element", () => {
+        const { container } = render(MatrixRain);
+        expect(container.querySelector("canvas")).toBeTruthy();
+    });
+    it("applies the base fill/background classes", () => {
+        const { container } = render(MatrixRain);
+        const canvas = container.querySelector("canvas");
+        expect(canvas.className).toContain("block");
+        expect(canvas.className).toContain("h-full");
+        expect(canvas.className).toContain("w-full");
+        expect(canvas.className).toContain("bg-black");
+    });
+    it("applies custom class names alongside the base classes", () => {
+        const { container } = render(MatrixRain, { props: { class: "my-rain" } });
+        const canvas = container.querySelector("canvas");
+        expect(canvas.className).toContain("my-rain");
+        expect(canvas.className).toContain("block");
+    });
+    it("mounts and unmounts without throwing when getContext('2d') is unavailable (jsdom has no canvas backend)", () => {
+        const { unmount } = render(MatrixRain, {
+            props: { color: "#ff00ff", speed: 2, density: 0.5, glyphSize: 20, fadeOpacity: 0.1 },
+        });
+        expect(() => unmount()).not.toThrow();
+    });
+});

package/dist/fancy-ui/matrix-rain/README.md

@@ -0,0 +1,42 @@
+# MatrixRain
+
+A Canvas2D "digital rain" background: columns of falling glyphs with a bright leading character and a dimmer trailing one, faded by repeatedly painting a low-opacity black rectangle over the previous frame instead of clearing it.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { MatrixRain } from "fancy-ui-svelte";
+</script>
+
+<div class="relative h-[400px] w-full">
+	<MatrixRain />
+</div>
+```
+
+```svelte
+<!-- Custom color, denser and faster -->
+<MatrixRain color="#39ff14" density={1.5} speed={1.8} />
+```
+
+The canvas fills its parent (`h-full w-full`) and paints its own black background, so size it via a wrapping element.
+
+## Props
+
+| Prop          | Type     | Default     | Description                                                             |
+| ------------- | -------- | ----------- | ----------------------------------------------------------------------- |
+| `color`       | `string` | `"#00ff41"` | Glyph color (the classic Matrix green)                                  |
+| `speed`       | `number` | `1.0`       | Fall speed multiplier (`< 1` slower, `> 1` faster)                      |
+| `density`     | `number` | `1.0`       | Column density multiplier (higher = more, narrower columns)             |
+| `glyphSize`   | `number` | `16`        | Font size of each glyph in pixels                                       |
+| `fadeOpacity` | `number` | `0.05`      | Opacity of the black overlay painted each frame — controls trail length |
+| `class`       | `string` | —           | Additional CSS classes on the canvas                                    |
+
+## Implementation notes
+
+- Glyphs are drawn from a fixed katakana + Latin + digit + symbol string (`GLYPHS`); each visible position gets a freshly randomized glyph every frame it's redrawn, so no character "stays" in place — the trail effect comes entirely from `fadeOpacity`, not glyph persistence.
+- Column count is `floor(width / (glyphSize * density))`, and both `glyphSize` and `density` are floored to a safe minimum (`glyphSize >= 1`, `density >= 0.1`) so extreme prop values can't divide by zero or blow up the column count.
+- `speed >= 1` advances every column by `speed` rows per frame; `speed < 1` instead skips frames (`frameCount % round(1/speed) === 0`), which is why speed below 1 steps down in discrete slow-motion increments rather than scaling smoothly.
+- The canvas is sized in device pixels via `window.devicePixelRatio` and a matching `ctx.setTransform`, so glyphs stay crisp on HiDPI screens; a `ResizeObserver` on the canvas re-runs the resize/init logic (which also resets column positions) whenever its box size changes.
+- The render loop is a single `requestAnimationFrame` chain started in a `$effect` and torn down (canceled, observer disconnected) in its cleanup — there's no visibility-based pausing, so it keeps painting while off-screen or the tab is backgrounded.
+- No `prefers-reduced-motion` handling — the rain animates continuously regardless of user preference.

package/dist/fancy-ui/noise-reveal/README.md

@@ -0,0 +1,52 @@
+# NoiseReveal
+
+A WebGL image reveal driven by a Perlin-noise dissolve mask, a radial gradient that contracts as the reveal progresses, and a subtle wave displacement on the mesh itself. Reveals either once on scroll-into-view or under full manual control via a `revealed` prop.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { NoiseReveal } from "fancy-ui-svelte";
+</script>
+
+<!-- Reveals once when it scrolls into view -->
+<NoiseReveal
+	src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800"
+	alt="Mountain peak above the clouds"
+	class="h-[300px] max-w-md"
+/>
+```
+
+```svelte
+<!-- Manual control — can also be hidden again -->
+<script lang="ts">
+	import { NoiseReveal } from "fancy-ui-svelte";
+	let revealed = $state(true);
+</script>
+
+<NoiseReveal src="/photo.jpg" trigger="manual" {revealed} />
+<button onclick={() => (revealed = !revealed)}>{revealed ? "Hide" : "Reveal"}</button>
+```
+
+## Props
+
+| Prop       | Type                 | Default  | Description                                                            |
+| ---------- | -------------------- | -------- | ---------------------------------------------------------------------- |
+| `src`      | `string`             | —        | Image URL (required)                                                   |
+| `alt`      | `string`             | —        | Accessible label for the image                                         |
+| `trigger`  | `"view" \| "manual"` | `"view"` | `"view"` reveals once on viewport entry; `"manual"` follows `revealed` |
+| `revealed` | `boolean`            | `false`  | Manual reveal state — only used with `trigger="manual"`; can re-hide   |
+| `duration` | `number`             | `1.5`    | Reveal animation duration in seconds                                   |
+| `delay`    | `number`             | `0`      | Delay before reveal in seconds — only applies to `trigger="view"`      |
+| `class`    | `string`             | `""`     | Additional CSS classes on the root                                     |
+
+## Implementation notes
+
+- The dissolve mask is computed entirely in the fragment shader: a domain-warped Perlin noise (`cnoise`, classic 3D Perlin noise) combined with a radial gradient anchored at the image center that contracts as `uProgress` goes from 0 to 1, clamped and inverted into an alpha value — there's no CPU-side mask texture.
+- Progress is driven by a hand-rolled tween (`setTarget`, cubic ease-in-out) rather than a library, advanced each animation frame against `performance.now()`; under `prefers-reduced-motion: reduce` the tween is skipped entirely and the value jumps straight to its target.
+- `trigger="view"` uses an `IntersectionObserver` (`threshold: 0.1`) that disconnects itself after the first intersection — the reveal only ever fires once per mount, `delay` is applied via `setTimeout` after that first intersection, not before.
+- `trigger="manual"` re-runs `setTarget(revealed ? 1 : 0)` on every change to `revealed`, so unlike `"view"` it supports revealing and re-hiding repeatedly.
+- The image texture loads asynchronously (`THREE.TextureLoader`); until it resolves, `uTexture` is `null` and the plane renders whatever the shader produces with no texture bound — there is no separate loading placeholder.
+- The plane is a unit `PlaneGeometry` scaled at render time to exactly fill the camera frustum at `z = 0` for the current aspect ratio (`fitPlane`), and `CoverUV` in the fragment shader applies `object-fit: cover`-style UV cropping so images with a different aspect ratio than the container aren't stretched.
+- Cleanup (on effect teardown) removes the `resize` listener, cancels the render loop, removes the canvas from `container`, and disposes the renderer, geometry, material, and any loaded texture.
+- When `alt` is provided, the root gets `role="img"` and `aria-label={alt}` so the canvas-rendered image is announced to assistive tech.

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

@@ -0,0 +1,36 @@
+# RainbowButton
+
+A button (or anchor, when `href` is set) with an animated rainbow gradient border and a matching blurred glow beneath it, built entirely from CSS gradients, background layering, and a single `background-position` keyframe animation.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { RainbowButton } from "fancy-ui-svelte";
+</script>
+
+<RainbowButton onclick={() => console.log("clicked")}>Get started</RainbowButton>
+
+<!-- Renders an <a> instead of a <button> -->
+<RainbowButton href="/pricing" speed={3}>See pricing</RainbowButton>
+```
+
+## Props
+
+| Prop       | Type                                                        | Default    | Description                                                     |
+| ---------- | ----------------------------------------------------------- | ---------- | --------------------------------------------------------------- |
+| `speed`    | `number`                                                    | `2`        | Animation speed in seconds (lower = faster)                     |
+| `href`     | `string`                                                    | —          | Renders an `<a>` instead of a `<button>` when set               |
+| `type`     | `"button" \| "submit" \| "reset"`                           | `"button"` | Native `<button>` `type` attribute (ignored when `href` is set) |
+| `disabled` | `boolean`                                                   | —          | Disables the button / marks the link `aria-disabled`            |
+| `ref`      | `HTMLButtonElement \| HTMLAnchorElement \| null` (bindable) | `null`     | Bound reference to the rendered element                         |
+| `class`    | `string`                                                    | —          | Additional CSS classes                                          |
+| `children` | `Snippet`                                                   | —          | Button label content                                            |
+
+## Implementation notes
+
+- `RainbowButtonProps` is typed as `BaseProps & Omit<HTMLButtonAttributes, ...> & Omit<HTMLAnchorAttributes, ...>` for editor completion, but the component only actually reads `class`, `speed`, `href`, `type`, `disabled`, `ref`, and `children` off `$props()` — there is no `...restProps` spread, so other native attributes typed as valid (e.g. `onclick` via `HTMLButtonAttributes`) are **not** forwarded to the rendered element. Attach event listeners with `onclick` on a wrapping element, or extend the component, if pass-through is needed beyond what's listed above.
+- When `href` is set, the rendered `<a>` gets `aria-disabled` and `tabindex="-1"` (plus `role="link"`) instead of a native `disabled` attribute, since anchors don't support `disabled`.
+- The rainbow gradient colors (`--rainbow-1`…`--rainbow-5`) are hard-coded HSL custom properties scoped to `.rainbow-button` in the component's own `<style>` block — they aren't exposed as props; only the shared `speed` (as `--rainbow-speed`) is.
+- Light/dark mode swap the button's own fill and text color (dark button + white text in light mode, light button + black text in `dark:`) while reusing the same rainbow gradient for both the border and the glow.
+- No `prefers-reduced-motion` handling — the border and glow animation run continuously regardless of user preference.