rune-scroller 2.2.1 → 3.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rune-scroller",
-  "version": "2.2.1",
-  "description": "Lightweight, high-performance scroll animations for Svelte 5. 14KB gzipped, zero dependencies.",
+  "version": "3.0.0",
+  "description": "Lightweight scroll animations for Svelte 5. Drop-in AOS replacement. 30 animations, zero dependencies.",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
@@ -29,6 +29,9 @@
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./aos": {
+      "default": "./dist/aos.js"
+    },
     "./animations.css": "./dist/animations.css"
   },
   "files": [
@@ -59,7 +62,7 @@
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.36.0",
     "@sveltejs/kit": "^2.43.2",
-    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@types/node": "^22",
     "eslint": "^9.36.0",

package/dist/animations.css

@@ -1,83 +0,0 @@
-/**
- * Reusable scroll animation styles - Optimized with CSS custom properties
- * Reduces bundle size while maintaining all 14 animations
- */
-
-/* Base animation container with optimized transitions */
-.scroll-animate,
-.animated-element {
-	opacity: 0;
-	transition: opacity var(--duration, 2500ms) linear var(--delay, 0ms),
-		transform var(--duration, 2500ms) cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay, 0ms);
-	transform: perspective(1000px) translate(var(--tx, 0), var(--ty, 0)) scale(var(--scale, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--rotate, 0deg));
-}
-
-.scroll-animate.is-visible,
-.animated-element.is-visible {
-	opacity: 1 !important;
-	will-change: transform, opacity;
-	transform: perspective(1000px) translate(var(--tx, 0), var(--ty, 0)) scale(var(--scale, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--rotate, 0deg));
-}
-
-/* Initial state - transform values before animation */
-[data-animation='fade-in'] { --tx: 0; --ty: 0; }
-[data-animation='fade-in-up'] { --ty: var(--translate-distance, 300px); }
-[data-animation='fade-in-down'] { --ty: calc(-1 * var(--translate-distance, 300px)); }
-[data-animation='fade-in-left'] { --tx: calc(-1 * var(--translate-distance, 300px)); }
-[data-animation='fade-in-right'] { --tx: var(--translate-distance, 300px); }
-
-[data-animation='zoom-in'] { --scale: 0.3; }
-[data-animation='zoom-out'] { --scale: 2; }
-[data-animation='zoom-in-up'] { --scale: 0.5; --ty: var(--translate-distance, 300px); }
-[data-animation='zoom-in-left'] { --scale: 0.5; --tx: calc(-1 * var(--translate-distance, 300px)); }
-[data-animation='zoom-in-right'] { --scale: 0.5; --tx: var(--translate-distance, 300px); }
-
-[data-animation='flip'] { --ry: 90deg; }
-[data-animation='flip-x'] { --rx: 90deg; }
-
-[data-animation='slide-rotate'] { --tx: calc(-1 * var(--translate-distance, 300px)); --rotate: -45deg; }
-[data-animation='bounce-in'] { --scale: 0; }
-
-/* Visible state - reset transform values to final position */
-[data-animation='fade-in-up'].is-visible { --ty: 0; }
-[data-animation='fade-in-down'].is-visible { --ty: 0; }
-[data-animation='fade-in-left'].is-visible { --tx: 0; }
-[data-animation='fade-in-right'].is-visible { --tx: 0; }
-
-[data-animation='zoom-in'].is-visible { --scale: 1; }
-[data-animation='zoom-out'].is-visible { --scale: 1; }
-[data-animation='zoom-in-up'].is-visible { --scale: 1; --ty: 0; }
-[data-animation='zoom-in-left'].is-visible { --scale: 1; --tx: 0; }
-[data-animation='zoom-in-right'].is-visible { --scale: 1; --tx: 0; }
-
-[data-animation='flip'].is-visible { --ry: 0deg; }
-[data-animation='flip-x'].is-visible { --rx: 0deg; }
-
-[data-animation='slide-rotate'].is-visible { --tx: 0; --rotate: 0deg; }
-
-@keyframes bounce {
-	0% { transform: scale(0); }
-	50% { transform: scale(1.1); }
-	100% { transform: scale(1); }
-}
-
-/* Bounce animation - special case with keyframes */
-[data-animation='bounce-in'].is-visible {
-	animation: bounce var(--duration, 1500ms) cubic-bezier(0.68, -0.55, 0.265, 1.55);
-	animation-delay: var(--delay, 0ms);
-}
-
-/* Accessibility: Respect user's motion preferences */
-@media (prefers-reduced-motion: reduce) {
-	.scroll-animate,
-	.animated-element {
-		transition: none;
-		animation: none !important;
-	}
-
-	.scroll-animate.is-visible,
-	.animated-element.is-visible {
-		opacity: 1;
-		transform: none !important;
-	}
-}

