fancy-ui-svelte 0.2.1

package/dist/fancy-ui/liquid-glass/LiquidGlass.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import { onMount } from "svelte";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		radius?: number;
+		border?: number;
+		lightness?: number;
+		displace?: number;
+		blend?: string;
+		xChannel?: "R" | "G" | "B";
+		yChannel?: "R" | "G" | "B";
+		alpha?: number;
+		blur?: number;
+		rOffset?: number;
+		gOffset?: number;
+		bOffset?: number;
+		scale?: number;
+		frost?: number;
+		class?: string;
+		containerClass?: string;
+		children?: Snippet;
+	}
+
+	let {
+		radius = 16,
+		border: borderProp = 0.07,
+		lightness = 50,
+		displace,
+		blend = "difference",
+		xChannel = "R",
+		yChannel = "B",
+		alpha = 0.93,
+		blur = 11,
+		rOffset = 0,
+		gOffset = 10,
+		bOffset = 20,
+		scale = -180,
+		frost = 0.05,
+		class: className = "",
+		containerClass = "",
+		children,
+	}: Props = $props();
+
+	let liquidGlassRoot: HTMLDivElement;
+	let dimensions = $state({ width: 0, height: 0 });
+	let filterId = $state("");
+
+	let displacementImage = $derived.by(() => {
+		const brd = Math.min(dimensions.width, dimensions.height) * (borderProp * 0.5);
+
+		return `<svg viewBox="0 0 ${dimensions.width} ${dimensions.height}" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="red-${filterId}" x1="100%" y1="0%" x2="0%" y2="0%"><stop offset="0%" stop-color="#0000"/><stop offset="100%" stop-color="red"/></linearGradient><linearGradient id="blue-${filterId}" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#0000"/><stop offset="100%" stop-color="blue"/></linearGradient></defs><rect x="0" y="0" width="${dimensions.width}" height="${dimensions.height}" fill="black"/><rect x="0" y="0" width="${dimensions.width}" height="${dimensions.height}" rx="${radius}" fill="url(#red-${filterId})"/><rect x="0" y="0" width="${dimensions.width}" height="${dimensions.height}" rx="${radius}" fill="url(#blue-${filterId})" style="mix-blend-mode:${blend}"/><rect x="${brd}" y="${brd}" width="${dimensions.width - brd * 2}" height="${dimensions.height - brd * 2}" rx="${radius}" fill="hsl(0 0% ${lightness}% / ${alpha})" style="filter:blur(${blur}px)"/></svg>`;
+	});
+
+	let displacementDataUri = $derived(`data:image/svg+xml,${encodeURIComponent(displacementImage)}`);
+
+	let backdropStyle = $derived(
+		filterId
+			? `--frost:${frost};border-radius:${radius}px;backdrop-filter:url(#displacementFilter-${filterId});`
+			: `--frost:${frost};border-radius:${radius}px;`
+	);
+
+	onMount(() => {
+		filterId = `lg-${Math.random().toString(36).slice(2, 8)}`;
+
+		if (!liquidGlassRoot) return;
+
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+
+			let width = 0;
+			let height = 0;
+
+			if (entry.borderBoxSize && entry.borderBoxSize.length) {
+				width = entry.borderBoxSize[0]!.inlineSize;
+				height = entry.borderBoxSize[0]!.blockSize;
+			} else if (entry.contentRect) {
+				width = entry.contentRect.width;
+				height = entry.contentRect.height;
+			}
+
+			dimensions = { width, height };
+		});
+
+		observer.observe(liquidGlassRoot);
+
+		return () => observer.disconnect();
+	});
+</script>
+
+<div
+	bind:this={liquidGlassRoot}
+	class={cn("liquid-glass-effect", containerClass)}
+	style={backdropStyle}
+>
+	<div class={cn("liquid-glass-slot", className)}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if filterId}
+		<svg class="liquid-glass-filter" xmlns="http://www.w3.org/2000/svg">
+			<defs>
+				<filter id="displacementFilter-{filterId}" color-interpolation-filters="sRGB">
+					<feImage x="0" y="0" width="100%" height="100%" href={displacementDataUri} result="map" />
+					<feDisplacementMap
+						in="SourceGraphic"
+						in2="map"
+						xChannelSelector={xChannel}
+						yChannelSelector={yChannel}
+						scale={scale + rOffset}
+						result="dispRed"
+					/>
+					<feColorMatrix
+						in="dispRed"
+						type="matrix"
+						values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
+						result="red"
+					/>
+					<feDisplacementMap
+						in="SourceGraphic"
+						in2="map"
+						xChannelSelector={xChannel}
+						yChannelSelector={yChannel}
+						scale={scale + gOffset}
+						result="dispGreen"
+					/>
+					<feColorMatrix
+						in="dispGreen"
+						type="matrix"
+						values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0"
+						result="green"
+					/>
+					<feDisplacementMap
+						in="SourceGraphic"
+						in2="map"
+						xChannelSelector={xChannel}
+						yChannelSelector={yChannel}
+						scale={scale + bOffset}
+						result="dispBlue"
+					/>
+					<feColorMatrix
+						in="dispBlue"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0"
+						result="blue"
+					/>
+					<feBlend in="red" in2="green" mode="screen" result="rg" />
+					<feBlend in="rg" in2="blue" mode="screen" result="output" />
+					{#if displace !== undefined}
+						<feGaussianBlur stdDeviation={displace} />
+					{/if}
+				</filter>
+			</defs>
+		</svg>
+	{/if}
+</div>
+
+<style>
+	.liquid-glass-effect {
+		position: relative;
+		display: block;
+		opacity: 1;
+		border-radius: inherit;
+		background: light-dark(hsl(0 0% 100% / var(--frost, 0)), hsl(0 0% 0% / var(--frost, 0)));
+		box-shadow:
+			0 0 2px 1px
+				light-dark(
+					color-mix(in oklch, canvasText, #0000 85%),
+					color-mix(in oklch, canvasText, #0000 90%)
+				)
+				inset,
+			0 0 10px 4px
+				light-dark(
+					color-mix(in oklch, canvasText, #0000 90%),
+					color-mix(in oklch, canvasText, #0000 95%)
+				)
+				inset,
+			0px 4px 16px rgba(17, 17, 26, 0.05),
+			0px 8px 24px rgba(17, 17, 26, 0.05),
+			0px 16px 56px rgba(17, 17, 26, 0.05),
+			0px 4px 16px rgba(17, 17, 26, 0.05) inset,
+			0px 8px 24px rgba(17, 17, 26, 0.05) inset,
+			0px 16px 56px rgba(17, 17, 26, 0.05) inset;
+	}
+
+	.liquid-glass-slot {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		border-radius: inherit;
+	}
+
+	.liquid-glass-filter {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+</style>

package/dist/fancy-ui/liquid-glass/LiquidGlass.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+interface Props {
+    radius?: number;
+    border?: number;
+    lightness?: number;
+    displace?: number;
+    blend?: string;
+    xChannel?: "R" | "G" | "B";
+    yChannel?: "R" | "G" | "B";
+    alpha?: number;
+    blur?: number;
+    rOffset?: number;
+    gOffset?: number;
+    bOffset?: number;
+    scale?: number;
+    frost?: number;
+    class?: string;
+    containerClass?: string;
+    children?: Snippet;
+}
+declare const LiquidGlass: import("svelte").Component<Props, {}, "">;
+type LiquidGlass = ReturnType<typeof LiquidGlass>;
+export default LiquidGlass;

package/dist/fancy-ui/liquid-glass/LiquidGlass.test.d.ts

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

package/dist/fancy-ui/liquid-glass/LiquidGlass.test.js

@@ -0,0 +1,48 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import LiquidGlass from "./LiquidGlass.svelte";
+describe("LiquidGlass", () => {
+    beforeEach(() => {
+        // Mock ResizeObserver (not available in jsdom)
+        vi.stubGlobal("ResizeObserver", class {
+            observe = vi.fn();
+            unobserve = vi.fn();
+            disconnect = vi.fn();
+        });
+    });
+    afterEach(cleanup);
+    it("renders the component", () => {
+        const { container } = render(LiquidGlass);
+        const wrapper = container.querySelector(".liquid-glass-effect");
+        expect(wrapper).toBeInTheDocument();
+    });
+    it("renders slot container", () => {
+        const { container } = render(LiquidGlass);
+        const slot = container.querySelector(".liquid-glass-slot");
+        expect(slot).toBeInTheDocument();
+    });
+    it("applies custom container class", () => {
+        const { container } = render(LiquidGlass, {
+            props: { containerClass: "my-container" },
+        });
+        const wrapper = container.querySelector(".liquid-glass-effect");
+        expect(wrapper?.className).toContain("my-container");
+    });
+    it("applies custom class to slot container", () => {
+        const { container } = render(LiquidGlass, { props: { class: "my-slot" } });
+        const slot = container.querySelector(".liquid-glass-slot");
+        expect(slot?.className).toContain("my-slot");
+    });
+    it("sets frost CSS variable", () => {
+        const { container } = render(LiquidGlass, { props: { frost: 0.1 } });
+        const wrapper = container.querySelector(".liquid-glass-effect");
+        expect(wrapper.getAttribute("style")).toContain("--frost");
+        expect(wrapper.getAttribute("style")).toContain("0.1");
+    });
+    it("sets border radius", () => {
+        const { container } = render(LiquidGlass, { props: { radius: 24 } });
+        const wrapper = container.querySelector(".liquid-glass-effect");
+        expect(wrapper.getAttribute("style")).toContain("border-radius");
+        expect(wrapper.getAttribute("style")).toContain("24px");
+    });
+});

package/dist/fancy-ui/liquid-glass/README.md

@@ -0,0 +1,34 @@
+# LiquidGlass
+
+A glass-like visual effect using SVG filters for chromatic displacement, creating a liquid glass refraction look. Uses `backdrop-filter` with an inline SVG displacement map.
+
+## Props
+
+| Prop             | Type          | Default        | Description                          |
+| ---------------- | ------------- | -------------- | ------------------------------------ |
+| `radius`         | `number`      | `16`           | Border radius in px                  |
+| `border`         | `number`      | `0.07`         | Border thickness factor              |
+| `lightness`      | `number`      | `50`           | HSL lightness of fill                |
+| `displace`       | `number`      | —              | Gaussian blur std deviation          |
+| `blend`          | `string`      | `"difference"` | SVG blend mode                       |
+| `xChannel`       | `"R"\|"G"\|"B"` | `"R"`          | X displacement channel               |
+| `yChannel`       | `"R"\|"G"\|"B"` | `"B"`          | Y displacement channel               |
+| `alpha`          | `number`      | `0.93`         | Fill opacity                         |
+| `blur`           | `number`      | `11`           | Inner blur                           |
+| `rOffset`        | `number`      | `0`            | Red channel offset                   |
+| `gOffset`        | `number`      | `10`           | Green channel offset                 |
+| `bOffset`        | `number`      | `20`           | Blue channel offset                  |
+| `scale`          | `number`      | `-180`         | Displacement scale                   |
+| `frost`          | `number`      | `0.05`         | Frosted overlay opacity              |
+| `class`          | `string`      | `""`           | CSS classes for inner container      |
+| `containerClass` | `string`      | `""`           | CSS classes for outer container      |
+
+## Usage
+
+```svelte
+<LiquidGlass containerClass="w-64 h-40">
+  <div class="p-4 text-white">Glass content</div>
+</LiquidGlass>
+```
+
+**Note**: This component uses `position: fixed` and `backdrop-filter` with SVG filters. Place it over content to see the refraction effect.

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

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

package/dist/fancy-ui/liquid-glass/index.js

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

package/dist/fancy-ui/logo-cloud/AnimatedLogoCloud.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	export interface Logo {
+		name: string;
+		path: string;
+	}
+
+	export interface AnimatedLogoCloudProps {
+		/** Additional CSS classes for the scrolling container */
+		class?: string;
+		/** Optional title displayed above the logos */
+		title?: string;
+		/** Array of logos with name and image path */
+		logos?: Logo[];
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let { class: className, title, logos = [] }: AnimatedLogoCloudProps = $props();
+</script>
+
+<div class="w-full py-12">
+	<div class="mx-auto w-full px-4 md:px-8">
+		{#if title}
+			<div class="text-muted-foreground text-center font-medium">
+				{title}
+			</div>
+		{/if}
+		<div
+			class={cn("logo-cloud-mask group relative mt-6 flex gap-6 overflow-hidden p-2", className)}
+		>
+			{#each { length: 5 } as _}
+				<div class="logo-cloud-scroll flex shrink-0 flex-row justify-around gap-6">
+					{#each logos as logo}
+						<img src={logo.path} alt={logo.name} class="h-10 w-28 px-2 brightness-0 dark:invert" />
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.logo-cloud-mask {
+		mask-image: linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%);
+	}
+
+	.logo-cloud-scroll {
+		animation: logo-cloud-scroll 30s linear infinite;
+	}
+
+	@keyframes logo-cloud-scroll {
+		0% {
+			transform: translateX(0);
+		}
+		100% {
+			transform: translateX(calc(-100% - 1.5rem));
+		}
+	}
+</style>

package/dist/fancy-ui/logo-cloud/AnimatedLogoCloud.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface Logo {
+    name: string;
+    path: string;
+}
+export interface AnimatedLogoCloudProps {
+    /** Additional CSS classes for the scrolling container */
+    class?: string;
+    /** Optional title displayed above the logos */
+    title?: string;
+    /** Array of logos with name and image path */
+    logos?: Logo[];
+}
+declare const AnimatedLogoCloud: import("svelte").Component<AnimatedLogoCloudProps, {}, "">;
+type AnimatedLogoCloud = ReturnType<typeof AnimatedLogoCloud>;
+export default AnimatedLogoCloud;

package/dist/fancy-ui/logo-cloud/AnimatedLogoCloud.test.d.ts

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

package/dist/fancy-ui/logo-cloud/AnimatedLogoCloud.test.js

@@ -0,0 +1,59 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import { AnimatedLogoCloud } from "./index";
+const mockLogos = [
+    { name: "Svelte", path: "/svelte.svg" },
+    { name: "React", path: "/react.svg" },
+];
+describe("AnimatedLogoCloud", () => {
+    afterEach(cleanup);
+    it("renders a container div", () => {
+        const { container } = render(AnimatedLogoCloud, {
+            props: { logos: mockLogos },
+        });
+        const mask = container.querySelector(".logo-cloud-mask");
+        expect(mask).toBeInTheDocument();
+    });
+    it("renders 5 scroll groups", () => {
+        const { container } = render(AnimatedLogoCloud, {
+            props: { logos: mockLogos },
+        });
+        const scrolls = container.querySelectorAll(".logo-cloud-scroll");
+        expect(scrolls.length).toBe(5);
+    });
+    it("renders correct number of logo images per group", () => {
+        const { container } = render(AnimatedLogoCloud, {
+            props: { logos: mockLogos },
+        });
+        const firstGroup = container.querySelector(".logo-cloud-scroll");
+        const imgs = firstGroup?.querySelectorAll("img");
+        expect(imgs?.length).toBe(2);
+    });
+    it("sets correct alt on logo images", () => {
+        const { container } = render(AnimatedLogoCloud, {
+            props: { logos: mockLogos },
+        });
+        const img = container.querySelector("img");
+        expect(img).toHaveAttribute("alt", "Svelte");
+    });
+    it("renders title when provided", () => {
+        const { container } = render(AnimatedLogoCloud, {
+            props: { logos: mockLogos, title: "Our Partners" },
+        });
+        expect(container.textContent).toContain("Our Partners");
+    });
+    it("does not render title when not provided", () => {
+        const { container } = render(AnimatedLogoCloud, {
+            props: { logos: mockLogos },
+        });
+        const titleDiv = container.querySelector(".text-center");
+        expect(titleDiv).not.toBeInTheDocument();
+    });
+    it("applies custom class names", () => {
+        const { container } = render(AnimatedLogoCloud, {
+            props: { logos: mockLogos, class: "custom-cloud" },
+        });
+        const mask = container.querySelector(".logo-cloud-mask");
+        expect(mask?.className).toContain("custom-cloud");
+    });
+});

package/dist/fancy-ui/logo-cloud/IconLogoCloud.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	export interface IconLogoCloudProps {
+		/** Additional CSS classes for the grid container */
+		class?: string;
+		/** Optional title displayed above the logos */
+		title?: string;
+		/** Array of logos with name and image path */
+		logos?: import("./AnimatedLogoCloud.svelte").Logo[];
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let { class: className, title, logos = [] }: IconLogoCloudProps = $props();
+</script>
+
+<div class="w-full py-12">
+	<div class="flex w-full flex-col items-center justify-center gap-6 px-4 md:px-8">
+		{#if title}
+			<div class="text-muted-foreground font-medium">
+				{title}
+			</div>
+		{/if}
+		<div class={cn("grid grid-cols-3 md:grid-cols-8 lg:grid-cols-8", className)}>
+			{#each logos as logo}
+				<img src={logo.path} alt={logo.name} class="h-7 w-12 px-2 brightness-0 dark:invert" />
+			{/each}
+		</div>
+	</div>
+</div>

package/dist/fancy-ui/logo-cloud/IconLogoCloud.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface IconLogoCloudProps {
+    /** Additional CSS classes for the grid container */
+    class?: string;
+    /** Optional title displayed above the logos */
+    title?: string;
+    /** Array of logos with name and image path */
+    logos?: import("./AnimatedLogoCloud.svelte").Logo[];
+}
+declare const IconLogoCloud: import("svelte").Component<IconLogoCloudProps, {}, "">;
+type IconLogoCloud = ReturnType<typeof IconLogoCloud>;
+export default IconLogoCloud;

package/dist/fancy-ui/logo-cloud/README.md

@@ -0,0 +1,41 @@
+# LogoCloud
+
+Logo display components in three variants: animated marquee, static grid, and compact icon grid.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { AnimatedLogoCloud, StaticLogoCloud, IconLogoCloud } from '$lib/fancy-ui/logo-cloud';
+
+  const logos = [
+    { name: 'Vercel', path: '/logos/vercel.svg' },
+    { name: 'Next.js', path: '/logos/nextjs.svg' },
+  ];
+</script>
+
+<AnimatedLogoCloud title="Trusted by" {logos} />
+<StaticLogoCloud title="Our Partners" {logos} />
+<IconLogoCloud title="Built with" {logos} />
+```
+
+## Variants
+
+| Component | Description |
+|-----------|-------------|
+| `AnimatedLogoCloud` | Infinite horizontal scroll with fade mask |
+| `StaticLogoCloud` | Responsive grid layout |
+| `IconLogoCloud` | Compact icon-sized grid |
+
+## Props (shared)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `class` | `string` | - | Classes on the container |
+| `title` | `string` | - | Optional heading text |
+| `logos` | `Logo[]` | `[]` | Array of `{ name, path }` objects |
+
+## Implementation Notes
+
+- Images use `brightness-0 dark:invert` for monochrome display that adapts to theme
+- Animated variant duplicates logos 5x for seamless infinite scroll

package/dist/fancy-ui/logo-cloud/StaticLogoCloud.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	export interface StaticLogoCloudProps {
+		/** Additional CSS classes for the grid container */
+		class?: string;
+		/** Optional title displayed above the logos */
+		title?: string;
+		/** Array of logos with name and image path */
+		logos?: import("./AnimatedLogoCloud.svelte").Logo[];
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let { class: className, title, logos = [] }: StaticLogoCloudProps = $props();
+</script>
+
+<div class="w-full py-12">
+	<div class="flex w-full flex-col items-center justify-center gap-4 px-4 md:px-8">
+		{#if title}
+			<div class="text-muted-foreground font-medium uppercase">
+				{title}
+			</div>
+		{/if}
+		<div class={cn("grid grid-cols-3 gap-x-4 md:grid-cols-5 lg:grid-cols-8", className)}>
+			{#each logos as logo}
+				<img src={logo.path} alt={logo.name} class="h-10 w-28 px-2 brightness-0 dark:invert" />
+			{/each}
+		</div>
+	</div>
+</div>

package/dist/fancy-ui/logo-cloud/StaticLogoCloud.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface StaticLogoCloudProps {
+    /** Additional CSS classes for the grid container */
+    class?: string;
+    /** Optional title displayed above the logos */
+    title?: string;
+    /** Array of logos with name and image path */
+    logos?: import("./AnimatedLogoCloud.svelte").Logo[];
+}
+declare const StaticLogoCloud: import("svelte").Component<StaticLogoCloudProps, {}, "">;
+type StaticLogoCloud = ReturnType<typeof StaticLogoCloud>;
+export default StaticLogoCloud;

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

@@ -0,0 +1,4 @@
+import AnimatedLogoCloud, { type AnimatedLogoCloudProps, type Logo } from "./AnimatedLogoCloud.svelte";
+import StaticLogoCloud, { type StaticLogoCloudProps } from "./StaticLogoCloud.svelte";
+import IconLogoCloud, { type IconLogoCloudProps } from "./IconLogoCloud.svelte";
+export { AnimatedLogoCloud, StaticLogoCloud, IconLogoCloud, type AnimatedLogoCloudProps, type StaticLogoCloudProps, type IconLogoCloudProps, type Logo, };

package/dist/fancy-ui/logo-cloud/index.js

@@ -0,0 +1,4 @@
+import AnimatedLogoCloud, {} from "./AnimatedLogoCloud.svelte";
+import StaticLogoCloud, {} from "./StaticLogoCloud.svelte";
+import IconLogoCloud, {} from "./IconLogoCloud.svelte";
+export { AnimatedLogoCloud, StaticLogoCloud, IconLogoCloud, };

package/dist/fancy-ui/marquee/Marquee.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	interface Props {
+		class?: string;
+		reverse?: boolean;
+		pauseOnHover?: boolean;
+		vertical?: boolean;
+		repeat?: number;
+		children?: import("svelte").Snippet;
+	}
+
+	let {
+		class: className,
+		reverse = false,
+		pauseOnHover = false,
+		vertical = false,
+		repeat = 4,
+		children,
+	}: Props = $props();
+</script>
+
+<div
+	class={cn(
+		"group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
+		vertical ? "flex-col" : "flex-row",
+		className
+	)}
+>
+	{#each Array(repeat) as _, index (index)}
+		<div
+			class={cn(
+				"flex shrink-0 justify-around [gap:var(--gap)]",
+				vertical ? "animate-marquee-vertical flex-col" : "animate-marquee flex-row",
+				pauseOnHover ? "group-hover:[animation-play-state:paused]" : ""
+			)}
+			style="animation-direction: {reverse ? 'reverse' : 'normal'};"
+		>
+			{@render children?.()}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.animate-marquee {
+		animation: marquee var(--duration) linear infinite;
+	}
+
+	.animate-marquee-vertical {
+		animation: marquee-vertical var(--duration) linear infinite;
+	}
+
+	@keyframes marquee {
+		from {
+			transform: translateX(0);
+		}
+		to {
+			transform: translateX(calc(-100% - var(--gap)));
+		}
+	}
+
+	@keyframes marquee-vertical {
+		from {
+			transform: translateY(0);
+		}
+		to {
+			transform: translateY(calc(-100% - var(--gap)));
+		}
+	}
+</style>