rune-scroller 0.0.2 → 0.1.1

package/README.md

@@ -15,7 +15,7 @@
 - ✅ **Svelte 5 Runes** : `$state`, `$props()` with snippets
 - ✅ **Zero Dependencies** : Pure Svelte 5 + IntersectionObserver
 - ✅ **Native Performance** : GPU-accelerated CSS animations
-- ✅ **26+ Animations** : Fade, Zoom, Flip, Slide, Bounce, and more
+- ✅ **14 Built-in Animations** : Fade (5), Zoom (5), Flip (2), Slide Rotate, Bounce
 - ✅ **TypeScript** : Full type coverage with strict mode
 - ✅ **Customizable** : Duration, delay, threshold, offset per element
 - ✅ **Play Once or Repeat** : Control animation behavior
@@ -55,19 +55,24 @@ For a typical SvelteKit app:
 ## 📦 Project Structure
 
 ```
-rune-scroller/
+rune-scroller-lib/
 ├── src/lib/
 │   ├── Rs.svelte                      # Main animation component (one-time or repeat)
-│   ├── BaseAnimated.svelte            # Base component (internal)
-│   ├── useIntersection.svelte.ts      # IntersectionObserver composable
-│   ├── animations.ts                  # Animation configuration
-│   ├── animations.css                 # Animation styles
+│   ├── BaseAnimated.svelte            # Base animation implementation
+│   ├── runeScroller.svelte.ts         # Sentinel-based animation action (recommended)
+│   ├── useIntersection.svelte.ts      # IntersectionObserver composables
+│   ├── animate.svelte.ts              # Animation action for direct DOM control
+│   ├── animations.ts                  # Animation configuration & validation
+│   ├── animations.css                 # Animation styles (14 animations)
+│   ├── animations.test.ts             # Animation configuration tests
+│   ├── scroll-animate.test.ts         # Component behavior tests
 │   └── index.ts                       # Library entry point
-├── src/routes/
-│   ├── +layout.svelte
-│   ├── +page.svelte                   # Demo/landing page
-│   └── test/+page.svelte              # Test page
-└── package.json
+├── dist/                              # Built library (created by pnpm build)
+├── package.json                       # npm package configuration
+├── svelte.config.js                   # SvelteKit configuration
+├── vite.config.ts                     # Vite build configuration
+├── tsconfig.json                      # TypeScript configuration
+└── eslint.config.js                   # ESLint configuration
 ```
 
 ---
@@ -153,6 +158,107 @@ The `Rs` component is the unified API for all scroll animations:
 
 ---
 
