28 lines
679 B
TypeScript
28 lines
679 B
TypeScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import { motion, useInView } from 'framer-motion'
|
|
|
|
interface ScrollRevealProps {
|
|
children: React.ReactNode
|
|
className?: string
|
|
delay?: number
|
|
}
|
|
|
|
export default function ScrollReveal({ children, className = '', delay = 0 }: ScrollRevealProps) {
|
|
const ref = useRef(null)
|
|
const isInView = useInView(ref, { once: true, margin: '-100px' })
|
|
|
|
return (
|
|
<motion.div
|
|
ref={ref}
|
|
className={className}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
|
transition={{ duration: 0.8, delay, ease: 'easeOut' }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
)
|
|
}
|