Scroll Reveal Animation Implementation

I'll create a scroll-triggered animation similar to the one in your video using Next.js, TypeScript, and shadcn/ui components.

How It Works

1. useScrollAnimation Hook: This custom hook uses the Intersection Observer API to detect when elements enter the viewport.

2. AnimatedElement Component: A reusable component that:

   • Accepts different animation variants (fadeUp, fadeIn, slideInLeft, etc.)
   • Supports configurable animation delays
   • Automatically animates when scrolled into view

3. Implementation: The demo page shows several sections with different animation styles:

   • Fade up animations for the main content
   • Staggered animations for cards (they animate in sequence)
   • Slide-in animations from left and right for testimonials

How to Use

To add this animation to any element in your project:

Available Animation Variants

• fadeUp: Elements fade in while moving up (default)
• fadeIn: Simple fade in with no movement
• scaleUp: Elements fade in while scaling up
• slideInRight: Elements slide in from the right
• slideInLeft: Elements slide in from the left

Available Delay Options

• none: No delay (default)
• short: 100ms delay
• medium: 300ms delay
• long: 500ms delay
• longer: 700ms delay

This implementation provides a clean, reusable solution that matches the animation style in your video while using shadcn/ui components and Next.js best practices.