Scroll-Driven
Animations
Reimagined.
The most advanced pure CSS scroll animation library. 45+ effects, zero JavaScript, complete browser fallbacks. Built for designers who demand perfection.
Scroll-Driven Animation Engine
15+ effect variants. One attribute. Infinite possibilities.
Add data-roopm-effect to any element.
10 Premium Text Effects
Word-by-word, letter-by-letter, or full-text reveals — each effect triggered perfectly as content enters the viewport.
Liquid Morph Text
GLITCH SHATTER
Magnetic Pull Force
NEON STRIKE
Holo Rise Effect
SHOCKWAVE
Phantom Typewriter
Gravity Drop Fall
Void Emerge
Aurora Gradient Wipe
8 Cinematic Mask Reveals
Film-quality reveal animations using pure CSS clip-path geometry. Apply to cards, images, or any block element.
Parallax Depth System
Scroll to see the image drift vertically
Scroll to see the image drift horizontally
Scroll Scrubbing Effects
Animations that scrub directly with your scroll position.
Horizontal Scroll System
Sticky horizontal scroll powered entirely by CSS scroll timelines.
Horizontal Scroll
Pure CSS scroll-driven horizontal progression. No JavaScript required.
Zero Dependencies
No GSAP. No ScrollMagic. No plugins. Just CSS and a browser.
Silky Smooth
GPU-accelerated transforms deliver buttery 60fps performance everywhere.
Fully Responsive
Adaptive layouts that look stunning on every screen size and device.
Premium Output
Production-ready animations that rival the best motion design studios.
Stacking Card System
Cards stack and compress as you scroll past them. A premium storytelling pattern.
Design System
Start with a robust token system. Colors, spacing, typography — all defined as CSS custom properties for maximum flexibility.
Animation Engine
Layer the scroll animation system on top. One master keyframe drives all effect variants through CSS custom properties.
Premium Features
Add the advanced feature set — 15 typography effects, cinematic masks, parallax, horizontal scroll, and more. All CSS.
Ship It
Deploy a production-ready experience that loads fast, performs flawlessly, and impresses everyone who encounters it.
Viewport Pin System
Pin any section while content scrolls into view — perfect for hero moments.
This section is pinned while you scroll
The container is 300vh tall but the content stays fixed in place. Scroll through this moment.
15 Advanced Typography Features
The most ambitious pure CSS typography system ever assembled. Each feature is a complete scroll-driven experience.
Pure CSS word cycling with a glowing caret. Zero JS.
Every word lights up as you scroll through this section.
Scroll to watch the outline fill with gradient colour.
SVG stroke-dashoffset animated by scroll timeline, then fills with color.
Scale + blur animates like a cinematic camera focus pull.
RGB channel splitting + polygon clip-path layers simulate real chromatic glitch.
Multi-stop gradient background mask with animated glow aura layer.
Each letter flies in from a unique 3D position and assembles on scroll.
Bento Grid Layout
Asymmetric 20-column grid system for building editorial layouts.
rm-c1
Spans 7 columns × 2 rows. Use for hero content, large images, or primary features.
Mid-top cell — 6 columns.
Mid-bottom cell — 6 columns.
Right Column
7 columns × 3 rows tall.
Bottom-left. 6 cols.
Bottom-center. 7 cols.