// axi0 Motion 0.2.0: Lens warp. A lens follows the pointer and swells the letters under it, with red and blue fringes at its rim; at rest it drifts across on its own.
// Generated from src/lens-warp/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 LensWarpProps extends HTMLAttributes<HTMLElement> {
  /** Lens radius (default 1.3) */
  size?: number;
  /** How much it swells (default 0.5) */
  strength?: number;
  /** Drift on its own when nobody points (default true) */
  idle?: boolean;
  /** First fringe (default "#ff2e63") */
  color1?: string;
  /** Second fringe (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 LensWarp({ as = "div", size, strength, idle, color1, color2, ...rest }: LensWarpProps) {
  return createElement(as, { ...rest, "data-motion": "lens-warp", "data-motion-size": s(size), "data-motion-strength": s(strength), "data-motion-idle": s(idle), "data-motion-color1": s(color1), "data-motion-color2": s(color2) });
}

export default LensWarp;