package/dist/animations.d.ts

@@ -1,18 +0,0 @@
-/**
- * Calculate rootMargin for IntersectionObserver from offset or custom rootMargin
- *
- * @param {number} [offset] - Viewport offset (0-100). 0 = bottom of viewport touches top of element, 100 = top of viewport touches top of element
- * @param {string} [rootMargin] - Custom rootMargin string (takes precedence over offset)
- * @returns {string} rootMargin string for IntersectionObserver
- */
-export function calculateRootMargin(offset?: number, rootMargin?: string): string;
-/**
- * Animation utilities
- * Type definitions have been moved to types.js for single source of truth
- */
-/**
- * All available animation types in the library
- * Useful for programmatic access and validation
- * @type {readonly string[]}
- */
-export const ANIMATION_TYPES: readonly string[];

package/dist/animations.js

@@ -1,38 +0,0 @@
-/**
- * Animation utilities
- * Type definitions have been moved to types.js for single source of truth
- */
-
-/**
- * All available animation types in the library
- * Useful for programmatic access and validation
- * @type {readonly string[]}
- */
-export const ANIMATION_TYPES = [
-	'fade-in',
-	'fade-in-up',
-	'fade-in-down',
-	'fade-in-left',
-	'fade-in-right',
-	'zoom-in',
-	'zoom-out',
-	'zoom-in-up',
-	'zoom-in-left',
-	'zoom-in-right',
-	'flip',
-	'flip-x',
-	'slide-rotate',
-	'bounce-in'
-];
-
-/**
- * Calculate rootMargin for IntersectionObserver from offset or custom rootMargin
- *
- * @param {number} [offset] - Viewport offset (0-100). 0 = bottom of viewport touches top of element, 100 = top of viewport touches top of element
- * @param {string} [rootMargin] - Custom rootMargin string (takes precedence over offset)
- * @returns {string} rootMargin string for IntersectionObserver
- */
-export function calculateRootMargin(offset, rootMargin) {
-	return rootMargin ??
-		(offset !== undefined ? `-${100 - offset}% 0px -${offset}% 0px` : '-10% 0px -10% 0px');
-}

package/dist/dom-utils.d.ts

@@ -1,30 +0,0 @@
-/**
- * @param {HTMLElement} element
- * @param {number} [duration]
- * @param {number} [delay=0]
- */
-export function setCSSVariables(element: HTMLElement, duration?: number, delay?: number): void;
-/**
- * @param {HTMLElement} element
- * @param {import('./types.js').AnimationType} animation
- */
-export function setupAnimationElement(element: HTMLElement, animation: import("./types.js").AnimationType): void;
-/**
- * @param {HTMLElement} element
- * @param {boolean} [debug=false]
- * @param {number} [offset=0]
- * @param {string} [sentinelColor='#00e0ff']
- * @param {string} [debugLabel]
- * @param {string} [sentinelId]
- * @returns {{ element: HTMLElement, id: string }}
- */
-export function createSentinel(element: HTMLElement, debug?: boolean, offset?: number, sentinelColor?: string, debugLabel?: string, sentinelId?: string): {
-    element: HTMLElement;
-    id: string;
-};
-/**
- * Check if CSS animations are loaded and warn if not (dev only)
- * Uses cache to avoid expensive getComputedStyle() on every element creation
- * @returns {boolean} True if CSS appears to be loaded
- */
-export function checkAndWarnIfCSSNotLoaded(): boolean;

