Reveal

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "motion/react";

export interface RevealProps {
  children: React.ReactNode;
  /** Direction it comes from. */
  from?: "bottom" | "left" | "right" | "none";
  delay?: number;
  className?: string;
}

/** Fades and slides children in when they scroll into view, once. */
export function Reveal({ children, from = "bottom", delay = 0, className }: RevealProps) {
  const reduce = useReducedMotion();
  const offset = { bottom: { y: 16 }, left: { x: -16 }, right: { x: 16 }, none: {} }[from];
  return (
    <motion.div
      className={className}
      initial={reduce ? false : { opacity: 0, ...offset }}
      whileInView={{ opacity: 1, x: 0, y: 0 }}
      viewport={{ once: true, margin: "-8% 0px" }}
      transition={{ delay, duration: 0.5, ease: [0.2, 0.8, 0.2, 1] }}
    >
      {children}
    </motion.div>
  );
}

/** Staggers its direct children in as a group. */
export function Stagger({ children, gap = 0.06, className }: { children: React.ReactNode; gap?: number; className?: string }) {
  const reduce = useReducedMotion();
  return (
    <motion.div
      className={className}
      initial={reduce ? false : "hidden"}
      whileInView="show"
      viewport={{ once: true, margin: "-8% 0px" }}
      variants={{ hidden: {}, show: { transition: { staggerChildren: gap } } }}
    >
      {React.Children.map(children, (child) => (
        <motion.div variants={{ hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.2, 0.8, 0.2, 1] } } }}>{child}</motion.div>
      ))}
    </motion.div>
  );
}