Scroll Reveal
Reveal content with smooth animations as users scroll through your page. Built with Framer Motion for performance and flexibility.
Unlock Advanced Scroll Reveal Features
Get access to powerful pro features that enhance your scroll reveal component with advanced capabilities, premium styling options, and optimized performance.
Pro Features
Unlock advanced capabilities with the Pro version
7 Animation Types
Fade, slide, zoom, flip, bounce, rotate and blur — a distinct entrance for every section, selected via the animation prop
Cascade & Stagger
Reveal the direct children of a single wrapper in sequence with cascade or stagger, each with its own millisecond delay
Parallax Scrolling
Bind an element's vertical offset to scroll position with a configurable parallaxSpeed for a sense of depth
Responsive & Lifecycle
Toggle animations per breakpoint with mobile/desktop and hook into onReveal / onComplete callbacks
Installation
Install via CLI
npx @moontra/moonui-cli add scroll-revealUsage
Basic Usage
Slide Up Animation
This content slides up when it enters the viewport
Slide Left Animation
This content slides from the left with a delay
Slide Right Animation
This content slides from the right with more delay
Final Animation
Last element to appear for better scroll experience
Pro Usage
Zoom Reveal
The Pro component adds 7 animation types, cascade, stagger and parallax
Examples
SaaS Platform Hero with Trust Indicators
Enterprise-grade landing hero with company logos and social proof
Scale Your Business
with CloudFlow
Join 50,000+ companies using our platform to automate workflows, increase productivity by 300%, and reduce operational costs by 40%
Trusted by industry leaders
Feature Grid Showcase
Professional feature presentation with staggered animations
Lightning Fast
Sub-millisecond response times with global edge deployment
Enterprise Security
Bank-grade encryption with SOC 2 Type II compliance
Auto Scaling
Handle millions of requests with automatic infrastructure scaling
Real-time Analytics
Live insights with interactive dashboards and custom reports
Team Collaboration
Built-in collaboration tools with role-based access control
API Integration
Connect with 1000+ services through our REST and GraphQL APIs
Tech Stack Showcase with Gradient Animations
Professional technology grid with hover effects and gradient backgrounds
Built with Modern Technologies
Enterprise-grade tools and frameworks
React
v18.2
UI Library
TypeScript
v5.0
Type Safety
Next.js
v14
Framework
Tailwind
v3.4
Styling
Node.js
v20
Backend
PostgreSQL
v15
Database
Redis
v7
Caching
Docker
v24
Container
AWS
Latest
Cloud
GraphQL
v16
API
Jest
v29
Testing
Webpack
v5
Bundler
Statistics Dashboard with Animated Counters
Professional metrics display with number animations and progress indicators
Real-Time Performance Metrics
Live data visualization with animated counters
$2.4M
Total Revenue
vs last quarter
48,352
Active Users
30-day active
3,847
Total Orders
This month
94.2%
Satisfaction
Customer score
1.8s
Avg Response
API latency
99.9%
Uptime
Last 30 days
1,234
Support Tickets
Open tickets
156K
API Calls
Daily average
Seven Animation Types
Pro ScrollReveal ships seven distinct entrance animations — fade, slide, zoom, flip, bounce, rotate and blur — chosen per element via the animation prop. Durations and delays are in milliseconds (the free component uses seconds).
Seven Ways to Reveal
Set the animation prop per element — timing is in milliseconds
Fade
animation="fade"Slide
animation="slide"Zoom
animation="zoom"Bounce
animation="bounce"Rotate
animation="rotate"Blur
animation="blur"Cascade Children in One Wrapper
Enable cascade with cascadeDelay to reveal the direct children of a single ScrollReveal one after another — no separate container/item components needed. cascadeDelay is in milliseconds.
Onboarding Steps
One wrapper, 120ms cascadeDelay between each child
Create your account
Sign up in under a minute — no credit card required
Configure your workspace
Pick a theme, invite teammates and connect integrations
Set your first goal
Define a metric and let automation track your progress
Scale with confidence
Upgrade anytime as your team and traffic grow
Parallax Scrolling Depth
Turn on parallax with parallaxSpeed to bind an element's vertical offset to scroll position, creating a sense of depth. Parallax is exclusive to the Pro component.
Depth on Scroll
Each panel moves at its own parallaxSpeed as you scroll
Enterprise Security
SOC 2 Type II with end-to-end encryption
parallaxSpeed=0.25Blazing Performance
Global edge network with sub-second responses
parallaxSpeed=0.45Worldwide Reach
Deploy to 30+ regions with a single click
parallaxSpeed=0.65Staggered Grid
Use stagger with staggerDelay to offset each child's entrance inside a single ScrollReveal — perfect for card grids. staggerDelay is in milliseconds.
Feature Grid
A single wrapper staggers all children by 90ms each
Fast Setup
Secure
Collaborative
Scalable
Top Rated
Global
Premium
Reliable
Per-Breakpoint Control (mobile / desktop)
Turn the animation off for one breakpoint class without branching your JSX. `mobile={false}` skips the animation on viewports ≤ 768px, `desktop={false}` skips it above that — in both cases the content still renders, fully visible and unanimated, so nothing is ever hidden from a user or a crawler. Use it to keep motion off small screens (where entrance animations compete with scrolling) while keeping it on the desktop hero.
Animate Where It Helps
Resize the window across 768px to see each card switch between animated and static
Desktop only
mobile={false}Slides up above 768px; renders instantly below it.
Mobile only
desktop={false}Zooms in at 768px and below; renders instantly above it.