package/dist/dom-utils.js

@@ -1,112 +0,0 @@
-/**
- * Global counter for auto-generating sentinel IDs
- * @type {number}
- */
-let sentinelCounter = 0;
-
-/**
- * Cache to check CSS only once per page load
- * Avoids expensive getComputedStyle() calls
- * @type {boolean | null}
- */
-let cssCheckResult = null;
-
-/**
- * @param {HTMLElement} element
- * @param {number} [duration]
- * @param {number} [delay=0]
- */
-export function setCSSVariables(element, duration, delay = 0) {
-	if (duration !== undefined) {
-		element.style.setProperty('--duration', `${duration}ms`);
-	}
-	element.style.setProperty('--delay', `${delay}ms`);
-}
-
-/**
- * @param {HTMLElement} element
- * @param {import('./types.js').AnimationType} animation
- */
-export function setupAnimationElement(element, animation) {
-	element.classList.add('scroll-animate');
-	element.setAttribute('data-animation', animation);
-}
-
-/**
- * @param {HTMLElement} element
- * @param {boolean} [debug=false]
- * @param {number} [offset=0]
- * @param {string} [sentinelColor='#00e0ff']
- * @param {string} [debugLabel]
- * @param {string} [sentinelId]
- * @returns {{ element: HTMLElement, id: string }}
- */
-export function createSentinel(element, debug = false, offset = 0, sentinelColor = '#00e0ff', debugLabel = '', sentinelId) {
-	const sentinel = document.createElement('div');
-	// Use offsetHeight instead of getBoundingClientRect for accurate dimensions
-	// getBoundingClientRect returns transformed dimensions (affected by scale, etc)
-	// offsetHeight returns actual element height independent of CSS transforms
-	const elementHeight = element.offsetHeight;
-	const sentinelTop = elementHeight + offset;
-
-	// Generate auto-ID if not provided
-	if (!sentinelId) {
-		sentinelCounter++;
-		sentinelId = `sentinel-${sentinelCounter}`;
-	}
-
-	// Always set to data-sentinel-id attribute
-	sentinel.setAttribute('data-sentinel-id', sentinelId);
-
-	if (debug) {
-		sentinel.style.cssText =
-			`position:absolute;top:${sentinelTop}px;left:0;width:100%;height:3px;background:${sentinelColor};margin:0;padding:2px 4px;box-sizing:border-box;z-index:999;pointer-events:none;display:flex;align-items:center;font-size:10px;color:#000;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis`;
-		sentinel.setAttribute('data-sentinel-debug', 'true');
-		// Show ID in debug mode (or debugLabel if provided)
-		if (debugLabel) {
-			sentinel.textContent = debugLabel;
-		} else {
-			sentinel.textContent = sentinelId;
-		}
-	} else {
-		sentinel.style.cssText =
-			`position:absolute;top:${sentinelTop}px;left:0;width:100%;height:1px;visibility:hidden;margin:0;padding:0;box-sizing:border-box;pointer-events:none`;
-	}
-
-	return { element: sentinel, id: sentinelId };
-}
-
-/**
- * Check if CSS animations are loaded and warn if not (dev only)
- * Uses cache to avoid expensive getComputedStyle() on every element creation
- * @returns {boolean} True if CSS appears to be loaded
- */
-export function checkAndWarnIfCSSNotLoaded() {
-	if (typeof document === 'undefined') return false;
-	if (process.env.NODE_ENV === 'production') return true;
-
-	// Return cached result if already checked (avoids expensive reflows)
-	if (cssCheckResult !== null) return cssCheckResult;
-
-	// Try to detect if animations.css is loaded by checking for animation classes
-	const test = document.createElement('div');
-	test.className = 'scroll-animate is-visible';
-	test.style.position = 'absolute';
-	test.style.opacity = '0';
-	document.body.appendChild(test);
-	const computed = getComputedStyle(test);
-	const hasAnimation = computed.animation !== 'none' && computed.animation !== '';
-	test.remove();
-
-	if (!hasAnimation) {
-		console.warn(
-			'[rune-scroller] CSS animations not found. Make sure to import the animations:\n' +
-			'  import "rune-scroller/animations.css";\n' +
-			'Documentation: https://github.com/lelabdev/rune-scroller#installation'
-		);
-	}
-
-	// Cache the result for future calls
-	cssCheckResult = hasAnimation;
-	return hasAnimation;
-}

