fancy-ui-svelte 0.5.0 → 0.7.0

package/dist/fancy-ui/frosted-glass/FrostedGlass.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import { onMount } from "svelte";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		radius?: number;
+		baseFrequency?: number;
+		numOctaves?: number;
+		seed?: number;
+		noiseBlur?: number;
+		scale?: number;
+		tint?: string;
+		highlight?: string;
+		border?: boolean;
+		fallbackBlur?: number;
+		fallbackSaturation?: number;
+		class?: string;
+		containerClass?: string;
+		children?: Snippet;
+	}
+
+	let {
+		radius = 24,
+		baseFrequency = 0.008,
+		numOctaves = 2,
+		seed = 92,
+		noiseBlur = 2,
+		scale = 70,
+		tint = "hsla(0, 0%, 100%, 0.25)",
+		highlight = "hsla(0, 0%, 100%, 0.75)",
+		border = true,
+		fallbackBlur = 20,
+		fallbackSaturation = 180,
+		class: className = "",
+		containerClass = "",
+		children,
+	}: Props = $props();
+
+	let filterId = $state("");
+
+	let containerStyle = $derived(
+		`border-radius:${radius}px;--fg-tint:${tint};--fg-highlight:${highlight};` +
+			`--fg-fallback-blur:${fallbackBlur}px;--fg-fallback-saturation:${fallbackSaturation}%;`
+	);
+
+	onMount(() => {
+		filterId = `fg-dist-${Math.random().toString(36).slice(2, 8)}`;
+	});
+</script>
+
+<div
+	class={cn("frosted-glass", border && "frosted-glass-border", containerClass)}
+	style={containerStyle}
+>
+	{#if filterId}
+		<div class="frosted-glass-filter" style="filter:url(#{filterId});"></div>
+
+		<svg class="frosted-glass-defs" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+			<defs>
+				<filter
+					id={filterId}
+					x="-50%"
+					y="-50%"
+					width="200%"
+					height="200%"
+					filterUnits="objectBoundingBox"
+					primitiveUnits="userSpaceOnUse"
+					color-interpolation-filters="linearRGB"
+				>
+					<feTurbulence
+						type="fractalNoise"
+						baseFrequency="{baseFrequency} {baseFrequency}"
+						{numOctaves}
+						{seed}
+						stitchTiles="stitch"
+						result="noise"
+					/>
+					<feGaussianBlur in="noise" stdDeviation={noiseBlur} result="blurred" />
+					<feDisplacementMap
+						in="SourceGraphic"
+						in2="blurred"
+						{scale}
+						xChannelSelector="R"
+						yChannelSelector="G"
+					/>
+				</filter>
+			</defs>
+		</svg>
+	{/if}
+
+	<div class="frosted-glass-overlay"></div>
+	<div class="frosted-glass-specular"></div>
+
+	<div class={cn("frosted-glass-content", className)}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.frosted-glass {
+		position: relative;
+		display: flex;
+		background: transparent;
+		overflow: hidden;
+		contain: layout paint;
+		box-shadow:
+			0 2px 4px rgba(0, 0, 0, 0.1),
+			0 0 8px rgba(0, 0, 0, 0.05);
+	}
+
+	.frosted-glass-border::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		z-index: 4;
+		border-radius: inherit;
+		padding: 1px;
+		background:
+			conic-gradient(
+				from -75deg at 50% 50%,
+				rgba(20, 60, 120, 0.5),
+				rgba(150, 200, 255, 0.1) 5% 40%,
+				rgba(20, 60, 120, 0.5) 50%,
+				rgba(150, 200, 255, 0.1) 60% 95%,
+				rgba(20, 60, 120, 0.5)
+			),
+			linear-gradient(180deg, rgba(220, 240, 255, 0.5), rgba(240, 250, 255, 0.5));
+		box-shadow: inset 0 0 0 0.5px rgba(220, 240, 255, 0.5);
+		pointer-events: none;
+		mask:
+			linear-gradient(#fff 0 0) content-box,
+			linear-gradient(#fff 0 0);
+		mask-composite: exclude;
+	}
+
+	/* backdrop-filter: blur(0) pulls the backdrop into this layer so the SVG
+	   displacement filter can distort it */
+	.frosted-glass-filter {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		backdrop-filter: blur(0);
+		isolation: isolate;
+		transform: translateZ(0);
+		will-change: filter;
+		animation: frosted-glass-settle 0.22s ease-out;
+	}
+
+	@keyframes frosted-glass-settle {
+		0% {
+			opacity: 0;
+		}
+	}
+
+	/* Safari can't combine filter:url() with backdrop-filter — fall back to
+	   plain frosted blur */
+	@supports (-webkit-hyphens: none) {
+		.frosted-glass-filter {
+			filter: none !important;
+			backdrop-filter: blur(var(--fg-fallback-blur)) saturate(var(--fg-fallback-saturation));
+		}
+
+		.frosted-glass-overlay {
+			background: hsla(0, 0%, 100%, 0.5);
+		}
+	}
+
+	.frosted-glass-defs {
+		position: absolute;
+		width: 0;
+		height: 0;
+	}
+
+	.frosted-glass-overlay {
+		position: absolute;
+		inset: 0;
+		z-index: 1;
+		background: var(--fg-tint);
+	}
+
+	.frosted-glass-specular {
+		position: absolute;
+		inset: 0;
+		z-index: 2;
+		border-radius: inherit;
+		overflow: hidden;
+		box-shadow:
+			inset 1px 1px 0 var(--fg-highlight),
+			inset 0 0 5px var(--fg-highlight);
+	}
+
+	.frosted-glass-content {
+		position: relative;
+		z-index: 3;
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+</style>

package/dist/fancy-ui/frosted-glass/FrostedGlass.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+interface Props {
+    radius?: number;
+    baseFrequency?: number;
+    numOctaves?: number;
+    seed?: number;
+    noiseBlur?: number;
+    scale?: number;
+    tint?: string;
+    highlight?: string;
+    border?: boolean;
+    fallbackBlur?: number;
+    fallbackSaturation?: number;
+    class?: string;
+    containerClass?: string;
+    children?: Snippet;
+}
+declare const FrostedGlass: import("svelte").Component<Props, {}, "">;
+type FrostedGlass = ReturnType<typeof FrostedGlass>;
+export default FrostedGlass;

package/dist/fancy-ui/frosted-glass/FrostedGlass.test.d.ts

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

package/dist/fancy-ui/frosted-glass/FrostedGlass.test.js

@@ -0,0 +1,48 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import FrostedGlass from "./FrostedGlass.svelte";
+describe("FrostedGlass", () => {
+    afterEach(cleanup);
+    it("renders the component", () => {
+        const { container } = render(FrostedGlass);
+        const wrapper = container.querySelector(".frosted-glass");
+        expect(wrapper).toBeInTheDocument();
+    });
+    it("renders the layer stack", () => {
+        const { container } = render(FrostedGlass);
+        expect(container.querySelector(".frosted-glass-overlay")).toBeInTheDocument();
+        expect(container.querySelector(".frosted-glass-specular")).toBeInTheDocument();
+        expect(container.querySelector(".frosted-glass-content")).toBeInTheDocument();
+    });
+    it("applies custom container class", () => {
+        const { container } = render(FrostedGlass, {
+            props: { containerClass: "my-container" },
+        });
+        const wrapper = container.querySelector(".frosted-glass");
+        expect(wrapper?.className).toContain("my-container");
+    });
+    it("applies custom class to content", () => {
+        const { container } = render(FrostedGlass, { props: { class: "my-content" } });
+        const content = container.querySelector(".frosted-glass-content");
+        expect(content?.className).toContain("my-content");
+    });
+    it("sets border radius", () => {
+        const { container } = render(FrostedGlass, { props: { radius: 9999 } });
+        const wrapper = container.querySelector(".frosted-glass");
+        expect(wrapper.style.borderRadius).toBe("9999px");
+    });
+    it("sets tint CSS variable", () => {
+        const { container } = render(FrostedGlass, {
+            props: { tint: "hsla(0, 0%, 0%, 0.3)" },
+        });
+        const wrapper = container.querySelector(".frosted-glass");
+        expect(wrapper.style.getPropertyValue("--fg-tint")).toBe("hsla(0, 0%, 0%, 0.3)");
+    });
+    it("renders border layer by default and hides it when border=false", () => {
+        const withBorder = render(FrostedGlass);
+        expect(withBorder.container.querySelector(".frosted-glass-border")).toBeInTheDocument();
+        cleanup();
+        const withoutBorder = render(FrostedGlass, { props: { border: false } });
+        expect(withoutBorder.container.querySelector(".frosted-glass-border")).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,59 @@
+# FrostedGlass
+
+Frosted glass surface with an organic, wavy refraction of the content behind it. An alternative to [LiquidGlass](../liquid-glass/README.md): where LiquidGlass produces chromatic (rainbow-edge) refraction from gradient displacement maps, FrostedGlass distorts the backdrop with fractal turbulence noise for a softer, rippled-glass look — the effect used by glassy pill navbars.
+
+## How it works
+
+The effect stacks four layers inside a rounded container:
+
+1. **Filter layer** — `backdrop-filter: blur(0)` pulls the backdrop into the element's own rendering, then a CSS `filter: url(#...)` pointing at an inline SVG filter distorts it: `feTurbulence` (fractal noise) → `feGaussianBlur` → `feDisplacementMap`.
+2. **Overlay** — translucent tint (`tint` prop).
+3. **Specular** — inset highlights simulating a lit glass rim (`highlight` prop).
+4. **Content** — your slotted content.
+
+An optional conic-gradient border (`border` prop) frames the container.
+
+Safari cannot combine `filter: url()` with `backdrop-filter`, so it falls back to a plain `blur() saturate()` frosted look (tunable via `fallbackBlur` / `fallbackSaturation`).
+
+## Usage
+
+```svelte
+<script>
+	import { FrostedGlass } from "fancy-ui-svelte";
+</script>
+
+<FrostedGlass radius={9999}>
+	<nav class="flex w-full items-center justify-between px-7 py-4">
+		<span class="font-semibold">Brand</span>
+		<a href="/download">Download</a>
+	</nav>
+</FrostedGlass>
+```
+
+## Props
+
+| Prop                 | Type      | Default                     | Description                                       |
+| -------------------- | --------- | --------------------------- | ------------------------------------------------- |
+| `radius`             | `number`  | `24`                        | Border radius in pixels                           |
+| `baseFrequency`      | `number`  | `0.008`                     | Turbulence noise frequency (lower = wider waves)  |
+| `numOctaves`         | `number`  | `2`                         | Turbulence octaves (detail of the noise)          |
+| `seed`               | `number`  | `92`                        | Turbulence random seed                            |
+| `noiseBlur`          | `number`  | `2`                         | Gaussian blur softening the noise before displace |
+| `scale`              | `number`  | `70`                        | Displacement intensity                            |
+| `tint`               | `string`  | `"hsla(0, 0%, 100%, 0.25)"` | Overlay tint color                                |
+| `highlight`          | `string`  | `"hsla(0, 0%, 100%, 0.75)"` | Specular rim highlight color                      |
+| `border`             | `boolean` | `true`                      | Show the conic-gradient glass border              |
+| `fallbackBlur`       | `number`  | `20`                        | Backdrop blur (px) for the Safari fallback        |
+| `fallbackSaturation` | `number`  | `180`                       | Backdrop saturation (%) for the Safari fallback   |
+| `class`              | `string`  | `""`                        | CSS classes for the content layer                 |
+| `containerClass`     | `string`  | `""`                        | CSS classes for the outer container               |
+
+## Slots
+
+| Slot       | Description                          |
+| ---------- | ------------------------------------ |
+| `children` | Content rendered on top of the glass |
+
+## Notes
+
+- The displacement only shows over content that scrolls or moves behind the glass; over a flat background the effect reads as a subtle frost.

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

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

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

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

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

@@ -11,6 +11,7 @@ export * from "./border-beam/index.js";
 export * from "./glow-border/index.js";
 export * from "./marquee/index.js";
 export * from "./compare/index.js";
+export * from "./dock/index.js";
 export * from "./image-trail-cursor/index.js";
 export * from "./interactive-grid-pattern/index.js";
 export * from "./interactive-hover-button/index.js";
@@ -41,6 +42,7 @@ export * from "./text-reveal-card/index.js";
 export * from "./container-scroll/index.js";
 export * from "./container-text-flip/index.js";
 export * from "./focus/index.js";
+export * from "./frosted-glass/index.js";
 export * from "./liquid-glass/index.js";
 export * from "./smooth-cursor/index.js";
 export * from "./sparkles/index.js";
@@ -53,4 +55,7 @@ export * from "./tracing-beam/index.js";
 export * from "./displacement-text/index.js";
 export * from "./matrix-rain/index.js";
 export * from "./terminal-text/index.js";
+export * from "./noise-reveal/index.js";
+export * from "./line-reveal/index.js";
+export * from "./editorial-engine/index.js";
 export { registry, categories, categoryLabels, categoryDescriptions, getAllComponents, getComponent, getComponentsByStatus, getComponentsByCategory, getComponentsGroupedByCategory, getComponentsGroupedByStatus, searchComponents, getStats, hasComponent, getComponentCategory, } from "./registry.js";

package/dist/fancy-ui/index.js

@@ -16,6 +16,7 @@ export * from "./border-beam/index.js";
 export * from "./glow-border/index.js";
 export * from "./marquee/index.js";
 export * from "./compare/index.js";
+export * from "./dock/index.js";
 export * from "./image-trail-cursor/index.js";
 export * from "./interactive-grid-pattern/index.js";
 export * from "./interactive-hover-button/index.js";
@@ -46,6 +47,7 @@ export * from "./text-reveal-card/index.js";
 export * from "./container-scroll/index.js";
 export * from "./container-text-flip/index.js";
 export * from "./focus/index.js";
+export * from "./frosted-glass/index.js";
 export * from "./liquid-glass/index.js";
 export * from "./smooth-cursor/index.js";
 export * from "./sparkles/index.js";
@@ -58,6 +60,9 @@ export * from "./tracing-beam/index.js";
 export * from "./displacement-text/index.js";
 export * from "./matrix-rain/index.js";
 export * from "./terminal-text/index.js";
+export * from "./noise-reveal/index.js";
+export * from "./line-reveal/index.js";
+export * from "./editorial-engine/index.js";
 // =============================================================================
 // Registry
 // =============================================================================

package/dist/fancy-ui/line-reveal/LineReveal.svelte

@@ -0,0 +1,168 @@
+<script lang="ts" module>
+	/**
+	 * Props for LineReveal
+	 *
+	 * Reveals text line by line with a staggered slide-up animation.
+	 * Line breaks are computed with @chenglou/pretext (canvas text
+	 * measurement), so no DOM splitting or reflow measurement is needed.
+	 */
+	export interface LineRevealProps {
+		/** Text to reveal */
+		text: string;
+		/**
+		 * CSS font shorthand used for both measurement and rendering
+		 * (canvas `ctx.font` format, e.g. "600 32px Inter, sans-serif").
+		 * Prefer named families: `system-ui` can resolve differently between
+		 * canvas measurement and DOM rendering.
+		 */
+		font?: string;
+		/** Line height in pixels (defaults to 1.2 × font size) */
+		lineHeight?: number;
+		/** Delay between lines in seconds */
+		stagger?: number;
+		/** Animation duration per line in seconds */
+		duration?: number;
+		/** Initial delay before the first line in seconds */
+		delay?: number;
+		/** Animate only the first time the component enters the viewport */
+		once?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+	import {
+		prepareWithSegments,
+		layoutWithLines,
+		type PreparedTextWithSegments,
+	} from "@chenglou/pretext";
+
+	let {
+		text,
+		// Named families only: canvas and CSS can resolve `system-ui` to
+		// different fonts (notably on macOS), which skews measured widths.
+		font = '600 32px "Helvetica Neue", Helvetica, Arial, sans-serif',
+		lineHeight,
+		stagger = 0.08,
+		duration = 0.7,
+		delay = 0,
+		once = true,
+		class: className,
+	}: LineRevealProps = $props();
+
+	const fontSize = $derived(Number(/(\d+(?:\.\d+)?)px/.exec(font)?.[1] ?? 32));
+	const resolvedLineHeight = $derived(lineHeight ?? Math.round(fontSize * 1.2));
+
+	let containerRef: HTMLDivElement;
+	let containerWidth = $state(0);
+	let revealed = $state(false);
+	let prepared = $state<PreparedTextWithSegments | null>(null);
+
+	// Measurement requires a canvas context, so this only runs in the browser
+	// ($effect never runs during SSR). Web fonts must be loaded first or the
+	// canvas silently measures with the fallback font.
+	$effect(() => {
+		const currentText = text;
+		const currentFont = font;
+		let cancelled = false;
+
+		document.fonts
+			.load(currentFont)
+			.catch(() => {})
+			.then(() => {
+				if (!cancelled) {
+					prepared = prepareWithSegments(currentText, currentFont);
+				}
+			});
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	// Pure arithmetic on cached measurements — cheap to re-run on every resize
+	// (containerWidth is tracked by Svelte's bind:clientWidth ResizeObserver).
+	const layoutResult = $derived(
+		prepared && containerWidth > 0
+			? layoutWithLines(prepared, containerWidth, resolvedLineHeight)
+			: null
+	);
+
+	onMount(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						revealed = true;
+						if (once) observer.disconnect();
+					} else if (!once) {
+						revealed = false;
+					}
+				}
+			},
+			{ threshold: 0.1 }
+		);
+
+		observer.observe(containerRef);
+
+		return () => observer.disconnect();
+	});
+</script>
+
+<div
+	bind:this={containerRef}
+	bind:clientWidth={containerWidth}
+	class={cn("relative w-full", className)}
+	style:font
+	style:line-height="{resolvedLineHeight}px"
+	style:height={layoutResult ? `${layoutResult.height}px` : undefined}
+>
+	<span class="sr-only">{text}</span>
+	{#if layoutResult}
+		{#each layoutResult.lines as line, i (i)}
+			<div class="line-mask" style:height="{resolvedLineHeight}px" aria-hidden="true">
+				<div
+					class="line"
+					class:revealed
+					style:transition-duration="{duration}s"
+					style:transition-delay="{delay + i * stagger}s"
+				>
+					{line.text}
+				</div>
+			</div>
+		{/each}
+	{:else}
+		<!-- SSR / pre-measure fallback: keeps text in the HTML and reserves space -->
+		<div style:visibility="hidden" aria-hidden="true">{text}</div>
+	{/if}
+</div>
+
+<style>
+	.line-mask {
+		overflow: hidden;
+		/* preserve exact spacing so rendered width matches pretext measurement */
+		white-space: pre;
+	}
+
+	.line {
+		opacity: 0;
+		transform: translateY(105%);
+		transition-property: transform, opacity;
+		transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.line.revealed {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.line {
+			transition-duration: 0.1s !important;
+			transition-delay: 0s !important;
+		}
+	}
+</style>

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

@@ -0,0 +1,33 @@
+/**
+ * Props for LineReveal
+ *
+ * Reveals text line by line with a staggered slide-up animation.
+ * Line breaks are computed with @chenglou/pretext (canvas text
+ * measurement), so no DOM splitting or reflow measurement is needed.
+ */
+export interface LineRevealProps {
+    /** Text to reveal */
+    text: string;
+    /**
+     * CSS font shorthand used for both measurement and rendering
+     * (canvas `ctx.font` format, e.g. "600 32px Inter, sans-serif").
+     * Prefer named families: `system-ui` can resolve differently between
+     * canvas measurement and DOM rendering.
+     */
+    font?: string;
+    /** Line height in pixels (defaults to 1.2 × font size) */
+    lineHeight?: number;
+    /** Delay between lines in seconds */
+    stagger?: number;
+    /** Animation duration per line in seconds */
+    duration?: number;
+    /** Initial delay before the first line in seconds */
+    delay?: number;
+    /** Animate only the first time the component enters the viewport */
+    once?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const LineReveal: import("svelte").Component<LineRevealProps, {}, "">;
+type LineReveal = ReturnType<typeof LineReveal>;
+export default LineReveal;

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

@@ -0,0 +1,42 @@
+# LineReveal
+
+Reveals text line by line with a staggered slide-up animation.
+
+Unlike DOM-splitting approaches, line breaks are computed with
+[@chenglou/pretext](https://github.com/chenglou/pretext) — canvas-accurate text
+measurement in pure JS. Each computed line is rendered as its own masked
+element, so the per-line stagger works without measuring or mutating the DOM,
+and lines re-wrap instantly on container resize.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { LineReveal } from "$lib/fancy-ui/line-reveal";
+</script>
+
+<LineReveal
+	text="Text measurement and layout without touching the DOM."
+	font="700 40px Helvetica, Arial, sans-serif"
+/>
+```
+
+## Props
+
+| Prop         | Type      | Default                          | Description                                                  |
+| ------------ | --------- | -------------------------------- | ------------------------------------------------------------ |
+| `text`       | `string`  | — (required)                     | Text to reveal                                               |
+| `font`       | `string`  | `"600 32px \"Helvetica Neue\", Helvetica, Arial, sans-serif"` | CSS font shorthand, used for both measurement and rendering |
+| `lineHeight` | `number`  | `1.2 × font size`                | Line height in pixels                                        |
+| `stagger`    | `number`  | `0.08`                           | Delay between lines in seconds                               |
+| `duration`   | `number`  | `0.7`                            | Animation duration per line in seconds                       |
+| `delay`      | `number`  | `0`                              | Initial delay in seconds                                     |
+| `once`       | `boolean` | `true`                           | Animate only on first viewport entry                         |
+| `class`      | `string`  | —                                | Additional CSS classes                                       |
+
+## Notes
+
+- `font` must be a valid canvas `ctx.font` shorthand (weight, size in px, family).
+- Measurement happens client-side only (pretext needs a canvas); during SSR the
+  raw text is rendered hidden so content stays in the HTML.
+- Resizing the container re-wraps lines without replaying the animation.

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

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

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

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