Scroll Down
Content below will reveal as it enters the viewport.
Scroll back to the top to reset the animation!
Scroll Card 1
This card animated once and will stay here.
Scroll Card 2
This card animated once and will stay here.
Scroll Card 3
This card animated once and will stay here.
Scroll Card 4
This card animated once and will stay here.
Scroll Card 5
This card animated once and will stay here.
Scroll Card 6
This card animated once and will stay here.
Overview
A utility component that triggers smooth entry animations when its children enter the viewport. Supports multiple animation presets (fade, slide, scale, blur) and child staggering.
Usage
import { ScrollReveal } from "@/components/creative/scroll-reveal"
<ScrollReveal animation="slide-up" duration={0.8}>
<h1>Reveal me when scrolled into view!</h1>
</ScrollReveal>
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ScrollReveal } from "@/components/creative/scroll-reveal";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ScrollReveal } from "@/components/creative/scroll-reveal";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ScrollReveal
animation{/* value */}
duration{10}
delay{10}
>
<div>Content goes here</div>
</ScrollReveal>
</div>
);
}