+## 🎯 Sentinel-Based Animation Triggering with `runeScroller`
+
+For more precise control over animation timing, use the `runeScroller` action. This approach uses an invisible **sentinel element** positioned below your content to trigger animations at exactly the right moment.
+
+### Why Sentinels?
+
+- **Accurate Timing** - Instead of triggering when the element enters, sentinel triggers slightly earlier
+- **Consistent Behavior** - Same timing across all screen sizes and content heights
+- **Simple API** - No complex offset calculations needed
+- **Performance** - Minimal overhead, pure CSS animations
+
+### How Sentinels Work
+
+1. An invisible 20px sentinel element is automatically placed **below** your animated element
+2. When the sentinel enters the viewport, it triggers the animation
+3. This ensures content animates in perfectly as it becomes visible
+
+```svelte
+<div use:runeScroller={{ animation: 'fade-in-up', duration: 1000 }}>
+  <!-- Your content here -->
+  <!-- Invisible sentinel is automatically placed below -->
+</div>
+```
+
+### Basic Usage
+
+```svelte
+<script>
+	import { runeScroller } from 'rune-scroller';
+	import 'rune-scroller/animations.css';
+</script>
+
+<!-- Simple fade in with sentinel triggering -->
+<div use:runeScroller={{ animation: 'fade-in' }}>
+	<h2>Animated Heading</h2>
+	<p>Animates when sentinel enters viewport</p>
+</div>
+
+<!-- With duration control -->
+<div use:runeScroller={{ animation: 'fade-in-up', duration: 1500 }}>
+	<div class="card">Smooth animation</div>
+</div>
+```
+
+### Sentinel-Based Examples
+
+**Staggered animations with sentinels:**
+
+```svelte
+<script>
+	import { runeScroller } from 'rune-scroller';
+</script>
+
+<div class="grid">
+	{#each items as item, i}
+		<div use:runeScroller={{ animation: 'fade-in-up', duration: 800 }}>
+			<h3>{item.title}</h3>
+			<p>{item.description}</p>
+		</div>
+	{/each}
+</div>
+```
+
+**Hero section with sentinel triggering:**
+
+```svelte
+<div use:runeScroller={{ animation: 'fade-in-down', duration: 1000 }}>
+	<h1>Welcome to Our Site</h1>
+</div>
+
+<div use:runeScroller={{ animation: 'fade-in-up', duration: 1200 }}>
+	<p>Engaging content appears as you scroll</p>
+</div>
+
+<div use:runeScroller={{ animation: 'zoom-in', duration: 1000 }}>
+	<button class="cta">Get Started</button>
+</div>
+```
+
+### `runeScroller` Options
+
+```typescript
+interface RuneScrollerOptions {
+	animation?: AnimationType; // Animation type (e.g., 'fade-in-up')
+	duration?: number;         // Duration in milliseconds (default: 2000)
+	repeat?: boolean;          // Repeat animation on each scroll (default: false)
+}
+```
+
+### Comparing: `Rs` Component vs `runeScroller` Action
+
+| Feature | `Rs` Component | `runeScroller` Action |
+|---------|---|---|
+| **Usage** | `<Rs>` wrapper | `use:` directive |
+| **Triggering** | IntersectionObserver on element | IntersectionObserver on sentinel |
+| **Timing Control** | offset, threshold props | Automatic sentinel placement |
+| **Repeat Support** | Yes (via `repeat` prop) | Yes (via `repeat` option) |
+| **Best For** | Complex layouts, component isolation | Direct DOM control, simple/mixed elements |
+
+---
+
 ## ⚙️ Component Props
 
 ### Rs Component
@@ -303,7 +409,7 @@ Fades in while moving right 100px.
 
 ---
 
-### Zoom (2 variants)
+### Zoom (5 variants)
 
 #### `zoom-in`
 
@@ -331,6 +437,45 @@ Scales from 150% to 100% while fading in.
 </Rs>
 ```
 
+#### `zoom-in-up`
+
+Scales from 50% while translating up 50px.
+
+```svelte
+<Rs animation="zoom-in-up">
+	<div class="card">
+		<h2>Zoom In Up</h2>
+		<p>Grows while moving up</p>
+	</div>
+</Rs>
+```
+
+#### `zoom-in-left`
+
+Scales from 50% while translating left 50px.
+
+```svelte
+<Rs animation="zoom-in-left">
+	<div class="card">
+		<h2>Zoom In Left</h2>
+		<p>Grows while moving left</p>
+	</div>
+</Rs>
+```
+
+#### `zoom-in-right`
+
+Scales from 50% while translating right 50px.
+
+```svelte
+<Rs animation="zoom-in-right">
+	<div class="card">
+		<h2>Zoom In Right</h2>
+		<p>Grows while moving right</p>
+	</div>
+</Rs>
+```
+
 ---
 
 ### Flip (2 variants)
@@ -480,65 +625,115 @@ Animate cards with progressive delays:
 
 ---
 
-## 🎨 Theming
+## 🔧 Composables & Actions
 
-The project includes a modern **Granite + Electric Blue** theme in `src/lib/viking-theme.css`.
+### runeScroller (Recommended)
 
-### Color Palette
+The `runeScroller` action provides sentinel-based animation triggering for precise timing control:
 
-```css
---granite-dark: #0f1419;
---granite-medium: #1a1f2e;
---granite-light: #252d3d;
---electric-blue: #00d9ff;
---text-primary: #f0f2f5;
---text-secondary: #a8b0be;
+```typescript
+function runeScroller(
+	element: HTMLElement,
+	options?: {
+		animation?: AnimationType;  // Animation type
+		duration?: number;          // Duration in ms (default: 2000)
+		repeat?: boolean;           // Repeat animation on each scroll (default: false)
+	}
+): { update?: (newOptions) => void; destroy?: () => void }
 ```
 
