// axi0 Motion 0.2.0: Mesh heading. A slow mesh of bright color with a sweeping light drifts inside the letters while the words rise into place one by one.
// Generated from src/mesh-heading/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 MeshHeadingProps extends HTMLAttributes<HTMLElement> {
  /** How fast the colors drift (0 = still) (default 1) */
  speed?: number;
  /** Delay from one word to the next (default 110) */
  stagger?: number;
  /** Five colors, comma separated (empty: a palette for the page's theme) (default auto) */
  colors?: string;
  /** A band of light passes over the letters (default true) */
  sheen?: boolean;
  /** A fine outline in the text color around each letter (default false) */
  outline?: boolean;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function MeshHeading({ as = "div", speed, stagger, colors, sheen, outline, ...rest }: MeshHeadingProps) {
  return createElement(as, { ...rest, "data-motion": "mesh-heading", "data-motion-speed": s(speed), "data-motion-stagger": s(stagger), "data-motion-colors": s(colors), "data-motion-sheen": s(sheen), "data-motion-outline": s(outline) });
}

export default MeshHeading;