@joewinke/jatui 0.1.31 → 0.2.0

package/dist/showcase/FocusReveal.svelte

@@ -0,0 +1,83 @@
+// after animista.net (Ana Travas), re-authored on jatui motion tokens
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	type TriggerMode = 'mount' | 'intersect';
+
+	interface Props {
+		triggerMode?: TriggerMode;
+		durationMs?: number;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		triggerMode = 'mount',
+		durationMs = 800,
+		class: className = '',
+		children,
+	}: Props = $props();
+
+	let reducedMotion = $state(false);
+	let revealed = $state(false);
+	let el: HTMLDivElement | undefined = $state();
+
+	onMount(() => {
+		reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+		if (reducedMotion) {
+			revealed = true;
+			return;
+		}
+
+		if (triggerMode === 'mount') {
+			requestAnimationFrame(() => {
+				revealed = true;
+			});
+		} else {
+			const observer = new IntersectionObserver(
+				(entries) => {
+					for (const entry of entries) {
+						if (entry.intersectionRatio >= 0.5) {
+							revealed = true;
+							observer.disconnect();
+						}
+					}
+				},
+				{ threshold: 0.5 }
+			);
+
+			if (el) observer.observe(el);
+
+			return () => observer.disconnect();
+		}
+	});
+</script>
+
+<div
+	bind:this={el}
+	class="focus-reveal-root {className}"
+	style:filter={reducedMotion || revealed ? 'blur(0px)' : 'blur(8px)'}
+	style:opacity={reducedMotion || revealed ? '1' : '0.6'}
+	style:transition={reducedMotion
+		? 'none'
+		: `filter ${durationMs}ms var(--motion-glide), opacity ${durationMs}ms var(--motion-glide)`}
+>
+	{@render children()}
+</div>
+
+<style>
+	.focus-reveal-root {
+		will-change: filter, opacity;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.focus-reveal-root {
+			filter: none !important;
+			opacity: 1 !important;
+			transition: none !important;
+			will-change: auto;
+		}
+	}
+</style>

package/dist/showcase/FocusReveal.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type TriggerMode = 'mount' | 'intersect';
+interface Props {
+    triggerMode?: TriggerMode;
+    durationMs?: number;
+    class?: string;
+    children: Snippet;
+}
+declare const FocusReveal: import("svelte").Component<Props, {}, "">;
+type FocusReveal = ReturnType<typeof FocusReveal>;
+export default FocusReveal;