-### Using Animations with Custom CSS Classes
+**Key Features:**
+- Automatically creates an invisible 20px sentinel element below your content
+- Triggers animation when sentinel enters viewport
+- Provides consistent timing across all screen sizes
+- Minimal configuration needed
+- Supports both one-time and repeating animations
+
+**Basic Example (One-time animation):**
 
 ```svelte
 <script>
-	import Rs from '$lib/Rs.svelte';
+	import { runeScroller } from 'rune-scroller';
 </script>
 
-<!-- Apply custom classes to animated content -->
-<Rs animation="fade-in-up" class="my-custom-card">
-	<div>
-		<h2>Title</h2>
-		<p>Content</p>
-	</div>
-</Rs>
+<!-- Animation plays once when sentinel enters viewport -->
+<div use:runeScroller={{ animation: 'fade-in-up', duration: 1000 }}>
+	Animated content with sentinel-based triggering
+</div>
+```
+
+**Repeating Animation:**
+
+```svelte
+<!-- Animation repeats each time sentinel enters viewport -->
+<div use:runeScroller={{ animation: 'bounce-in', duration: 800, repeat: true }}>
+	This animates every time you scroll past it
+</div>
+```
+
+**Complete Examples:**
+
+```svelte
+<script>
+	import { runeScroller } from 'rune-scroller';
+</script>
+
+<!-- Fade in once on scroll -->
+<div use:runeScroller={{ animation: 'fade-in', duration: 600 }}>
+	<h2>Section Title</h2>
+	<p>Fades in when scrolled into view</p>
+</div>
 
-<!-- Combine with HTML attributes like data-* -->
-<Rs animation="zoom-in" data-section="features" id="feature-1">
+<!-- Zoom in with longer duration -->
+<div use:runeScroller={{ animation: 'zoom-in-up', duration: 1200 }}>
 	<div class="card">
-		<h3>Feature</h3>
+		<h3>Card Title</h3>
+		<p>Zooms in from below</p>
 	</div>
-</Rs>
+</div>
+
+<!-- Repeating animation for interactive effect -->
+<div use:runeScroller={{ animation: 'bounce-in', duration: 700, repeat: true }}>
+	<button class="interactive-button">Bounces on each scroll</button>
+</div>
+
+<!-- Complex staggered layout -->
+<div class="grid">
+	{#each items as item, i}
+		<div use:runeScroller={{ animation: 'fade-in-up', duration: 800 }}>
+			<h3>{item.title}</h3>
+			<p>{item.description}</p>
+		</div>
+	{/each}
+</div>
 ```
 
----
+**When to use:**
+- ✅ Simple element animations
+- ✅ Consistent timing across layouts
+- ✅ Minimal overhead applications
+- ✅ Both one-time and repeating animations
+- ❌ Complex layout with component isolation (use `Rs` component instead)
 
-## 🔧 Composables
+---
 
 ### useIntersectionOnce
 
-For animations that play only once (used by `ScrollAnimate`):
+For one-time animations:
 
 ```typescript
 function useIntersectionOnce(options?: {
 	threshold?: number;
 	rootMargin?: string;
 	root?: Element | null;
-});
+}): { element: HTMLElement | null; isVisible: boolean }
 ```
 
-Returns `{ element, isVisible }` — bind `element` to your target, `isVisible` becomes `true` once.
+Returns `{ element, isVisible }` — bind `element` to your target, `isVisible` becomes `true` once, then observer unobserves.
 
 ### useIntersection
 
-For repeating animations (used by `AnimatedElements`):
+For repeating animations:
 
 ```typescript
 function useIntersection(
@@ -548,22 +743,62 @@ function useIntersection(
 		root?: Element | null;
 	},
 	onVisible?: (isVisible: boolean) => void
-);
+): { element: HTMLElement | null; isVisible: boolean }
 ```
 
