Stamp Reveal

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface StampRevealProps {
  children: ReactNode;
  /** Delay before the stamp (s). Use it to stagger siblings. */
  delay?: number;
  /** Final tilt in degrees (0 = straight). */
  rotate?: number;
  /** Replay every time the element re-enters the viewport. */
  repeat?: boolean;
  /** Portion of the element that must be visible to trigger (0–1). */
  amount?: number;
  as?: "div" | "section" | "li" | "article";
  className?: string;
}

/**
 * Scroll-triggered entrance that "stamps" content onto the page: it drops from
 * slightly above at a larger scale, then snaps into place in 3 hard steps.
 */
export function StampReveal({ children, delay = 0, rotate = 0, repeat = false, amount = 0.4, as = "div", className }: StampRevealProps) {
  const reduce = useReducedMotion();
  const Component = motion[as];

  const variants: Variants = {
    hidden: { opacity: 0, scale: 1.25, rotate: rotate - 6, y: -24 },
    shown: {
      opacity: 1,
      scale: 1,
      rotate,
      y: 0,
      transition: { delay, duration: 0.32, ease: (t: number) => Math.ceil(t * 3) / 3 },
    },
  };

  // With reduced motion, `initial={false}` renders the final state immediately (same markup, no hydration mismatch).
  return (
    <Component
      className={cn("will-change-transform", className)}
      variants={variants}
      initial={reduce ? false : "hidden"}
      whileInView="shown"
      viewport={{ once: !repeat, amount }}
    >
      {children}
    </Component>
  );
}

export default StampReveal;