Reveal

1"use client";
2 
3import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
4 
5import { cn } from "@/lib/utils";
6 
7type RevealProps = {
8  children: ReactNode;
9  className?: string;
10  /** Y-offset applied before reveal (in pixels). */
11  y?: number;
12  /** Delay before the transition starts (in ms). */
13  delayMs?: number;
14  /** Observe once then disconnect. */
15  once?: boolean;
16  /** IntersectionObserver rootMargin. */
17  margin?: string;
18  /** IntersectionObserver threshold. */
19  threshold?: number | number[];
20};
21 
22/**
23 * Scroll-reveal wrapper. Server-renders as visible ("in") so content is never
24 * hidden without JavaScript; after mount, elements still below the viewport
25 * are set to "out" and revealed by an IntersectionObserver as they scroll in.
26 * Reduced-motion users are never hidden (the observer is skipped entirely,
27 * and the CSS `.reveal` reduced-motion block forces visibility regardless).
28 */
29export function Reveal({
30  children,
31  className,
32  y = 14,
33  delayMs = 0,
34  once = true,
35  margin = "0px 0px -10% 0px",
36  threshold = 0.15,
37}: RevealProps) {
38  const ref = useRef<HTMLDivElement>(null);
39  const [state, setState] = useState<"in" | "out">("in");
40 
41  useEffect(() => {
42    const el = ref.current;
43    if (!el || typeof IntersectionObserver === "undefined") return;
44    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
45 
46    // Only hide elements that start below the viewport — above-the-fold
47    // content keeps its mount animation and never flashes out.
48    if (el.getBoundingClientRect().top <= window.innerHeight) return;
49    setState("out");
50 
51    const observer = new IntersectionObserver(
52      (entries) => {
53        for (const entry of entries) {
54          if (entry.isIntersecting) {
55            setState("in");
56            if (once) observer.disconnect();
57          } else if (!once) {
58            setState("out");
59          }
60        }
61      },
62      { rootMargin: margin, threshold },
63    );
64    observer.observe(el);
65    return () => observer.disconnect();
66  }, [once, margin, threshold]);
67 
68  const style = {
69    "--reveal-y": `${y}px`,
70    "--reveal-delay": `${delayMs}ms`,
71  } as CSSProperties;
72 
73  return (
74    <div
75      ref={ref}
76      data-reveal-state={state}
77      className={cn("reveal", className)}
78      style={style}
79    >
80      {children}
81    </div>
82  );
83}