Rune Scroller
Enchanting scroll animations for Svelte 5, built with native performance and zero dependencies.
Getting Started
Install and start animating in seconds
Installation
Install the library using bun, npm, or pnpm:
bun add rune-scrollerBasic Usage
Use the runeScroller action on any element:
How It Works: Sentinel-Based Triggering
The secret to perfect animation timing
The Sentinel
The action creates an invisible sentinel - a tiny observer placed absolutely at the element's bottom. This sentinel stays fixed while the element animates, ensuring perfect scroll-triggered timing.
When you scroll, the sentinel enters the viewport, triggering the animation on the element above it. Completely invisible in production by default.
💡 Scroll down to see the animation examples below - sentinels are visible in debug mode!
✓ Stays fixed while element animates
✓ Invisible by default (1px height)
✓ Visible in Examples section with debug mode enabled
Perfect Timing
Animations trigger at exactly the right moment, every time
Responsive
Works consistently across all screen sizes and content heights
Performance
GPU-accelerated CSS with IntersectionObserver efficiency
Fade Animations
Fade In
Fade Up
Fade Down
Fade Left
Fade Right
Zoom Animations
Zoom In
Zoom Out
Zoom Up
Zoom Left
Zoom Right
Transform Animations
Flip
Flip X
Slide Rotate
Bounce In
Why Choose Rune Scroller?
Compare with other scroll animation libraries
| Feature | Rune Scroller | AOS Library |
|---|---|---|
| Bundle Size (gzipped) | 1.9 KB ⚡ | 4 KB |
| Svelte Projects Overhead | +1.9 KB | +4 KB |
| Size Advantage | 52% Smaller | - |
| Animation Method | GPU Accelerated CSS | JavaScript |
| Dependencies | Zero | Zero |
| Svelte 5 Optimized | ✓ Yes | ✗ No |
| Code Optimizations | Utility Extraction | None |
| Memory Leak Prevention | ✓ Built-in | - |
| Animations | 14 | 15+ |