Reveal

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7type RevealProps = {
8  as?: React.ElementType
9  delay?: number
10  once?: boolean
11  id?: string
12  className?: string
13  children: React.ReactNode
14}
15 
16/**
17 * IntersectionObserver reveal. Pair with `.atro-reveal` / `.atro-reveal-in` CSS.
18 */
19export function Reveal({
20  as,
21  delay = 0,
22  once = true,
23  id,
24  className,
25  children,
26}: RevealProps) {
27  const Tag = (as ?? "div") as React.ElementType
28  const ref = React.useRef<HTMLElement | null>(null)
29  const [inView, setInView] = React.useState(false)
30 
31  React.useEffect(() => {
32    const node = ref.current
33    if (!node) return
34    if (typeof IntersectionObserver === "undefined") {
35      setInView(true)
36      return
37    }
38    const io = new IntersectionObserver(
39      ([entry]) => {
40        if (entry?.isIntersecting) {
41          setInView(true)
42          if (once) io.disconnect()
43        } else if (!once) {
44          setInView(false)
45        }
46      },
47      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
48    )
49    io.observe(node)
50    return () => io.disconnect()
51  }, [once])
52 
53  return (
54    <Tag
55      id={id}
56      ref={ref as React.Ref<HTMLElement>}
57      className={cn("atro-reveal", inView && "atro-reveal-in", className)}
58      style={delay ? { animationDelay: `${delay}ms` } : undefined}
59    >
60      {children}
61    </Tag>
62  )
63}