fancy-ui-svelte 0.5.0 → 0.6.0

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

package/dist/fancy-ui/noise-reveal/NoiseReveal.svelte

@@ -0,0 +1,323 @@
+<script lang="ts" module>
+	export interface NoiseRevealProps {
+		/** Image URL */
+		src: string;
+		/** Accessible label for the image */
+		alt?: string;
+		/** Reveal trigger: "view" = on viewport entry, "manual" = via `revealed` */
+		trigger?: "view" | "manual";
+		/** Manual reveal state (used with trigger="manual"; also allows re-hiding) */
+		revealed?: boolean;
+		/** Reveal animation duration in seconds */
+		duration?: number;
+		/** Delay before reveal in seconds (trigger="view") */
+		delay?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import * as THREE from "three";
+	import { untrack } from "svelte";
+	import { cn } from "../../utils.js";
+	import { easeInOutCubic, getProgress, lerp } from "../../utils/animation.js";
+
+	let {
+		src,
+		alt,
+		trigger = "view",
+		revealed = false,
+		duration = 1.5,
+		delay = 0,
+		class: className = "",
+	}: NoiseRevealProps = $props();
+
+	let container: HTMLDivElement;
+	let setTarget: ((value: number) => void) | null = $state.raw(null);
+
+	const vertexShader = `
+		uniform float uProgress;
+		varying vec2 vUv;
+
+		void main() {
+			vec3 newPosition = position;
+
+			float distanceToCenter = distance(vec2(0.5), uv);
+			float wave = (1.0 - uProgress) * sin(distanceToCenter * 20.0 - uProgress * 5.0);
+			newPosition.z += wave;
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+			vUv = uv;
+		}
+	`;
+
+	// cnoise: classic 3D Perlin noise by Stefan Gustavson (MIT, github.com/stegu/webgl-noise)
+	const fragmentShader = `
+		uniform sampler2D uTexture;
+		uniform float uTime;
+		uniform float uProgress;
+		uniform vec2 uRes;
+		uniform vec2 uImageRes;
+		varying vec2 vUv;
+
+		vec4 permute(vec4 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
+		vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+		vec3 fade(vec3 t) { return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); }
+
+		float cnoise(vec3 P) {
+			vec3 Pi0 = floor(P);
+			vec3 Pi1 = Pi0 + vec3(1.0);
+			Pi0 = mod(Pi0, 289.0);
+			Pi1 = mod(Pi1, 289.0);
+			vec3 Pf0 = fract(P);
+			vec3 Pf1 = Pf0 - vec3(1.0);
+			vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+			vec4 iy = vec4(Pi0.yy, Pi1.yy);
+			vec4 iz0 = Pi0.zzzz;
+			vec4 iz1 = Pi1.zzzz;
+
+			vec4 ixy = permute(permute(ix) + iy);
+			vec4 ixy0 = permute(ixy + iz0);
+			vec4 ixy1 = permute(ixy + iz1);
+
+			vec4 gx0 = ixy0 / 7.0;
+			vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
+			gx0 = fract(gx0);
+			vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+			vec4 sz0 = step(gz0, vec4(0.0));
+			gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+			gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+
+			vec4 gx1 = ixy1 / 7.0;
+			vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
+			gx1 = fract(gx1);
+			vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+			vec4 sz1 = step(gz1, vec4(0.0));
+			gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+			gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+
+			vec3 g000 = vec3(gx0.x, gy0.x, gz0.x);
+			vec3 g100 = vec3(gx0.y, gy0.y, gz0.y);
+			vec3 g010 = vec3(gx0.z, gy0.z, gz0.z);
+			vec3 g110 = vec3(gx0.w, gy0.w, gz0.w);
+			vec3 g001 = vec3(gx1.x, gy1.x, gz1.x);
+			vec3 g101 = vec3(gx1.y, gy1.y, gz1.y);
+			vec3 g011 = vec3(gx1.z, gy1.z, gz1.z);
+			vec3 g111 = vec3(gx1.w, gy1.w, gz1.w);
+
+			vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+			g000 *= norm0.x;
+			g010 *= norm0.y;
+			g100 *= norm0.z;
+			g110 *= norm0.w;
+			vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+			g001 *= norm1.x;
+			g011 *= norm1.y;
+			g101 *= norm1.z;
+			g111 *= norm1.w;
+
+			float n000 = dot(g000, Pf0);
+			float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+			float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+			float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+			float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+			float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+			float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+			float n111 = dot(g111, Pf1);
+
+			vec3 fade_xyz = fade(Pf0);
+			vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+			vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+			float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
+			return 2.2 * n_xyz;
+		}
+
+		vec2 CoverUV(vec2 u, vec2 s, vec2 i) {
+			float rs = s.x / s.y;
+			float ri = i.x / i.y;
+			vec2 st = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);
+			vec2 o = (rs < ri ? vec2((st.x - s.x) / 2.0, 0.0) : vec2(0.0, (st.y - s.y) / 2.0)) / st;
+			return u * s / st + o;
+		}
+
+		void main() {
+			vec2 newUv = CoverUV(vUv, uRes, uImageRes);
+
+			vec2 displacedUv = vUv + cnoise(vec3(vUv * 5.0, uTime * 0.1));
+			float strength = cnoise(vec3(displacedUv * 5.0, uTime * 0.2));
+
+			float radialGradient = distance(vUv, vec2(0.5)) * 12.5 - 7.0 * uProgress;
+			strength += radialGradient;
+
+			strength = clamp(strength, 0.0, 1.0);
+			strength = 1.0 - strength;
+
+			vec3 textureColor = texture2D(uTexture, newUv).rgb;
+
+			float opacityProgress = smoothstep(0.0, 0.7, uProgress);
+
+			gl_FragColor = vec4(textureColor, strength * opacityProgress);
+		}
+	`;
+
+	$effect(() => {
+		if (!container) return;
+
+		const _src = src;
+		const _duration = duration;
+
+		const rect = container.getBoundingClientRect();
+		const width = rect.width || 1;
+		const height = rect.height || 1;
+		if (height === 0) return;
+
+		const scene = new THREE.Scene();
+		scene.background = null;
+
+		const cameraDistance = 5;
+		const fov = 50;
+		const camera = new THREE.PerspectiveCamera(fov, width / height, 0.01, 1000);
+		camera.position.set(0, 0, cameraDistance);
+
+		const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+		renderer.setClearColor(0x000000, 0);
+		renderer.setPixelRatio(window.devicePixelRatio);
+		renderer.setSize(width, height, false);
+		renderer.domElement.style.width = "100%";
+		renderer.domElement.style.height = "100%";
+		container.appendChild(renderer.domElement);
+
+		const geometry = new THREE.PlaneGeometry(1, 1, 32, 32);
+
+		const material = new THREE.ShaderMaterial({
+			uniforms: {
+				uTexture: { value: null },
+				uTime: { value: 0 },
+				uProgress: { value: trigger === "manual" && untrack(() => revealed) ? 1 : 0 },
+				uRes: { value: new THREE.Vector2(1, 1) },
+				uImageRes: { value: new THREE.Vector2(1, 1) },
+			},
+			vertexShader,
+			fragmentShader,
+			transparent: true,
+		});
+
+		const plane = new THREE.Mesh(geometry, material);
+		scene.add(plane);
+
+		// Scale the unit plane to exactly fill the camera frustum at z=0
+		const fitPlane = (w: number, h: number) => {
+			const visibleH = 2 * Math.tan((fov * Math.PI) / 360) * cameraDistance;
+			const visibleW = visibleH * (w / h);
+			plane.scale.set(visibleW, visibleH, 1);
+			(material.uniforms.uRes.value as THREE.Vector2).set(visibleW, visibleH);
+		};
+		fitPlane(width, height);
+
+		let texture: THREE.Texture | null = null;
+		new THREE.TextureLoader().load(_src, (loaded) => {
+			loaded.colorSpace = THREE.SRGBColorSpace;
+			texture = loaded;
+			material.uniforms.uTexture.value = loaded;
+			const image = loaded.image as HTMLImageElement;
+			(material.uniforms.uImageRes.value as THREE.Vector2).set(
+				image.naturalWidth || 1,
+				image.naturalHeight || 1
+			);
+		});
+
+		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		let progress = material.uniforms.uProgress.value as number;
+		const tween = { from: progress, to: progress, start: 0, active: false };
+
+		setTarget = (value: number) => {
+			if (value === tween.to) return;
+			tween.to = value;
+			if (reducedMotion) {
+				progress = value;
+				tween.active = false;
+				return;
+			}
+			tween.from = progress;
+			tween.start = performance.now();
+			tween.active = true;
+		};
+
+		const handleResize = () => {
+			const r = container.getBoundingClientRect();
+			if (r.height === 0) return;
+			camera.aspect = r.width / r.height;
+			camera.updateProjectionMatrix();
+			renderer.setSize(r.width, r.height, false);
+			fitPlane(r.width, r.height);
+		};
+
+		window.addEventListener("resize", handleResize);
+
+		const clock = new THREE.Clock();
+		let animationId = 0;
+		const animate = () => {
+			animationId = requestAnimationFrame(animate);
+			if (tween.active) {
+				const t = getProgress(performance.now() - tween.start, _duration * 1000);
+				progress = lerp(tween.from, tween.to, easeInOutCubic(t));
+				if (t >= 1) tween.active = false;
+			}
+			material.uniforms.uProgress.value = progress;
+			material.uniforms.uTime.value = clock.getElapsedTime();
+			renderer.render(scene, camera);
+		};
+		animate();
+
+		return () => {
+			setTarget = null;
+			window.removeEventListener("resize", handleResize);
+			cancelAnimationFrame(animationId);
+			if (renderer.domElement.parentNode === container) container.removeChild(renderer.domElement);
+			renderer.dispose();
+			geometry.dispose();
+			material.dispose();
+			texture?.dispose();
+		};
+	});
+
+	// Viewport trigger: reveal once on first intersection
+	$effect(() => {
+		if (trigger !== "view" || !container || !setTarget) return;
+
+		const set = setTarget;
+		let timeoutId = 0;
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						observer.disconnect();
+						timeoutId = window.setTimeout(() => set(1), delay * 1000);
+					}
+				}
+			},
+			{ threshold: 0.1 }
+		);
+
+		observer.observe(container);
+
+		return () => {
+			observer.disconnect();
+			clearTimeout(timeoutId);
+		};
+	});
+
+	// Manual trigger: follow the `revealed` prop both ways
+	$effect(() => {
+		if (trigger !== "manual" || !setTarget) return;
+		setTarget(revealed ? 1 : 0);
+	});
+</script>
+
+<div
+	bind:this={container}
+	class={cn("relative h-[400px] w-full", className)}
+	role={alt ? "img" : undefined}
+	aria-label={alt}
+></div>

package/dist/fancy-ui/noise-reveal/NoiseReveal.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface NoiseRevealProps {
+    /** Image URL */
+    src: string;
+    /** Accessible label for the image */
+    alt?: string;
+    /** Reveal trigger: "view" = on viewport entry, "manual" = via `revealed` */
+    trigger?: "view" | "manual";
+    /** Manual reveal state (used with trigger="manual"; also allows re-hiding) */
+    revealed?: boolean;
+    /** Reveal animation duration in seconds */
+    duration?: number;
+    /** Delay before reveal in seconds (trigger="view") */
+    delay?: number;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const NoiseReveal: import("svelte").Component<NoiseRevealProps, {}, "">;
+type NoiseReveal = ReturnType<typeof NoiseReveal>;
+export default NoiseReveal;

package/dist/fancy-ui/noise-reveal/NoiseReveal.test.d.ts

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