fancy-ui-svelte 0.6.0 → 0.8.0

package/dist/fancy-ui/frosted-glass/FrostedGlass.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;
+		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, so it needs a plain-blur
+	   fallback. -webkit-named-image is a WebKit-only feature query (Chromium and Firefox
+	   return false). Ship the -webkit- prefixed backdrop-filter too for Safari and iOS 17 and older. */
+	@supports (background: -webkit-named-image(i)) {
+		.frosted-glass-filter {
+			filter: none !important;
+			-webkit-backdrop-filter: blur(var(--fg-fallback-blur)) saturate(var(--fg-fallback-saturation));
+			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,61 @@
+# 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.
+
+## 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.
+
+## Browser support
+
+Safari (WebKit) cannot combine an SVG `filter: url(#…)` with `backdrop-filter`, so the turbulence displacement silently disappears there. To keep the component usable, FrostedGlass automatically detects Safari (via a WebKit-only `@supports` feature query) and falls back to a plain frosted `blur()` + `saturate()` (both `-webkit-` prefixed and unprefixed), tunable via the `fallbackBlur` and `fallbackSaturation` props. Chromium and Firefox get the full turbulence refraction.

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

@@ -42,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";
@@ -57,4 +58,5 @@ 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 * from "./liquid-text/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

@@ -47,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";
@@ -62,6 +63,7 @@ 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 * from "./liquid-text/index.js";
 // =============================================================================
 // Registry
 // =============================================================================

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

@@ -18,6 +18,10 @@
 		bOffset?: number;
 		scale?: number;
 		frost?: number;
+		/** Backdrop blur in pixels for the Safari fallback */
+		fallbackBlur?: number;
+		/** Backdrop saturation percentage for the Safari fallback */
+		fallbackSaturation?: number;
 		class?: string;
 		containerClass?: string;
 		children?: Snippet;
@@ -38,6 +42,8 @@
 		bOffset = 20,
 		scale = -180,
 		frost = 0.05,
+		fallbackBlur = 20,
+		fallbackSaturation = 180,
 		class: className = "",
 		containerClass = "",
 		children,
@@ -57,8 +63,8 @@
 
 	let backdropStyle = $derived(
 		filterId
-			? `--frost:${frost};border-radius:${radius}px;backdrop-filter:url(#displacementFilter-${filterId});`
-			: `--frost:${frost};border-radius:${radius}px;`
+			? `--frost:${frost};border-radius:${radius}px;backdrop-filter:url(#displacementFilter-${filterId});--lg-fallback-blur:${fallbackBlur}px;--lg-fallback-saturation:${fallbackSaturation}%;`
+			: `--frost:${frost};border-radius:${radius}px;--lg-fallback-blur:${fallbackBlur}px;--lg-fallback-saturation:${fallbackSaturation}%;`
 	);
 
 	onMount(() => {
@@ -187,6 +193,17 @@
 			0px 16px 56px rgba(17, 17, 26, 0.05) inset;
 	}
 
+	/* Safari cannot resolve SVG url() references inside backdrop-filter, so it needs a
+	   plain-blur fallback. -webkit-named-image is a WebKit-only feature query (Chromium
+	   and Firefox return false), so this never overrides Chromium's working SVG filter.
+	   Ship the -webkit- prefixed backdrop-filter too for Safari and iOS 17 and older. */
+	@supports (background: -webkit-named-image(i)) {
+		.liquid-glass-effect {
+			-webkit-backdrop-filter: blur(var(--lg-fallback-blur)) saturate(var(--lg-fallback-saturation)) !important;
+			backdrop-filter: blur(var(--lg-fallback-blur)) saturate(var(--lg-fallback-saturation)) !important;
+		}
+	}
+
 	.liquid-glass-slot {
 		width: 100%;
 		height: 100%;

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

@@ -14,6 +14,10 @@ interface Props {
     bOffset?: number;
     scale?: number;
     frost?: number;
+    /** Backdrop blur in pixels for the Safari fallback */
+    fallbackBlur?: number;
+    /** Backdrop saturation percentage for the Safari fallback */
+    fallbackSaturation?: number;
     class?: string;
     containerClass?: string;
     children?: Snippet;

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

@@ -45,4 +45,18 @@ describe("LiquidGlass", () => {
         expect(wrapper.getAttribute("style")).toContain("border-radius");
         expect(wrapper.getAttribute("style")).toContain("24px");
     });
+    it("exposes Safari fallback CSS variables from props", () => {
+        const { container: defaultContainer } = render(LiquidGlass);
+        const defaultWrapper = defaultContainer.querySelector(".liquid-glass-effect");
+        const defaultStyle = defaultWrapper.getAttribute("style") ?? "";
+        expect(defaultStyle).toMatch(/--lg-fallback-blur:\s*20px/);
+        expect(defaultStyle).toMatch(/--lg-fallback-saturation:\s*180%/);
+        const { container: customContainer } = render(LiquidGlass, {
+            props: { fallbackBlur: 8, fallbackSaturation: 120 },
+        });
+        const customWrapper = customContainer.querySelector(".liquid-glass-effect");
+        const customStyle = customWrapper.getAttribute("style") ?? "";
+        expect(customStyle).toMatch(/--lg-fallback-blur:\s*8px/);
+        expect(customStyle).toMatch(/--lg-fallback-saturation:\s*120%/);
+    });
 });

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

@@ -20,6 +20,8 @@ A glass-like visual effect using SVG filters for chromatic displacement, creatin
 | `bOffset`        | `number`      | `20`           | Blue channel offset                  |
 | `scale`          | `number`      | `-180`         | Displacement scale                   |
 | `frost`          | `number`      | `0.05`         | Frosted overlay opacity              |
+| `fallbackBlur`   | `number`      | `20`           | Backdrop blur in pixels for the Safari fallback |
+| `fallbackSaturation` | `number`  | `180`          | Backdrop saturation percentage for the Safari fallback |
 | `class`          | `string`      | `""`           | CSS classes for inner container      |
 | `containerClass` | `string`      | `""`           | CSS classes for outer container      |
 
@@ -31,4 +33,8 @@ A glass-like visual effect using SVG filters for chromatic displacement, creatin
 </LiquidGlass>
 ```
 
-**Note**: This component uses `position: fixed` and `backdrop-filter` with SVG filters. Place it over content to see the refraction effect.
+**Note**: This component uses `position: relative` and `backdrop-filter` with SVG filters. Place it over content to see the refraction effect.
+
+## Browser support
+
+Safari (WebKit) cannot resolve an SVG `url(#…)` filter reference inside `backdrop-filter`, so the chromatic displacement silently disappears there. To keep the component usable, LiquidGlass automatically detects Safari (via a WebKit-only `@supports` feature query) and falls back to a plain frosted `blur()` + `saturate()` (both `-webkit-` prefixed and unprefixed), tunable via the `fallbackBlur` and `fallbackSaturation` props. Chromium and Firefox get the full chromatic refraction.