// axi0 Motion 0.2.0: Reveal. Content slides and fades into place the first time it scrolls into view.
// Generated from src/reveal/meta.json by motion-pack: a thin wrapper. The loader (motion.js) must be on the page once;
// it starts the effect on the element this renders. Options left out keep the effect's own defaults.
import { createElement } from "react";
import type { HTMLAttributes, ReactNode } from "react";

export interface RevealProps extends HTMLAttributes<HTMLElement> {
  /** where it comes from (default "below") */
  from?: "below" | "above" | "left" | "right" | "zoom" | "fade";
  /** how far it travels, in pixels (default 24) */
  distance?: number;
  /** milliseconds (default 700) */
  duration?: number;
  /** milliseconds before it starts (default 0) */
  delay?: number;
  /** reveal the children one by one, this many milliseconds apart (default 0) */
  stagger?: number;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

const s = (v: unknown) => (v === undefined ? undefined : String(v));

export function Reveal({ as = "div", from, distance, duration, delay, stagger, ...rest }: RevealProps) {
  return createElement(as, { ...rest, "data-motion": "reveal", "data-motion-from": s(from), "data-motion-distance": s(distance), "data-motion-duration": s(duration), "data-motion-delay": s(delay), "data-motion-stagger": s(stagger) });
}

export default Reveal;