// axi0 Motion 0.2.0: Scroll rise. Letters float up into place, stretched tall at first, as the text scrolls into view; the scroll drives every frame.
// Generated from src/scroll-rise/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 ScrollRiseProps extends HTMLAttributes<HTMLElement> {
  /** Head start of each letter (share of the scroll) (default 0.035) */
  stagger?: number;
  /** Stretch at the start (default 2.2) */
  stretch?: number;
  /** Starts when the top reaches (share of the window height) (default 1) */
  start?: number;
  /** Ends when the top reaches (default 0.55) */
  end?: number;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function ScrollRise({ as = "div", stagger, stretch, start, end, ...rest }: ScrollRiseProps) {
  return createElement(as, { ...rest, "data-motion": "scroll-rise", "data-motion-stagger": s(stagger), "data-motion-stretch": s(stretch), "data-motion-start": s(start), "data-motion-end": s(end) });
}

export default ScrollRise;