-Returns `{ element, isVisible }` — `isVisible` toggles on each scroll.
+Returns `{ element, isVisible }` — `isVisible` toggles `true`/`false` on each scroll pass.
+
+### animate Action
+
+For direct DOM animation control without component wrapper:
+
+```typescript
+function animate(
+	node: HTMLElement,
+	options?: {
+		animation?: AnimationType;    // Default: 'fade-in'
+		duration?: number;             // Default: 800
+		delay?: number;                // Default: 0
+		offset?: number;               // Optional trigger offset
+		threshold?: number;            // Default: 0
+		rootMargin?: string;           // Optional custom margin
+	}
+): { update?: (newOptions) => void; destroy?: () => void }
+```
+
+**Example:**
+
+```svelte
+<script>
+	import { animate } from 'rune-scroller';
+</script>
+
+<div use:animate={{ animation: 'fade-in-up', duration: 1000, delay: 200 }}>
+	Animated content
+</div>
+```
 
 ---
 
 ## 🏗️ Architecture
 
-### Animation System
+### Core Layer Architecture
 
-1. **animations.ts** - Configuration and validation
-2. **animations.css** - Reusable animation styles (exported via npm)
-3. **useIntersection.svelte.ts** - IntersectionObserver logic
-4. **BaseAnimated.svelte** - Base animation implementation
-5. **Rs.svelte** - Main component (one-time or repeating based on `repeat` prop)
+**Bottom Layer - Browser APIs & Utilities:**
+1. **animations.ts** - Animation type definitions, validation, and utilities
+2. **dom-utils.svelte.ts** - Reusable DOM manipulation utilities (CSS variables, animation setup, sentinel creation)
+3. **useIntersection.svelte.ts** - IntersectionObserver composables for element visibility detection
+
+**Middle Layer - Base Implementation:**
+4. **animate.svelte.ts** - Action for direct DOM node animation control
+5. **runeScroller.svelte.ts** - **Recommended** - Sentinel-based action for precise animation timing
+6. **BaseAnimated.svelte** - Base component handling intersection observer + animation logic
+
+**Top Layer - Consumer API:**
+7. **Rs.svelte** - Main unified component (supports one-time & repeating via `repeat` prop)
+
+**Styles:**
+- **animations.css** - All animation keyframes & styles (14 animations, GPU-accelerated)
 
 ### Key Principles
 
@@ -571,6 +806,45 @@ Returns `{ element, isVisible }` — `isVisible` toggles on each scroll.
 - **CSS-Based** : Animations use CSS transforms + transitions (hardware-accelerated)
 - **Type-Safe** : Full TypeScript support
 - **Composable** : Use hooks directly or wrapped components
