1. Basic Reveal Animations
These elements will trigger beautifully as soon as they enter the viewport.
2. Staggered Children
Add `.scroll-stagger` to a parent to automatically delay `.scroll-*` children one by one.
Child 1
Automatically gets a 0ms delay.
Child 2
Automatically gets a 100ms delay.
Child 3
Automatically gets a 200ms delay.
3. Smooth Parallax
These boxes move at completely different speeds relative to the scroll bar.
4. Directional Image Reveals
Uses pseudo-elements to create a solid curtain that wipes away to reveal the image underneath.
.image-reveal-right
.image-reveal-left
.image-reveal-top
.image-reveal-bottom
.image-reveal-circle
.image-reveal-curtain
5. Text Scroll Animations
Gradient masks and blurs specifically designed for typography.
.scroll-text-reveal
Revealing text with a smooth mask
.scroll-text-gradient-reveal
Gradient masking for premium typography
.scroll-text-blur
De-blurring typography as you scroll
.scroll-stagger (Word/Letter Splitting)
Split text into individual words or letters!
6. Custom Durations
Control the exact speed of any scroll animation.
7. Ready-Made Website Animations
Don't want to remember classes? Just use these predefined combinations!
.card-scroll
Automatically applies fade-up and scale effects perfect for UI cards.
8. Core Parallax Engine
Power directly in Tailwind. Hybrid Mouse + Scroll, 3D Depth, Layers, and more!
Scroll Down ↓
To Move Right →
Like Pin
Beautiful API
Smooth 60FPS
Mouse Hybrid
Move your mouse to tilt and shift this card, works perfectly with scroll!
9. Scroll Snap + Animation Combo
Combine native Tailwind snap classes with our scroll reveals for presentation-like slides!
snap-active:scale-100
Custom variants trigger perfectly on snap!
Perfectly Snapped
Presentation Ready
Building landing pages has never been easier.
Horizontal Snapping
It works flawlessly for horizontal scroll too!
Horizontal 1
Slide 2
Driven purely by vertical scroll.
Horizontal 3
Cinematic horizontal timelines.
Vertical Parallax Track (New!)
Pin a container and scroll its contents vertically at a custom parallax speed.
Vertical 1
Keep scrolling down...
Vertical 2
This track moves slower than the page!
Vertical 3
Perfect for story-driven reveals.
10. SplitText Engine
Automatically split nested HTML and emojis into perfectly staggered characters or words.
Word Splitting (.text-split-words)
This paragraph is automatically split into individual words and staggered sequentially without breaking HTML! 🚀
Character Splitting (.text-split-chars)
Beautiful Character Reveals 🌟
Blur Character Splitting (.text-split-blur)