package/dist/index.d.ts

@@ -1,5 +0,0 @@
-export default runeScroller;
-export { runeScroller };
-export { calculateRootMargin } from "./animations.js";
-import { runeScroller } from './runeScroller.js';
-export { useIntersection, useIntersectionOnce } from "./useIntersection.svelte.js";

package/dist/index.js

@@ -1,23 +0,0 @@
-/**
- * Rune Scroller - Lightweight scroll animations for Svelte 5
- *
- * Main entry point exporting all public APIs
- *
- * @module rune-scroller
- */
-
-// Import CSS animations automatically
-import './animations.css';
-
-// Main action (default export - recommended)
-import { runeScroller } from './runeScroller.js';
-export default runeScroller;
-export { runeScroller };
-
-
-
-// Composables
-export { useIntersection, useIntersectionOnce } from './useIntersection.svelte.js';
-
-// Utilities
-export { calculateRootMargin } from './animations.js';

package/dist/observer-utils.d.ts

@@ -1,21 +0,0 @@
-/**
- * Shared IntersectionObserver utility functions
- * Reduces code duplication between action implementations
- */
-/**
- * @param {HTMLElement} target
- * @param {IntersectionObserverCallback} callback
- * @param {IntersectionObserverInit} options
- * @returns {{ observer: IntersectionObserver, isConnected: boolean }}
- */
-export function createManagedObserver(target: HTMLElement, callback: IntersectionObserverCallback, options: IntersectionObserverInit): {
-    observer: IntersectionObserver;
-    isConnected: boolean;
-};
-/**
- * @param {IntersectionObserver} observer
- * @param {{ isConnected: boolean }} state
- */
-export function disconnectObserver(observer: IntersectionObserver, state: {
-    isConnected: boolean;
-}): void;

package/dist/observer-utils.js

@@ -1,31 +0,0 @@
-/**
- * Shared IntersectionObserver utility functions
- * Reduces code duplication between action implementations
- */
-
-/**
- * @param {HTMLElement} target
- * @param {IntersectionObserverCallback} callback
- * @param {IntersectionObserverInit} options
- * @returns {{ observer: IntersectionObserver, isConnected: boolean }}
- */
-export function createManagedObserver(target, callback, options) {
-	const observer = new IntersectionObserver(callback, options);
-	observer.observe(target);
-
-	return {
-		observer,
-		isConnected: true
-	};
-}
-
-/**
- * @param {IntersectionObserver} observer
- * @param {{ isConnected: boolean }} state
- */
-export function disconnectObserver(observer, state) {
-	if (state.isConnected && observer) {
-		observer.disconnect();
-		state.isConnected = false;
-	}
-}

package/dist/runeScroller.d.ts

@@ -1,9 +0,0 @@
-/**
- * @param {HTMLElement} element
- * @param {import('./types.js').RuneScrollerOptions} [options]
- * @returns {{ update: (newOptions?: import('./types.js').RuneScrollerOptions) => void, destroy: () => void }}
- */
-export function runeScroller(element: HTMLElement, options?: import("./types.js").RuneScrollerOptions): {
-    update: (newOptions?: import("./types.js").RuneScrollerOptions) => void;
-    destroy: () => void;
-};

package/dist/runeScroller.js