package/dist/showcase/Globe.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	import createGlobe from 'cobe';
+	import type { Globe, Marker } from 'cobe';
+	import { getDaisyUIColor, watchThemeChanges } from '../utils/daisyuiColors';
+
+	interface Props {
+		markers?: Marker[];
+		size?: number;
+		autoRotateSpeed?: number;
+		/** Override globe colors. Defaults to DaisyUI theme primary/neutral/glow. */
+		colors?: {
+			base?: [number, number, number];
+			marker?: [number, number, number];
+			glow?: [number, number, number];
+		};
+		class?: string;
+	}
+
+	let {
+		markers = [],
+		size = 600,
+		autoRotateSpeed = 0.005,
+		colors,
+		class: className = '',
+	}: Props = $props();
+
+	let canvas: HTMLCanvasElement | undefined = $state();
+	let globe: Globe | undefined;
+	let phi = 0;
+	let theta = 0.3;
+	let animFrame = 0;
+	let isDragging = false;
+	let lastPointerX = 0;
+	let lastPointerY = 0;
+	let velocityX = 0;
+	let velocityY = 0;
+	let paused = false;
+
+	const prefersReducedMotion =
+		typeof window !== 'undefined'
+			? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			: false;
+
+	// Convert a CSS color string to a cobe [r, g, b] tuple (0–1 range).
+	function cssToRgb(css: string): [number, number, number] {
+		try {
+			const c = document.createElement('canvas');
+			c.width = 1;
+			c.height = 1;
+			const ctx = c.getContext('2d');
+			if (!ctx) return [0.5, 0.5, 0.5];
+			ctx.fillStyle = css;
+			ctx.fillRect(0, 0, 1, 1);
+			const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+			return [r / 255, g / 255, b / 255];
+		} catch {
+			return [0.5, 0.5, 0.5];
+		}
+	}
+
+	function resolveColors() {
+		return {
+			base: colors?.base ?? cssToRgb(getDaisyUIColor('neutral')),
+			marker: colors?.marker ?? cssToRgb(getDaisyUIColor('primary')),
+			glow: colors?.glow ?? cssToRgb(getDaisyUIColor('primary')),
+		};
+	}
+
+	function tick() {
+		if (paused || !globe) {
+			animFrame = requestAnimationFrame(tick);
+			return;
+		}
+
+		if (!isDragging) {
+			if (!prefersReducedMotion) {
+				phi += autoRotateSpeed;
+			}
+			if (Math.abs(velocityX) > 0.0001 || Math.abs(velocityY) > 0.0001) {
+				phi += velocityX;
+				theta = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, theta + velocityY));
+				velocityX *= 0.92;
+				velocityY *= 0.92;
+			}
+		}
+
+		globe.update({ phi, theta });
+		animFrame = requestAnimationFrame(tick);
+	}
+
+	function startGlobe() {
+		if (!canvas) return;
+		cancelAnimationFrame(animFrame);
+		globe?.destroy();
+		globe = undefined;
+
+		const c = resolveColors();
+		const dpr = window.devicePixelRatio ?? 1;
+
+		globe = createGlobe(canvas, {
+			width: size * dpr,
+			height: size * dpr,
+			phi,
+			theta,
+			dark: 1,
+			diffuse: 1.2,
+			mapSamples: 16000,
+			mapBrightness: 6,
+			baseColor: c.base,
+			markerColor: c.marker,
+			glowColor: c.glow,
+			markers,
+			devicePixelRatio: dpr,
+			opacity: 1,
+		});
+
+		animFrame = requestAnimationFrame(tick);
+	}
+
+	$effect(() => {
+		if (!canvas) return;
+
+		startGlobe();
+
+		const unwatchTheme = watchThemeChanges(() => {
+			startGlobe();
+		});
+
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				paused = !entry.isIntersecting;
+			},
+			{ threshold: 0.1 }
+		);
+		observer.observe(canvas);
+
+		return () => {
+			cancelAnimationFrame(animFrame);
+			globe?.destroy();
+			globe = undefined;
+			observer.disconnect();
+			unwatchTheme();
+		};
+	});
+
+	function onPointerDown(e: PointerEvent) {
+		isDragging = true;
+		lastPointerX = e.clientX;
+		lastPointerY = e.clientY;
+		velocityX = 0;
+		velocityY = 0;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!isDragging) return;
+		const dx = e.clientX - lastPointerX;
+		const dy = e.clientY - lastPointerY;
+		const sensitivity = 0.005;
+		velocityX = dx * sensitivity;
+		velocityY = dy * sensitivity;
+		phi += velocityX;
+		theta = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, theta + velocityY));
+		lastPointerX = e.clientX;
+		lastPointerY = e.clientY;
+	}
+
+	function onPointerUp(_e: PointerEvent) {
+		isDragging = false;
+	}
+</script>
+
+<div
+	class="globe-root {className}"
+	style="width:{size}px;height:{size}px;"
+	role="img"
+	aria-label="Interactive globe"
+>
+	<canvas
+		bind:this={canvas}
+		style="width:{size}px;height:{size}px;cursor:{isDragging ? 'grabbing' : 'grab'};"
+		onpointerdown={onPointerDown}
+		onpointermove={onPointerMove}
+		onpointerup={onPointerUp}
+		onpointercancel={onPointerUp}
+	></canvas>
+</div>
+
+<style>
+	.globe-root {
+		display: block;
+		position: relative;
+		overflow: hidden;
+		border-radius: 50%;
+		user-select: none;
+		touch-action: none;
+	}
+
+	canvas {
+		display: block;
+	}
+</style>

