@dryui/ui 0.2.2 → 0.3.0

package/dist/adjust/adjust.svelte

@@ -54,7 +54,7 @@
 	}
 </script>
 
-<div data-adjust class={className} use:applyStyles {...rest}>
+<div {@attach applyStyles} data-adjust class={className} {...rest}>
 	{@render children()}
 </div>
 

package/dist/aurora/aurora.svelte

@@ -7,6 +7,7 @@
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		palette?: 'sunrise' | 'ocean' | 'forest' | 'cosmic' | readonly [string, string, string];
 		speed?: 'slow' | 'normal' | 'fast' | number;
+		motion?: 'auto' | 'never';
 		intensity?: number;
 		waviness?: number;
 		colorSpace?: 'srgb' | 'oklch' | 'oklab';
@@ -18,6 +19,7 @@
 	let {
 		palette = 'cosmic',
 		speed = 'normal',
+		motion = 'auto',
 		intensity = 80,
 		waviness = 50,
 		colorSpace = 'srgb',
@@ -29,8 +31,19 @@
 		...rest
 	}: Props = $props();
 
+	let rootNode = $state<HTMLElement | null>(null);
 	let prefersReducedMotion = $state(false);
-	let animated = $state(false);
+	let supportsAnimation = $state(false);
+	let documentVisible = $state(true);
+	let inViewport = $state(true);
+	let animated = $derived.by(
+		() =>
+			motion !== 'never' &&
+			supportsAnimation &&
+			!prefersReducedMotion &&
+			documentVisible &&
+			inViewport
+	);
 
 	const speedDuration = $derived.by(() => {
 		if (typeof speed === 'number' && Number.isFinite(speed) && speed > 0) {
@@ -51,6 +64,8 @@
 			observeReducedMotionPreference,
 			getReducedMotionPreference
 		} = await_motion();
+
+		supportsAnimation = supportsPropertyRegistration();
 		registerPropertyOnce({
 			name: '--dry-aurora-angle',
 			syntax: '<angle>',
@@ -64,20 +79,38 @@
 			initialValue: '0%'
 		});
 
+		documentVisible = document.visibilityState === 'visible';
+		const handleVisibilityChange = () => {
+			documentVisible = document.visibilityState === 'visible';
+		};
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
 		const updateAnimatedState = (matches: boolean) => {
 			prefersReducedMotion = matches;
-			animated = !matches && supportsPropertyRegistration();
 		};
-
 		const stopMotionObserver = observeReducedMotionPreference(updateAnimatedState);
+		let stopViewportObserver = () => {};
+
+		if (rootNode && 'IntersectionObserver' in window) {
+			const observer = new IntersectionObserver(
+				([entry]) => {
+					inViewport = entry?.isIntersecting ?? true;
+				},
+				{ threshold: 0.12 }
+			);
+			observer.observe(rootNode);
+			stopViewportObserver = () => observer.disconnect();
+		}
 
-		if (!supportsPropertyRegistration() || getReducedMotionPreference()) {
-			animated = false;
-			return stopMotionObserver;
+		if (!supportsAnimation || getReducedMotionPreference()) {
+			inViewport = true;
 		}
 
-		animated = true;
-		return stopMotionObserver;
+		return () => {
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+			stopMotionObserver();
+			stopViewportObserver();
+		};
 	});
 
 	function await_motion() {
@@ -130,6 +163,15 @@
 		});
 	}
 
+	function captureRoot(node: HTMLElement) {
+		rootNode = node;
+		return () => {
+			if (rootNode === node) {
+				rootNode = null;
+			}
+		};
+	}
+
 	function applyBackdropStyles(node: HTMLElement) {
 		$effect(() => {
 			if (blendMode) node.style.setProperty('--_aurora-backdrop-blend', blendMode);
@@ -142,6 +184,8 @@
 </script>
 
 <div
+	{@attach captureRoot}
+	{@attach applyRootStyles}
 	data-aurora
 	class={className}
 	data-palette={paletteName}
@@ -149,9 +193,8 @@
 	data-reduced-motion={prefersReducedMotion || undefined}
 	data-color-space={colorSpace}
 	{...rest}
-	use:applyRootStyles
 >
-	<div data-aurora-backdrop aria-hidden="true" use:applyBackdropStyles>
+	<div {@attach applyBackdropStyles} data-aurora-backdrop aria-hidden="true">
 		<span data-aurora-layer data-layer="one"></span>
 		<span data-aurora-layer data-layer="two"></span>
 		<span data-aurora-layer data-layer="three"></span>
@@ -235,7 +278,6 @@
 		transform: translate3d(var(--dry-aurora-shift), 0, 0) rotate(var(--dry-aurora-angle));
 		transform-origin: center;
 		mix-blend-mode: screen;
-		will-change: transform, opacity;
 	}
 
 	[data-aurora-layer][data-layer='one'] {
@@ -259,6 +301,10 @@
 		filter: blur(calc(52px * (0.5 + var(--dry-aurora-waviness, 50) / 100)));
 	}
 
+	[data-aurora][data-animated] [data-aurora-layer] {
+		will-change: transform, opacity;
+	}
+
 	[data-aurora][data-animated] [data-aurora-layer][data-layer='one'] {
 		animation: aurora-one var(--dry-aurora-duration) var(--dry-ease-spring-soft) infinite alternate;
 	}
@@ -295,6 +341,7 @@
 	}
 
 	[data-aurora][data-animated] [data-aurora-backdrop]::after {
+		will-change: opacity, transform;
 		animation: aurora-glow calc(var(--dry-aurora-duration) * 1.8) ease-in-out infinite alternate;
 	}
 

package/dist/aurora/aurora.svelte.d.ts

@@ -4,6 +4,7 @@ import type { BlendMode } from '@dryui/primitives/aurora';
 interface Props extends HTMLAttributes<HTMLDivElement> {
 	palette?: 'sunrise' | 'ocean' | 'forest' | 'cosmic' | readonly [string, string, string];
 	speed?: 'slow' | 'normal' | 'fast' | number;
+	motion?: 'auto' | 'never';
 	intensity?: number;
 	waviness?: number;
 	colorSpace?: 'srgb' | 'oklch' | 'oklab';

package/dist/aurora/index.d.ts

@@ -5,10 +5,12 @@ export type { BlendMode };
 export type AuroraNamedPalette = 'sunrise' | 'ocean' | 'forest' | 'cosmic';
 export type AuroraPalette = AuroraNamedPalette | readonly [string, string, string];
 export type AuroraSpeed = 'slow' | 'normal' | 'fast' | number;
+export type AuroraMotion = 'auto' | 'never';
 export type AuroraColorSpace = 'srgb' | 'oklch' | 'oklab';
 export interface AuroraProps extends HTMLAttributes<HTMLDivElement> {
     palette?: AuroraPalette;
     speed?: AuroraSpeed;
+    motion?: AuroraMotion;
     intensity?: number;
     waviness?: number;
     colorSpace?: AuroraColorSpace;