Scroll Reveal

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4
5export default function ScrollReveal({ 
6  children, 
7  direction = "up", 
8  delay = 0 
9}) {
10  const directions = {
11    up: { y: 50, x: 0 },
12    down: { y: -50, x: 0 },
13    left: { x: 50, y: 0 },
14    right: { x: -50, y: 0 }
15  };
16
17  return (
18    <motion.div
19      initial={{ 
20        opacity: 0, 
21        ...directions[direction]
22      }}
23      whileInView={{ 
24        opacity: 1, 
25        x: 0, 
26        y: 0 
27      }}
28      viewport={{ once: true, margin: "-10%" }}
29      transition={{ 
30        duration: 0.8, 
31        delay, 
32        ease: "easeOut" 
33      }}
34      className="w-full"
35    >
36      {children || (
37        <div className="w-full min-h-[300px] flex items-center justify-center bg-[#111115] border border-white/10 rounded-2xl p-8">
38          <div className="text-center space-y-4">
39            <h3 className="text-3xl font-bold text-white">Scroll Reveal</h3>
40            <p className="text-gray-400 max-w-sm">
41              This component will automatically animate into view when it enters the viewport. Perfect for landing pages and long-form content.
42            </p>
43          </div>
44        </div>
45      )}
46    </motion.div>
47  );
48}
49