package/dist/showcase/Globe.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Globe, Marker } from 'cobe';
+interface Props {
+    markers?: Marker[];
+    size?: number;
+    autoRotateSpeed?: number;
+    /** Override globe colors. Defaults to DaisyUI theme primary/neutral/glow. */
+    colors?: {
+        base?: [number, number, number];
+        marker?: [number, number, number];
+        glow?: [number, number, number];
+    };
+    class?: string;
+}
+declare const Globe: import("svelte").Component<Props, {}, "">;
+type Globe = ReturnType<typeof Globe>;
+export default Globe;

package/dist/showcase/KenBurns.svelte

@@ -0,0 +1,105 @@
+// after animista.net (Ana Travas), re-authored on jatui motion tokens
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	type Direction =
+		| 'top'
+		| 'bottom'
+		| 'left'
+		| 'right'
+		| 'top-left'
+		| 'top-right'
+		| 'bottom-left'
+		| 'bottom-right';
+
+	type LoopMode = 'alternate' | 'hold';
+
+	interface Props {
+		direction?: Direction;
+		durationS?: number;
+		loop?: LoopMode;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		direction = 'top-right',
+		durationS = 20,
+		loop = 'alternate',
+		class: className = '',
+		children,
+	}: Props = $props();
+
+	let reducedMotion = $state(false);
+
+	onMount(() => {
+		reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	});
+
+	// Each compass direction maps to a translate endpoint at scale 1.12
+	// The pan shifts the visible crop slightly while the image zooms in.
+	const translateMap: Record<Direction, string> = {
+		top: 'translate(0%, -4%)',
+		bottom: 'translate(0%, 4%)',
+		left: 'translate(-4%, 0%)',
+		right: 'translate(4%, 0%)',
+		'top-left': 'translate(-3%, -3%)',
+		'top-right': 'translate(3%, -3%)',
+		'bottom-left': 'translate(-3%, 3%)',
+		'bottom-right': 'translate(3%, 3%)',
+	};
+
+	const endTransform = $derived(`scale(1.12) ${translateMap[direction]}`);
+	const iterationCount = $derived(loop === 'alternate' ? 'infinite' : '1');
+	const fillMode = $derived(loop === 'hold' ? 'forwards' : 'none');
+	const alternateDir = $derived(loop === 'alternate' ? 'alternate' : 'normal');
+</script>
+
+<div class="ken-burns-root {className}" aria-hidden="true">
+	<div
+		class="ken-burns-inner"
+		style:animation-name={reducedMotion ? 'none' : 'ken-burns-zoom'}
+		style:animation-duration="{durationS}s"
+		style:animation-timing-function="ease-in-out"
+		style:animation-iteration-count={reducedMotion ? '1' : iterationCount}
+		style:animation-direction={reducedMotion ? 'normal' : alternateDir}
+		style:animation-fill-mode={reducedMotion ? 'none' : fillMode}
+		style:--kb-end-transform={endTransform}
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.ken-burns-root {
+		overflow: hidden;
+		position: relative;
+	}
+
+	.ken-burns-inner {
+		width: 100%;
+		height: 100%;
+		transform-origin: center center;
+		will-change: transform;
+		pointer-events: auto;
+	}
+
+	@keyframes ken-burns-zoom {
+		0% {
+			transform: scale(1) translate(0, 0);
+		}
+		100% {
+			transform: var(--kb-end-transform);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ken-burns-inner {
+			animation: none !important;
+			will-change: auto;
+		}
+	}
+</style>

package/dist/showcase/KenBurns.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Direction = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type LoopMode = 'alternate' | 'hold';
+interface Props {
+    direction?: Direction;
+    durationS?: number;
+    loop?: LoopMode;
+    class?: string;
+    children?: Snippet;
+}
+declare const KenBurns: import("svelte").Component<Props, {}, "">;
+type KenBurns = ReturnType<typeof KenBurns>;
+export default KenBurns;

package/dist/showcase/Marquee.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+
+  interface Props {
+    speed?: number;
+    pauseOnHover?: boolean;
+    class?: string;
+    children: import('svelte').Snippet;
+  }
+
+  let {
+    speed = 14,
+    pauseOnHover = true,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  let paused = $state(false);
+
+  function handleMouseEnter() {
+    if (pauseOnHover) paused = true;
+  }
+
+  function handleMouseLeave() {
+    if (pauseOnHover) paused = false;
+  }
+
+  onDestroy(() => {
+    paused = false;
+  });
+</script>
+
+<div
+  class="marquee-wrapper {className}"
+  style="--marquee-speed: {speed}s;"
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+  aria-label="Scrolling content"
+>
+  <div
+    class="marquee-track"
+    class:paused
+  >
+    <div class="marquee-content" aria-hidden="false">
+      {@render children()}
+    </div>
+    <div class="marquee-content" aria-hidden="true">
+      {@render children()}
+    </div>
+  </div>
+</div>
+
+<style>
+  @keyframes marquee-scroll {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-50%);
+    }
+  }
+
+  .marquee-wrapper {
+    overflow: hidden;
+    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
+    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
+  }
+
+  .marquee-track {
+    display: flex;
+    width: max-content;
+    animation: marquee-scroll var(--marquee-speed, 14s) linear infinite;
+  }
+
+  .marquee-track.paused {
+    animation-play-state: paused;
+  }
+
+  .marquee-content {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .marquee-track {
+      animation: none;
+    }
+  }
+</style>

