// axi0 Motion 0.2.0: Fuzz. The text shivers in torn slivers like a weak signal, with thin red and blue edges; hovering turns it up and a click jolts it.
// Generated from src/fuzz/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 FuzzProps extends HTMLAttributes<HTMLElement> {
  /** Fuzz at rest (default 0.18) */
  base?: number;
  /** Fuzz while hovered (default 0.5) */
  hover?: number;
  /** Widest shift (default 0.3) */
  range?: number;
  /** Sliver height (default 1) */
  band?: number;
  /** Direction of the shifts (default "x") */
  axis?: "x" | "y";
  /** Frames per second (default 60) */
  fps?: number;
  /** Red and blue edges (default true) */
  split?: boolean;
  /** First edge (default "#ff2e63") */
  color1?: string;
  /** Second edge (default "#08d9d6") */
  color2?: string;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function Fuzz({ as = "div", base, hover, range, band, axis, fps, split, color1, color2, ...rest }: FuzzProps) {
  return createElement(as, { ...rest, "data-motion": "fuzz", "data-motion-base": s(base), "data-motion-hover": s(hover), "data-motion-range": s(range), "data-motion-band": s(band), "data-motion-axis": s(axis), "data-motion-fps": s(fps), "data-motion-split": s(split), "data-motion-color1": s(color1), "data-motion-color2": s(color2) });
}

export default Fuzz;