@@ -1,166 +0,0 @@
-import { setCSSVariables, setupAnimationElement, createSentinel, checkAndWarnIfCSSNotLoaded } from './dom-utils.js';
-import { createManagedObserver, disconnectObserver } from './observer-utils.js';
-import { ANIMATION_TYPES } from './animations.js';
-
-/**
- * @param {HTMLElement} element
- * @param {import('./types.js').RuneScrollerOptions} [options]
- * @returns {{ update: (newOptions?: import('./types.js').RuneScrollerOptions) => void, destroy: () => void }}
- */
-export function runeScroller(element, options) {
-	// SSR Guard: Return no-op action when running on server
-	if (typeof window === 'undefined') {
-		return {
-			update: () => {},
-			destroy: () => {}
-		};
-	}
-
-	// Warn if CSS is not loaded (first time only)
-	if (typeof document !== 'undefined') {
-		checkAndWarnIfCSSNotLoaded();
-	}
-
-	// Validate animation type
-	let animation = options?.animation ?? 'fade-in';
-	if (animation && !ANIMATION_TYPES.includes(animation)) {
-		if (process.env.NODE_ENV !== 'production') {
-			console.warn(
-				`[rune-scroller] Invalid animation "${animation}". Using "fade-in" instead. ` +
-				`Valid options: ${ANIMATION_TYPES.join(', ')}`
-			);
-		}
-		animation = 'fade-in';
-	}
-
-	// Initialize opacity: 0 BEFORE adding .scroll-animate class
-	// This ensures the transition applies correctly when .is-visible is added later
-	element.style.opacity = '0';
-
-	// Setup animation classes and CSS variables
-	if (animation) {
-		setupAnimationElement(element, animation);
-	}
-
-	// Set CSS variables for duration
-	if (options?.duration !== undefined) {
-		setCSSVariables(element, options.duration);
-	}
-
-	// Force reflow to ensure transitions are ready
-	void element.offsetHeight;
-
-	// Create a wrapper div around the element to position the sentinel
-	const wrapper = document.createElement('div');
-	wrapper.style.cssText = 'position:relative;display:block;width:100%;margin:0;padding:0;box-sizing:border-box';
-	element.insertAdjacentElement('beforebegin', wrapper);
-	wrapper.appendChild(element);
-
-	// Create the invisible sentinel (or visible if debug=true)
-	// Positioned absolutely relative to the wrapper
-	const sentinelResult = createSentinel(
-		element,
-		options?.debug,
-		options?.offset,
-		options?.sentinelColor,
-		options?.debugLabel,
-		options?.sentinelId
-	);
-	const sentinel = sentinelResult.element;
-	const sentinelId = sentinelResult.id;
-
-	// Add sentinel ID to element (either provided or auto-generated)
-	element.setAttribute('data-sentinel-id', sentinelId);
-
-	wrapper.appendChild(sentinel);
-
-	// Observe the sentinel with cleanup tracking
-	const state = { isConnected: true };
-	let currentSentinel = sentinel;
-	let resizeObserver;
-	let intersectionObserver;
-
-	const { observer } = createManagedObserver(
-		sentinel,
-		(entries) => {
-			const isIntersecting = entries[0].isIntersecting;
-			if (isIntersecting) {
-				// Add the is-visible class to trigger animation
-				element.classList.add('is-visible');
-				// Call onVisible callback if provided
-				options?.onVisible?.(element);
-				// Disconnect if not in repeat mode
-				if (!options?.repeat) {
-					disconnectObserver(intersectionObserver, state);
-				}
-			} else if (options?.repeat) {
-				// In repeat mode, remove the class when the sentinel exits
-				element.classList.remove('is-visible');
-			}
-		},
-		{ threshold: 0 }
-	);
-
-	intersectionObserver = observer;
-
-	// Function to recreate sentinel when element is resized
-	const recreateSentinel = () => {
-		const newSentinelResult = createSentinel(
-			element,
-			options?.debug,
-			options?.offset,
-			options?.sentinelColor,
-			options?.debugLabel,
-			sentinelId
-		);
-		const newSentinel = newSentinelResult.element;
-		currentSentinel.replaceWith(newSentinel);
-		currentSentinel = newSentinel;
-		// Update observer to watch the new sentinel
-		intersectionObserver.disconnect();
-		intersectionObserver.observe(newSentinel);
-	};
-
-	// Setup ResizeObserver to handle element resizing
-	if (typeof ResizeObserver !== 'undefined') {
-		resizeObserver = new ResizeObserver(() => {
-			recreateSentinel();
-		});
-		resizeObserver.observe(element);
-	}
-
-	return {
-		update(newOptions) {
-			if (newOptions?.animation) {
-				element.setAttribute('data-animation', newOptions.animation);
-			}
-			if (newOptions?.duration) {
-				setCSSVariables(element, newOptions.duration);
-			}
-			// Update repeat option
-			if (newOptions?.repeat !== undefined && newOptions.repeat !== options?.repeat) {
-				options = { ...options, repeat: newOptions.repeat };
-			}
-			// Update offset and debug if changed
-			if ((newOptions?.offset !== undefined && newOptions.offset !== options?.offset) ||
-				(newOptions?.debug !== undefined && newOptions.debug !== options?.debug)) {
-				options = { ...options, ...newOptions };
-				recreateSentinel();
-			}
-		},
-		destroy() {
-			disconnectObserver(intersectionObserver, state);
-			// Cleanup ResizeObserver
-			if (resizeObserver) {
-				resizeObserver.disconnect();
-			}
-			currentSentinel.remove();
-			// Unwrap element (move it out of wrapper)
-			const parent = wrapper.parentElement;
-			if (parent) {
-				wrapper.insertAdjacentElement('beforebegin', element);
-			}
-			wrapper.remove();
-		}
-	};
-}

