@joewinke/jatui 0.1.31 → 0.2.0

package/dist/showcase/TypewriterText.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+
+	interface Props {
+		phrases: string[];
+		cursor?: boolean;
+		loop?: boolean;
+		class?: string;
+	}
+
+	let {
+		phrases,
+		cursor = true,
+		loop = false,
+		class: className = ''
+	}: Props = $props();
+
+	let displayed = $state('');
+	let caretVisible = $state(true);
+	let reducedMotion = $state(false);
+	let done = $state(false);
+
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+
+	function schedule(fn: () => void, ms: number) {
+		timeout = setTimeout(fn, ms);
+	}
+
+	function clearScheduled() {
+		if (timeout !== null) {
+			clearTimeout(timeout);
+			timeout = null;
+		}
+	}
+
+	function run(phraseIdx: number, charIdx: number, deleting: boolean) {
+		if (reducedMotion) return;
+
+		const phrase = phrases[phraseIdx];
+
+		if (!deleting) {
+			// Typing
+			if (charIdx <= phrase.length) {
+				displayed = phrase.slice(0, charIdx);
+				if (charIdx < phrase.length) {
+					schedule(() => run(phraseIdx, charIdx + 1, false), 55);
+				} else {
+					// Finished typing full phrase
+					schedule(() => {
+						// Pause at full phrase
+						const isLast = phraseIdx === phrases.length - 1;
+						if (!loop && isLast) {
+							done = true;
+							return;
+						}
+						// Start deleting
+						schedule(() => run(phraseIdx, phrase.length, true), 0);
+					}, 1100);
+				}
+			}
+		} else {
+			// Deleting
+			if (charIdx >= 0) {
+				displayed = phrase.slice(0, charIdx);
+				if (charIdx > 0) {
+					schedule(() => run(phraseIdx, charIdx - 1, true), 30);
+				} else {
+					// Finished deleting — pause then move to next phrase
+					const nextIdx = (phraseIdx + 1) % phrases.length;
+					schedule(() => run(nextIdx, 0, false), 320);
+				}
+			}
+		}
+	}
+
+	onMount(() => {
+		reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		if (reducedMotion) {
+			displayed = phrases[0] ?? '';
+		} else {
+			run(0, 0, false);
+		}
+	});
+
+	onDestroy(() => {
+		clearScheduled();
+	});
+</script>
+
+<span class="typewriter {className}" class:no-caret={!cursor || done || reducedMotion}>
+	{displayed}<span class="caret" aria-hidden="true"></span>
+</span>
+
+<style>
+	.typewriter {
+		display: inline;
+	}
+
+	.caret::after {
+		content: '';
+		display: inline-block;
+		width: 2px;
+		height: 1.1em;
+		background: currentColor;
+		margin-left: 1px;
+		vertical-align: text-bottom;
+		animation: caret-blink 1s steps(1) infinite;
+	}
+
+	.no-caret .caret::after {
+		display: none;
+	}
+
+	@keyframes caret-blink {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.caret::after {
+			animation: none;
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    phrases: string[];
+    cursor?: boolean;
+    loop?: boolean;
+    class?: string;
+}
+declare const TypewriterText: import("svelte").Component<Props, {}, "">;
+type TypewriterText = ReturnType<typeof TypewriterText>;
+export default TypewriterText;

package/dist/showcase/backdrop/GrainGradient.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		ShaderMount,
+		grainGradientFragmentShader,
+		GrainGradientShapes,
+		getShaderColorFromString,
+		getShaderNoiseTexture
+	} from '@paper-design/shaders';
+	import type { GrainGradientShape } from '@paper-design/shaders';
+	import ShowcaseBackdrop from './ShowcaseBackdrop.svelte';
+
+	interface Props {
+		/** Up to 7 gradient colors. Defaults to DaisyUI primary/secondary/accent. */
+		colors?: string[];
+		/** Background fill color. Defaults to DaisyUI base-100. */
+		colorBack?: string;
+		/** Animation speed multiplier. 0 = static. Default 0.3. */
+		speed?: number;
+		/** Color transition sharpness 0–1 (0 = hard, 1 = smooth). Default 0.6. */
+		softness?: number;
+		/** Distortion between color bands 0–1. Default 0.3. */
+		intensity?: number;
+		/** Grainy noise overlay 0–1. Default 0.35. */
+		noise?: number;
+		/** Shape type for the gradient pattern. Default 'blob'. */
+		shape?: GrainGradientShape;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		colors,
+		colorBack,
+		speed = 0.3,
+		softness = 0.6,
+		intensity = 0.3,
+		noise = 0.35,
+		shape = 'blob',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let shaderMount: ShaderMount | undefined;
+	let observer: IntersectionObserver | undefined;
+	let pausedSpeed = speed;
+
+	function resolveColors(el: HTMLElement): { colors: string[]; colorBack: string } {
+		const style = getComputedStyle(el);
+		return {
+			colors: colors && colors.length > 0
+				? colors
+				: [
+						style.getPropertyValue('--color-primary').trim() || '#6c3ce1',
+						style.getPropertyValue('--color-secondary').trim() || '#e168b4',
+						style.getPropertyValue('--color-accent').trim() || '#0ea5e9'
+					],
+			colorBack: colorBack || style.getPropertyValue('--color-base-100').trim() || '#ffffff'
+		};
+	}
+
+	function buildUniforms(el: HTMLElement) {
+		const resolved = resolveColors(el);
+		return {
+			u_colorBack: getShaderColorFromString(resolved.colorBack),
+			u_colors: resolved.colors.map(getShaderColorFromString),
+			u_colorsCount: resolved.colors.length,
+			u_softness: softness,
+			u_intensity: intensity,
+			u_noise: noise,
+			u_shape: GrainGradientShapes[shape],
+			u_noiseTexture: getShaderNoiseTexture()
+		};
+	}
+
+	function handleMount(el: HTMLElement) {
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const effectiveSpeed = prefersReduced ? 0 : speed;
+
+		shaderMount = new ShaderMount(
+			el,
+			grainGradientFragmentShader,
+			buildUniforms(el),
+			undefined,
+			effectiveSpeed,
+			prefersReduced ? 1 : 0,
+			2,
+			1920 * 1080 * 4,
+			['u_noiseTexture']
+		);
+
+		observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!shaderMount) return;
+					if (entry.isIntersecting) {
+						shaderMount.setSpeed(pausedSpeed);
+					} else {
+						pausedSpeed = speed;
+						shaderMount.setSpeed(0);
+					}
+				}
+			},
+			{ threshold: 0 }
+		);
+		observer.observe(el);
+	}
+
+	function handleDispose() {
+		observer?.disconnect();
+		shaderMount?.dispose();
+		shaderMount = undefined;
+	}
+
+	$effect(() => {
+		if (!shaderMount) return;
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		pausedSpeed = prefersReduced ? 0 : speed;
+		shaderMount.setSpeed(pausedSpeed);
+	});
+</script>
+
+<!-- powered by @paper-design/shaders (Apache-2.0) -->
+<ShowcaseBackdrop class={className} onmount={handleMount} ondispose={handleDispose}>
+	{#if children}{@render children()}{/if}
+</ShowcaseBackdrop>

package/dist/showcase/backdrop/GrainGradient.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { GrainGradientShape } from '@paper-design/shaders';
+interface Props {
+    /** Up to 7 gradient colors. Defaults to DaisyUI primary/secondary/accent. */
+    colors?: string[];
+    /** Background fill color. Defaults to DaisyUI base-100. */
+    colorBack?: string;
+    /** Animation speed multiplier. 0 = static. Default 0.3. */
+    speed?: number;
+    /** Color transition sharpness 0–1 (0 = hard, 1 = smooth). Default 0.6. */
+    softness?: number;
+    /** Distortion between color bands 0–1. Default 0.3. */
+    intensity?: number;
+    /** Grainy noise overlay 0–1. Default 0.35. */
+    noise?: number;
+    /** Shape type for the gradient pattern. Default 'blob'. */
+    shape?: GrainGradientShape;
+    class?: string;
+    children?: Snippet;
+}
+declare const GrainGradient: import("svelte").Component<Props, {}, "">;
+type GrainGradient = ReturnType<typeof GrainGradient>;
+export default GrainGradient;

package/dist/showcase/backdrop/MeshGradient.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		ShaderMount,
+		meshGradientFragmentShader,
+		getShaderColorFromString
+	} from '@paper-design/shaders';
+	import ShowcaseBackdrop from './ShowcaseBackdrop.svelte';
+
+	interface Props {
+		/** Up to 10 colors. Defaults to DaisyUI primary/secondary/accent. */
+		colors?: string[];
+		/** Animation speed multiplier. 0 = static. Default 0.4. */
+		speed?: number;
+		/** Noise distortion strength 0–1. Default 0.3. */
+		distortion?: number;
+		/** Vortex distortion 0–1. Default 0. */
+		swirl?: number;
+		/** Grain mixed into shape edges 0–1. Default 0. */
+		grainMixer?: number;
+		/** Post-processing grain overlay 0–1. Default 0. */
+		grainOverlay?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		colors,
+		speed = 0.4,
+		distortion = 0.3,
+		swirl = 0,
+		grainMixer = 0,
+		grainOverlay = 0,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let shaderMount: ShaderMount | undefined;
+	let observer: IntersectionObserver | undefined;
+	let pausedSpeed = speed;
+
+	function resolveColors(el: HTMLElement): string[] {
+		if (colors && colors.length > 0) return colors;
+		const style = getComputedStyle(el);
+		return [
+			style.getPropertyValue('--color-primary').trim() || '#6c3ce1',
+			style.getPropertyValue('--color-secondary').trim() || '#e168b4',
+			style.getPropertyValue('--color-accent').trim() || '#0ea5e9'
+		];
+	}
+
+	function buildUniforms(el: HTMLElement) {
+		const resolved = resolveColors(el);
+		return {
+			u_colors: resolved.map(getShaderColorFromString),
+			u_colorsCount: resolved.length,
+			u_distortion: distortion,
+			u_swirl: swirl,
+			u_grainMixer: grainMixer,
+			u_grainOverlay: grainOverlay
+		};
+	}
+
+	function handleMount(el: HTMLElement) {
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const effectiveSpeed = prefersReduced ? 0 : speed;
+
+		shaderMount = new ShaderMount(el, meshGradientFragmentShader, buildUniforms(el), undefined, effectiveSpeed, prefersReduced ? 1 : 0, 2, 1920 * 1080 * 4);
+
+		observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!shaderMount) return;
+					if (entry.isIntersecting) {
+						shaderMount.setSpeed(pausedSpeed);
+					} else {
+						pausedSpeed = speed;
+						shaderMount.setSpeed(0);
+					}
+				}
+			},
+			{ threshold: 0 }
+		);
+		observer.observe(el);
+	}
+
+	function handleDispose() {
+		observer?.disconnect();
+		shaderMount?.dispose();
+		shaderMount = undefined;
+	}
+
+	$effect(() => {
+		if (!shaderMount) return;
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		pausedSpeed = prefersReduced ? 0 : speed;
+		shaderMount.setSpeed(pausedSpeed);
+	});
+</script>
+
+<!-- powered by @paper-design/shaders (Apache-2.0) -->
+<ShowcaseBackdrop class={className} onmount={handleMount} ondispose={handleDispose}>
+	{#if children}{@render children()}{/if}
+</ShowcaseBackdrop>

package/dist/showcase/backdrop/MeshGradient.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Up to 10 colors. Defaults to DaisyUI primary/secondary/accent. */
+    colors?: string[];
+    /** Animation speed multiplier. 0 = static. Default 0.4. */
+    speed?: number;
+    /** Noise distortion strength 0–1. Default 0.3. */
+    distortion?: number;
+    /** Vortex distortion 0–1. Default 0. */
+    swirl?: number;
+    /** Grain mixed into shape edges 0–1. Default 0. */
+    grainMixer?: number;
+    /** Post-processing grain overlay 0–1. Default 0. */
+    grainOverlay?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const MeshGradient: import("svelte").Component<Props, {}, "">;
+type MeshGradient = ReturnType<typeof MeshGradient>;
+export default MeshGradient;

package/dist/showcase/backdrop/Metaballs.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		ShaderMount,
+		metaballsFragmentShader,
+		getShaderColorFromString,
+		getShaderNoiseTexture
+	} from '@paper-design/shaders';
+	import ShowcaseBackdrop from './ShowcaseBackdrop.svelte';
+
+	interface Props {
+		/** Up to 8 blob colors. Defaults to DaisyUI primary/secondary/accent. */
+		colors?: string[];
+		/** Background fill color. Defaults to DaisyUI base-100. */
+		colorBack?: string;
+		/** Animation speed multiplier. 0 = static. Default 0.35. */
+		speed?: number;
+		/** Number of balls 1–20. Default 6. */
+		count?: number;
+		/** Ball size 0–1. Default 0.45. */
+		size?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		colors,
+		colorBack,
+		speed = 0.35,
+		count = 6,
+		size = 0.45,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let shaderMount: ShaderMount | undefined;
+	let observer: IntersectionObserver | undefined;
+	let pausedSpeed = speed;
+
+	function resolveColors(el: HTMLElement): { colors: string[]; colorBack: string } {
+		const style = getComputedStyle(el);
+		return {
+			colors: colors && colors.length > 0
+				? colors
+				: [
+						style.getPropertyValue('--color-primary').trim() || '#6c3ce1',
+						style.getPropertyValue('--color-secondary').trim() || '#e168b4',
+						style.getPropertyValue('--color-accent').trim() || '#0ea5e9'
+					],
+			colorBack: colorBack || style.getPropertyValue('--color-base-100').trim() || '#ffffff'
+		};
+	}
+
+	function buildUniforms(el: HTMLElement) {
+		const resolved = resolveColors(el);
+		return {
+			u_colorBack: getShaderColorFromString(resolved.colorBack),
+			u_colors: resolved.colors.map(getShaderColorFromString),
+			u_colorsCount: resolved.colors.length,
+			u_count: count,
+			u_size: size,
+			u_noiseTexture: getShaderNoiseTexture()
+		};
+	}
+
+	function handleMount(el: HTMLElement) {
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const effectiveSpeed = prefersReduced ? 0 : speed;
+
+		shaderMount = new ShaderMount(
+			el,
+			metaballsFragmentShader,
+			buildUniforms(el),
+			undefined,
+			effectiveSpeed,
+			prefersReduced ? 1 : 0,
+			2,
+			1920 * 1080 * 4,
+			['u_noiseTexture']
+		);
+
+		observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!shaderMount) return;
+					if (entry.isIntersecting) {
+						shaderMount.setSpeed(pausedSpeed);
+					} else {
+						pausedSpeed = speed;
+						shaderMount.setSpeed(0);
+					}
+				}
+			},
+			{ threshold: 0 }
+		);
+		observer.observe(el);
+	}
+
+	function handleDispose() {
+		observer?.disconnect();
+		shaderMount?.dispose();
+		shaderMount = undefined;
+	}
+
+	$effect(() => {
+		if (!shaderMount) return;
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		pausedSpeed = prefersReduced ? 0 : speed;
+		shaderMount.setSpeed(pausedSpeed);
+	});
+</script>
+
+<!-- powered by @paper-design/shaders (Apache-2.0) -->
+<ShowcaseBackdrop class={className} onmount={handleMount} ondispose={handleDispose}>
+	{#if children}{@render children()}{/if}
+</ShowcaseBackdrop>

package/dist/showcase/backdrop/Metaballs.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Up to 8 blob colors. Defaults to DaisyUI primary/secondary/accent. */
+    colors?: string[];
+    /** Background fill color. Defaults to DaisyUI base-100. */
+    colorBack?: string;
+    /** Animation speed multiplier. 0 = static. Default 0.35. */
+    speed?: number;
+    /** Number of balls 1–20. Default 6. */
+    count?: number;
+    /** Ball size 0–1. Default 0.45. */
+    size?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const Metaballs: import("svelte").Component<Props, {}, "">;
+type Metaballs = ReturnType<typeof Metaballs>;
+export default Metaballs;

package/dist/showcase/backdrop/NeuroNoise.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		ShaderMount,
+		neuroNoiseFragmentShader,
+		getShaderColorFromString
+	} from '@paper-design/shaders';
+	import ShowcaseBackdrop from './ShowcaseBackdrop.svelte';
+
+	interface Props {
+		/** Highlight color. Defaults to DaisyUI primary. */
+		colorFront?: string;
+		/** Main web color. Defaults to DaisyUI secondary. */
+		colorMid?: string;
+		/** Background color. Defaults to DaisyUI base-100. */
+		colorBack?: string;
+		/** Animation speed multiplier. 0 = static. Default 0.3. */
+		speed?: number;
+		/** Luminosity of crossing points 0–1. Default 0.5. */
+		brightness?: number;
+		/** Sharpness of bright-dark transition 0–1. Default 0.4. */
+		contrast?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		colorFront,
+		colorMid,
+		colorBack,
+		speed = 0.3,
+		brightness = 0.5,
+		contrast = 0.4,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let shaderMount: ShaderMount | undefined;
+	let observer: IntersectionObserver | undefined;
+	let pausedSpeed = speed;
+
+	function resolveColors(el: HTMLElement): {
+		colorFront: string;
+		colorMid: string;
+		colorBack: string;
+	} {
+		const style = getComputedStyle(el);
+		return {
+			colorFront: colorFront || style.getPropertyValue('--color-primary').trim() || '#6c3ce1',
+			colorMid: colorMid || style.getPropertyValue('--color-secondary').trim() || '#e168b4',
+			colorBack: colorBack || style.getPropertyValue('--color-base-100').trim() || '#ffffff'
+		};
+	}
+
+	function buildUniforms(el: HTMLElement) {
+		const resolved = resolveColors(el);
+		return {
+			u_colorFront: getShaderColorFromString(resolved.colorFront),
+			u_colorMid: getShaderColorFromString(resolved.colorMid),
+			u_colorBack: getShaderColorFromString(resolved.colorBack),
+			u_brightness: brightness,
+			u_contrast: contrast
+		};
+	}
+
+	function handleMount(el: HTMLElement) {
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const effectiveSpeed = prefersReduced ? 0 : speed;
+
+		shaderMount = new ShaderMount(
+			el,
+			neuroNoiseFragmentShader,
+			buildUniforms(el),
+			undefined,
+			effectiveSpeed,
+			prefersReduced ? 1 : 0,
+			2,
+			1920 * 1080 * 4
+		);
+
+		observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!shaderMount) return;
+					if (entry.isIntersecting) {
+						shaderMount.setSpeed(pausedSpeed);
+					} else {
+						pausedSpeed = speed;
+						shaderMount.setSpeed(0);
+					}
+				}
+			},
+			{ threshold: 0 }
+		);
+		observer.observe(el);
+	}
+
+	function handleDispose() {
+		observer?.disconnect();
+		shaderMount?.dispose();
+		shaderMount = undefined;
+	}
+
+	$effect(() => {
+		if (!shaderMount) return;
+		const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		pausedSpeed = prefersReduced ? 0 : speed;
+		shaderMount.setSpeed(pausedSpeed);
+	});
+</script>
+
+<!-- powered by @paper-design/shaders (Apache-2.0) -->
+<ShowcaseBackdrop class={className} onmount={handleMount} ondispose={handleDispose}>
+	{#if children}{@render children()}{/if}
+</ShowcaseBackdrop>

package/dist/showcase/backdrop/NeuroNoise.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Highlight color. Defaults to DaisyUI primary. */
+    colorFront?: string;
+    /** Main web color. Defaults to DaisyUI secondary. */
+    colorMid?: string;
+    /** Background color. Defaults to DaisyUI base-100. */
+    colorBack?: string;
+    /** Animation speed multiplier. 0 = static. Default 0.3. */
+    speed?: number;
+    /** Luminosity of crossing points 0–1. Default 0.5. */
+    brightness?: number;
+    /** Sharpness of bright-dark transition 0–1. Default 0.4. */
+    contrast?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const NeuroNoise: import("svelte").Component<Props, {}, "">;
+type NeuroNoise = ReturnType<typeof NeuroNoise>;
+export default NeuroNoise;