package/dist/showcase/Marquee.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    speed?: number;
+    pauseOnHover?: boolean;
+    class?: string;
+    children: import('svelte').Snippet;
+}
+declare const Marquee: import("svelte").Component<Props, {}, "">;
+type Marquee = ReturnType<typeof Marquee>;
+export default Marquee;

package/dist/showcase/ParallaxTilt.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		maxTilt?: number;
+		glare?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { maxTilt = 16, glare = false, class: className = '', children }: Props = $props();
+
+	let outerEl = $state<HTMLDivElement | null>(null);
+	let transform = $state('');
+	let glareX = $state(50);
+	let glareY = $state(50);
+	let hasFinePointer = $state(false);
+	let reducedMotion = $state(false);
+
+	onMount(() => {
+		hasFinePointer = window.matchMedia('(pointer: fine)').matches;
+		reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	});
+
+	function onMouseMove(e: MouseEvent) {
+		if (!outerEl || !hasFinePointer || reducedMotion) return;
+		const rect = outerEl.getBoundingClientRect();
+		const px = (e.clientX - rect.left) / rect.width;
+		const py = (e.clientY - rect.top) / rect.height;
+		const rotX = (py - 0.5) * -maxTilt;
+		const rotY = (px - 0.5) * maxTilt;
+		transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
+		glareX = px * 100;
+		glareY = py * 100;
+	}
+
+	function onMouseLeave() {
+		transform = '';
+		glareX = 50;
+		glareY = 50;
+	}
+</script>
+
+<div
+	bind:this={outerEl}
+	class="parallax-tilt-outer {className}"
+	onmousemove={onMouseMove}
+	onmouseleave={onMouseLeave}
+	role="presentation"
+>
+	<div class="parallax-tilt-card" style="transform: {transform};">
+		{#if glare && hasFinePointer && !reducedMotion}
+			<div
+				class="parallax-tilt-glare"
+				style="background: radial-gradient(circle at {glareX}% {glareY}%, rgba(255,255,255,0.25) 0%, transparent 65%);"
+				aria-hidden="true"
+			></div>
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.parallax-tilt-outer {
+		perspective: 800px;
+		display: inline-block;
+	}
+
+	.parallax-tilt-card {
+		position: relative;
+		transform-style: preserve-3d;
+		transition: transform 0.15s ease-out;
+		will-change: transform;
+	}
+
+	.parallax-tilt-glare {
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.parallax-tilt-card {
+			transform: none !important;
+			transition: none;
+			will-change: auto;
+		}
+
+		.parallax-tilt-glare {
+			display: none;
+		}
+	}
+</style>

package/dist/showcase/ParallaxTilt.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    maxTilt?: number;
+    glare?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const ParallaxTilt: import("svelte").Component<Props, {}, "">;
+type ParallaxTilt = ReturnType<typeof ParallaxTilt>;
+export default ParallaxTilt;