package/dist/types.d.ts

@@ -1,78 +0,0 @@
-/**
- * Animation type names available in Rune Scroller
- */
-export type AnimationType = "fade-in" | "fade-in-up" | "fade-in-down" | "fade-in-left" | "fade-in-right" | "zoom-in" | "zoom-out" | "zoom-in-up" | "zoom-in-left" | "zoom-in-right" | "flip" | "flip-x" | "slide-rotate" | "bounce-in";
-/**
- * Options for the runeScroller action
- * Sentinel-based scroll animation triggering
- */
-export type RuneScrollerOptions = {
-    /**
-     * - Animation type to apply
-     */
-    animation?: AnimationType | undefined;
-    /**
-     * - Animation duration in milliseconds
-     */
-    duration?: number | undefined;
-    /**
-     * - Repeat animation on every scroll
-     */
-    repeat?: boolean | undefined;
-    /**
-     * - Show sentinel as visible line for debugging
-     */
-    debug?: boolean | undefined;
-    /**
-     * - Sentinel color for debug mode (hex or CSS color)
-     */
-    sentinelColor?: string | undefined;
-    /**
-     * - Unique identifier for sentinel (auto-generated if not provided)
-     */
-    sentinelId?: string | undefined;
-    /**
-     * - Debug label to show on sentinel (e.g., animation name)
-     */
-    debugLabel?: string | undefined;
-    /**
-     * - Offset of sentinel in pixels (negative = above element)
-     */
-    offset?: number | undefined;
-    /**
-     * - Callback fired when animation becomes visible
-     */
-    onVisible?: ((element: HTMLElement) => void) | undefined;
-};
-/**
- * Configuration options for IntersectionObserver
- * Used by useIntersection and useIntersectionOnce composables
- */
-export type IntersectionOptions = {
-    /**
-     * - IntersectionObserver threshold
-     */
-    threshold?: number | number[] | undefined;
-    /**
-     * - Custom margin around root element
-     */
-    rootMargin?: string | undefined;
-    /**
-     * - Root element for intersection observation
-     */
-    root?: Element | null | undefined;
-};
-/**
- * Return type for useIntersection and useIntersectionOnce composables
- * Provides reactive element reference and visibility state
- */
-export type UseIntersectionReturn = {
-    /**
-     * - Reference to the DOM element being observed
-     */
-    element: HTMLElement | null;
-    /**
-     * - Whether the element is currently visible in viewport
-     */
-    isVisible: boolean;
-};