Scroll Animation for React

'use client'
import { useEffect, useRef, useState } from 'react'
export function RevealOnScroll({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null)
  const [visible, setVisible] = useState(false)
  useEffect(() => {
    const node = ref.current
    if (!node) return
    const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect() } }, { threshold: 0.2 })
    observer.observe(node)
    return () => observer.disconnect()
  }, [])
  return <div ref={ref} className={'transition duration-700 motion-reduce:transition-none ' + (visible ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0')}>{children}</div>
}