+- **DRY (Don't Repeat Yourself)** : Utility functions eliminate code duplication
+- **Optimal DOM Manipulation** : Uses `cssText` for efficient single-statement styling
+
+---
+
+## 🚀 Optimizations
+
+### Recent Improvements (v1.1.0)
+
+**DOM Utility Extraction**
+- Extracted repeated DOM manipulation patterns into reusable utilities (`dom-utils.svelte.ts`)
+- `setCSSVariables()` - Centralizes CSS custom property management
+- `setupAnimationElement()` - Consistent animation class/attribute setup
+- `createSentinel()` - Optimized sentinel creation using single `cssText` statement
+- **Result**: Reduced code duplication, improved maintainability, cleaner codebase
+
+**Memory Leak Fixes**
+- Fixed potential memory leaks in repeat mode by tracking observer connection state
+- Observer now properly disconnects in destroy lifecycle
+- Prevents accumulation of observers on long-scroll pages
+- **Result**: Better performance on content-heavy sites with many animations
+
+**Observer Logic Improvements**
+- Fixed `animate.svelte.ts` to properly handle dynamic threshold/rootMargin changes
+- Observer now recreates when trigger options change at runtime
+- Maintains correct state throughout component lifecycle
+- **Result**: More reliable dynamic animation updates
+
+**Bundle Size Optimization**
+- Updated `.npmignore` to exclude test files from npm distribution
+- Removes `*.test.ts`, `*.test.js` and built test files
+- **Result**: ~3.6 KB reduction in package size
+
+### Performance Impact
+
+- **Code Size**: Reduced duplication without sacrificing readability
+- **Runtime Performance**: Fewer DOM operations via optimized `cssText` usage
+- **Memory Efficiency**: Proper observer cleanup prevents memory leaks
+- **Bundle Size**: Test files excluded from distribution
 
 ---
 
@@ -596,10 +870,22 @@ pnpm dev
 # Type checking
 pnpm check
 
+# Type checking in watch mode
+pnpm check:watch
+
 # Format code
 pnpm format
 
-# Preview build
+# Lint code
+pnpm lint
+
+# Build library for npm
+pnpm build
+
+# Run tests
+pnpm test
+
+# Preview built library
 pnpm preview
 ```
 
@@ -608,9 +894,10 @@ pnpm preview
 ## 📝 Notes
 
 - **Why "Rune"?** Svelte 5 uses **Runes** (`$state`, `$props()`) as core reactivity primitives
-- **Theme Name** : Granite + Electric Blue = Modern, minimalist aesthetic
-- **No Dependencies** : Pure Svelte 5 + Browser APIs
+- **Zero Dependencies** : Pure Svelte 5 + Native Browser APIs (IntersectionObserver)
 - **Extensible** : Add new animations by extending `animations.ts` and `animations.css`
+- **Library Only** : This is the library repository. The demo website is in `rune-scroller-site`
+- **Published as npm Package** : `rune-scroller` on npm registry
 
 ---
 

package/dist/animate.svelte.js

@@ -1,4 +1,5 @@
 import { calculateRootMargin } from './animations';
+import { setCSSVariables, setupAnimationElement } from './dom-utils.svelte';
 /**
  * Svelte action for scroll animations
  * Triggers animation once when element enters viewport
@@ -11,17 +12,15 @@ import { calculateRootMargin } from './animations';
  * ```
  */
 export const animate = (node, options = {}) => {
-    const { animation = 'fade-in', duration = 800, delay = 0, offset, threshold = 0, rootMargin } = options;
+    let { animation = 'fade-in', duration = 800, delay = 0, offset, threshold = 0, rootMargin } = options;
     // Calculate rootMargin from offset (0-100%)
-    const finalRootMargin = calculateRootMargin(offset, rootMargin);
-    // Set CSS custom properties for timing
-    node.style.setProperty('--duration', `${duration}ms`);
-    node.style.setProperty('--delay', `${delay}ms`);
-    // Add base animation class and data attribute
-    node.classList.add('scroll-animate');
-    node.setAttribute('data-animation', animation);
+    let finalRootMargin = calculateRootMargin(offset, rootMargin);
+    // Setup animation with utilities
+    setupAnimationElement(node, animation);
+    setCSSVariables(node, duration, delay);
     // Track if animation has been triggered
     let animated = false;
+    let observerConnected = true;
     // Create IntersectionObserver for one-time animation
     const observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
@@ -31,6 +30,7 @@ export const animate = (node, options = {}) => {
                 animated = true;
                 // Stop observing after animation triggers
                 observer.unobserve(node);
+                observerConnected = false;
             }
         });
     }, {
@@ -40,20 +40,40 @@ export const animate = (node, options = {}) => {
     observer.observe(node);
     return {
         update(newOptions) {
-            const { duration: newDuration = 800, delay: newDelay = 0, animation: newAnimation } = newOptions;
+            const { duration: newDuration, delay: newDelay, animation: newAnimation, offset: newOffset, threshold: newThreshold, rootMargin: newRootMargin } = newOptions;
             // Update CSS properties
-            if (newDuration !== duration) {
-                node.style.setProperty('--duration', `${newDuration}ms`);
+            if (newDuration !== undefined) {
+                duration = newDuration;
+                setCSSVariables(node, duration, newDelay ?? delay);
             }
-            if (newDelay !== delay) {
-                node.style.setProperty('--delay', `${newDelay}ms`);
+            if (newDelay !== undefined && newDelay !== delay) {
+                delay = newDelay;
+                setCSSVariables(node, duration, delay);
             }
             if (newAnimation && newAnimation !== animation) {
+                animation = newAnimation;
                 node.setAttribute('data-animation', newAnimation);
             }
+            // Recreate observer if threshold or rootMargin changed
+            if (newThreshold !== undefined || newOffset !== undefined || newRootMargin !== undefined) {
+                if (observerConnected) {
+                    observer.disconnect();
+                    observerConnected = false;
+                }
+                threshold = newThreshold ?? threshold;
+                offset = newOffset ?? offset;
+                rootMargin = newRootMargin ?? rootMargin;
+                finalRootMargin = calculateRootMargin(offset, rootMargin);
+                if (!animated) {
+                    observer.observe(node);
+                    observerConnected = true;
+                }
+            }
         },
         destroy() {
-            observer.disconnect();
+            if (observerConnected) {
+                observer.disconnect();
+            }
         }
     };
 };

package/dist/animations.d.ts

@@ -8,7 +8,7 @@
 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';
 /**
  * Calculate rootMargin for IntersectionObserver from offset or custom rootMargin
- * @param offset - Viewport offset (0-100). 0 = bottom trigger, 100 = top trigger
+ * @param offset - Viewport offset (0-100). 0 = bottom of viewport touches top of element, 100 = top of viewport touches top of element
  * @param rootMargin - Custom rootMargin string (takes precedence over offset)
  * @returns rootMargin string for IntersectionObserver
  */

package/dist/animations.js

@@ -3,7 +3,7 @@
  */
 /**
  * Calculate rootMargin for IntersectionObserver from offset or custom rootMargin
- * @param offset - Viewport offset (0-100). 0 = bottom trigger, 100 = top trigger
+ * @param offset - Viewport offset (0-100). 0 = bottom of viewport touches top of element, 100 = top of viewport touches top of element
  * @param rootMargin - Custom rootMargin string (takes precedence over offset)
  * @returns rootMargin string for IntersectionObserver
  */

package/dist/dom-utils.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { AnimationType } from './animations';
+/**
+ * Set CSS custom properties on an element
+ * @param element - Target DOM element
+ * @param duration - Animation duration in milliseconds
+ * @param delay - Animation delay in milliseconds
+ */
+export declare function setCSSVariables(element: HTMLElement, duration?: number, delay?: number): void;
+/**
+ * Setup animation element with required classes and attributes
+ * @param element - Target DOM element
+ * @param animation - Animation type to apply
+ */
+export declare function setupAnimationElement(element: HTMLElement, animation: AnimationType): void;
+/**
+ * Create and inject invisible sentinel element for observer-based triggering
+ * @param element - Reference element (sentinel will be placed after it)
+ * @returns The created sentinel element
+ */
+export declare function createSentinel(element: HTMLElement): HTMLElement;

package/dist/dom-utils.svelte.js

@@ -0,0 +1,33 @@
+/**
+ * Set CSS custom properties on an element
+ * @param element - Target DOM element
+ * @param duration - Animation duration in milliseconds
+ * @param delay - Animation delay in milliseconds
+ */
+export function setCSSVariables(element, duration, delay = 0) {
+    if (duration !== undefined) {
+        element.style.setProperty('--duration', `${duration}ms`);
+    }
+    element.style.setProperty('--delay', `${delay}ms`);
+}
+/**
+ * Setup animation element with required classes and attributes
+ * @param element - Target DOM element
+ * @param animation - Animation type to apply
+ */
+export function setupAnimationElement(element, animation) {
+    element.classList.add('scroll-animate');
+    element.setAttribute('data-animation', animation);
+}
+/**
+ * Create and inject invisible sentinel element for observer-based triggering
+ * @param element - Reference element (sentinel will be placed after it)
+ * @returns The created sentinel element
+ */
+export function createSentinel(element) {
+    const sentinel = document.createElement('div');
+    // Use cssText for efficient single-statement styling
+    sentinel.style.cssText = 'height:20px;margin-top:0.5rem;visibility:hidden';
+    element.parentNode?.insertBefore(sentinel, element.nextSibling);
+    return sentinel;
+}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { default as rs } from './Rs.svelte';
 export { animate } from './animate.svelte';
 export type { AnimateOptions } from './animate.svelte';
+export { runeScroller } from './runeScroller.svelte';
+export type { RuneScrollerOptions } from './runeScroller.svelte';
 export { useIntersection, useIntersectionOnce } from './useIntersection.svelte';
 export type { IntersectionOptions, UseIntersectionReturn } from './useIntersection.svelte';
 export { calculateRootMargin } from './animations';

package/dist/index.js

@@ -2,6 +2,7 @@
 export { default as rs } from './Rs.svelte';
 // Actions
 export { animate } from './animate.svelte';
+export { runeScroller } from './runeScroller.svelte';
 // Composables
 export { useIntersection, useIntersectionOnce } from './useIntersection.svelte';
 // Utilities

package/dist/runeScroller.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { AnimationType } from './animations';
+export interface RuneScrollerOptions {
+    animation?: AnimationType;
+    duration?: number;
+    repeat?: boolean;
+}
+/**
+ * Action pour animer un élément au scroll avec un sentinel invisible juste en dessous
+ * @param element - L'élément à animer
+ * @param options - Options d'animation (animation type, duration, et repeat)
+ * @returns Objet action Svelte
+ *
+ * @example
+ * ```svelte
+ * <!-- Animation une seule fois -->
+ * <div use:runeScroller={{ animation: 'fade-in-up', duration: 1000 }}>
+ *   Content
+ * </div>
+ *
+ * <!-- Animation répétée à chaque scroll -->
+ * <div use:runeScroller={{ animation: 'fade-in-up', duration: 1000, repeat: true }}>
+ *   Content
+ * </div>
+ * ```
+ */
+export declare function runeScroller(element: HTMLElement, options?: RuneScrollerOptions): {
+    update(newOptions?: RuneScrollerOptions): void;
+    destroy(): void;
+};

package/dist/runeScroller.svelte.js

@@ -0,0 +1,68 @@
+import { setCSSVariables, setupAnimationElement, createSentinel } from './dom-utils.svelte';
+/**
+ * Action pour animer un élément au scroll avec un sentinel invisible juste en dessous
+ * @param element - L'élément à animer
+ * @param options - Options d'animation (animation type, duration, et repeat)
+ * @returns Objet action Svelte
+ *
+ * @example
+ * ```svelte
+ * <!-- Animation une seule fois -->
+ * <div use:runeScroller={{ animation: 'fade-in-up', duration: 1000 }}>
+ *   Content
+ * </div>
+ *
+ * <!-- Animation répétée à chaque scroll -->
+ * <div use:runeScroller={{ animation: 'fade-in-up', duration: 1000, repeat: true }}>
+ *   Content
+ * </div>
+ * ```
+ */
+export function runeScroller(element, options) {
+    // Setup animation classes et variables CSS
+    if (options?.animation || options?.duration) {
+        setupAnimationElement(element, options.animation);
+        setCSSVariables(element, options.duration);
+    }
+    // Créer le sentinel invisible juste en dessous
+    const sentinel = createSentinel(element);
+    // Observer le sentinel avec cleanup tracking
+    let observerConnected = true;
+    const observer = new IntersectionObserver((entries) => {
+        const isIntersecting = entries[0].isIntersecting;
+        if (isIntersecting) {
+            // Ajouter la classe is-visible à l'élément
+            element.classList.add('is-visible');
+            // Déconnecter si pas en mode repeat
+            if (!options?.repeat) {
+                observer.disconnect();
+                observerConnected = false;
+            }
+        }
+        else if (options?.repeat) {
+            // En mode repeat, retirer la classe quand le sentinel sort
+            element.classList.remove('is-visible');
+        }
+    }, { threshold: 0 });
+    observer.observe(sentinel);
+    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 };
+            }
+        },
+        destroy() {
+            if (observerConnected) {
+                observer.disconnect();
+            }
+            sentinel.remove();
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rune-scroller",
-  "version": "0.0.2",
+  "version": "0.1.1",
   "description": "Lightweight, high-performance scroll animations for Svelte 5. ~2KB bundle, zero dependencies.",
   "type": "module",
   "sideEffects": false,
@@ -56,7 +56,6 @@
   "devDependencies": {
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.36.0",
-    "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/kit": "^2.43.2",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.0",

package/dist/assets/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>