@timbal-ai/timbal-react 1.3.0 → 1.5.0

package/dist/site.d.cts

@@ -0,0 +1,184 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Entrance styles. `mask-up` clips the child and slides it in from below. */
+type RevealVariant = "fade" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | "blur" | "scale" | "mask-up";
+interface RevealProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Entrance style. Default `fade-up`. */
+    variant?: RevealVariant;
+    /** Seconds before the animation starts. */
+    delay?: number;
+    /** Animation duration in seconds. Default {@link DURATION.base}. */
+    duration?: number;
+    /** Slide distance in px for the directional + mask variants. Default 28. */
+    distance?: number;
+    /**
+     * Fraction of the element that must be visible before it animates (0–1), or
+     * `"some"` / `"all"`. Default 0.3.
+     */
+    amount?: number | "some" | "all";
+    /** Replay every time the element re-enters the viewport. Default `false`. */
+    repeat?: boolean;
+    /** Render as a different intrinsic element (e.g. `"section"`, `"li"`). */
+    as?: keyof React.JSX.IntrinsicElements;
+    children?: React.ReactNode;
+}
+/**
+ * Reveal a block when it scrolls into view. Honours `prefers-reduced-motion`
+ * (renders immediately, no transform) and SSR (no layout shift — the element
+ * occupies its space from first paint).
+ *
+ * ```tsx
+ * <Reveal variant="fade-up" delay={0.1}>
+ *   <h2>Built for the long run</h2>
+ * </Reveal>
+ * ```
+ */
+declare const Reveal: React.ForwardRefExoticComponent<RevealProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TextRevealProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
+    /** The text to reveal. Plain string only (split into tokens internally). */
+    children: string;
+    /** Split granularity. `words` (default) animates word-by-word; `lines` splits on `\n`. */
+    splitBy?: "words" | "lines";
+    /** Seconds between each token's entrance. Default 0.06. */
+    stagger?: number;
+    /** Seconds before the first token animates. Default 0. */
+    delay?: number;
+    /** Per-token duration in seconds. Default {@link DURATION.base}. */
+    duration?: number;
+    /** Replay every time it re-enters the viewport. Default `false`. */
+    repeat?: boolean;
+    /** Visibility fraction before animating (0–1). Default 0.4. */
+    amount?: number;
+    /** Render the wrapper as a block-level heading element instead of an inline span. */
+    as?: "span" | "h1" | "h2" | "h3" | "h4" | "p";
+}
+/**
+ * Reveal text token-by-token with a masked slide-up — the signature
+ * editorial/luxury headline entrance. Each word (or line) rides up out of an
+ * `overflow-hidden` clip on a stagger. Collapses to static text under
+ * `prefers-reduced-motion`.
+ *
+ * ```tsx
+ * <TextReveal as="h1" className="text-6xl font-semibold" stagger={0.08}>
+ *   Every step forward
+ * </TextReveal>
+ * ```
+ */
+declare function TextReveal({ children, splitBy, stagger, delay, duration, repeat, amount, as, className, ...rest }: TextRevealProps): react_jsx_runtime.JSX.Element;
+
+interface ParallaxProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Parallax strength. Positive values drift the element *slower* than scroll
+     * (it lags behind); negative values push it ahead. Roughly the fraction of
+     * the element's travel to offset. Sensible range -0.6…0.6. Default 0.2.
+     */
+    speed?: number;
+    /** Axis to translate along. Default `"y"`. */
+    axis?: "x" | "y";
+    /** Smooth the motion with a spring (avoids jitter on fast scroll). Default `true`. */
+    smooth?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Translate a layer relative to scroll for depth. Drives off the element's own
+ * position in the viewport (no global scroll listener), so multiple parallax
+ * layers compose cheaply. No-op under `prefers-reduced-motion`.
+ *
+ * ```tsx
+ * <Parallax speed={0.3}>
+ *   <img src={hero} alt="" className="h-full w-full object-cover" />
+ * </Parallax>
+ * ```
+ */
+declare const Parallax: React.ForwardRefExoticComponent<ParallaxProps & React.RefAttributes<HTMLDivElement>>;
+
+interface MarqueeProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Scroll speed in px/second. Default 60. */
+    speed?: number;
+    /** Travel direction. Default `"left"`. */
+    direction?: "left" | "right";
+    /** Pause while hovered. Default `true`. */
+    pauseOnHover?: boolean;
+    /** Gap between the repeated content groups (any CSS length). Default `"3rem"`. */
+    gap?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Seamless infinite marquee. Duplicates its children and advances a single
+ * motion value per frame, wrapping at the content width so there is no visible
+ * seam. Frame-rate independent (uses elapsed delta). Renders a static,
+ * horizontally-scrollable row under `prefers-reduced-motion`.
+ *
+ * ```tsx
+ * <Marquee speed={40} className="py-6">
+ *   {logos.map((l) => <img key={l.id} src={l.src} alt={l.name} className="h-8" />)}
+ * </Marquee>
+ * ```
+ */
+declare const Marquee: React.ForwardRefExoticComponent<MarqueeProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Shared motion tokens for the expressive `/site` layer.
+ *
+ * These are deliberately *opinionated but restrained* — the defaults produce
+ * the kind of confident, weighted motion seen on award-tier marketing sites
+ * (slow-out cubic-bezier, ~0.7–1s durations) rather than the snappy 150ms
+ * micro-interactions the app kit favours. Override per-component when a brief
+ * calls for it.
+ */
+/** Cubic-bezier easings as `[x1, y1, x2, y2]` tuples (motion's `ease` format). */
+declare const EASE: {
+    /** Strong slow-out — the workhorse for entrances and reveals. */
+    readonly out: readonly [0.16, 1, 0.3, 1];
+    /** Symmetric in-out for loops and continuous motion. */
+    readonly inOut: readonly [0.65, 0, 0.35, 1];
+    /** Gentle in-out, good for parallax / large translations. */
+    readonly soft: readonly [0.4, 0, 0.2, 1];
+};
+/** Default durations (seconds) for the expressive layer. */
+declare const DURATION: {
+    readonly fast: 0.4;
+    readonly base: 0.7;
+    readonly slow: 1.1;
+};
+/** Spring presets for pointer-driven motion (Magnetic, etc.). */
+declare const SPRING: {
+    /** Tight, responsive follow. */
+    readonly snappy: {
+        readonly stiffness: 350;
+        readonly damping: 30;
+        readonly mass: 0.4;
+    };
+    /** Looser, more elastic follow. */
+    readonly smooth: {
+        readonly stiffness: 150;
+        readonly damping: 20;
+        readonly mass: 0.6;
+    };
+};
+
+interface MagneticProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** How far the element follows the pointer, as a fraction of the cursor offset. Default 0.35. */
+    strength?: number;
+    /** Max travel in px in any direction (clamps `strength` on large elements). Default 24. */
+    max?: number;
+    /** Spring feel. Default `"snappy"`. */
+    spring?: keyof typeof SPRING;
+    children?: React.ReactNode;
+}
+/**
+ * Make a child element drift toward the cursor while hovered, springing back
+ * on leave — the classic "magnetic" CTA / nav affordance. Wrap a single
+ * interactive child (button, link). No-op under `prefers-reduced-motion`.
+ *
+ * ```tsx
+ * <Magnetic strength={0.4}>
+ *   <Button>Shop the drop</Button>
+ * </Magnetic>
+ * ```
+ */
+declare const Magnetic: React.ForwardRefExoticComponent<MagneticProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DURATION, EASE, Magnetic, type MagneticProps, Marquee, type MarqueeProps, Parallax, type ParallaxProps, Reveal, type RevealProps, type RevealVariant, SPRING, TextReveal, type TextRevealProps };

package/dist/site.d.ts

@@ -0,0 +1,184 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Entrance styles. `mask-up` clips the child and slides it in from below. */
+type RevealVariant = "fade" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | "blur" | "scale" | "mask-up";
+interface RevealProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Entrance style. Default `fade-up`. */
+    variant?: RevealVariant;
+    /** Seconds before the animation starts. */
+    delay?: number;
+    /** Animation duration in seconds. Default {@link DURATION.base}. */
+    duration?: number;
+    /** Slide distance in px for the directional + mask variants. Default 28. */
+    distance?: number;
+    /**
+     * Fraction of the element that must be visible before it animates (0–1), or
+     * `"some"` / `"all"`. Default 0.3.
+     */
+    amount?: number | "some" | "all";
+    /** Replay every time the element re-enters the viewport. Default `false`. */
+    repeat?: boolean;
+    /** Render as a different intrinsic element (e.g. `"section"`, `"li"`). */
+    as?: keyof React.JSX.IntrinsicElements;
+    children?: React.ReactNode;
+}
+/**
+ * Reveal a block when it scrolls into view. Honours `prefers-reduced-motion`
+ * (renders immediately, no transform) and SSR (no layout shift — the element
+ * occupies its space from first paint).
+ *
+ * ```tsx
+ * <Reveal variant="fade-up" delay={0.1}>
+ *   <h2>Built for the long run</h2>
+ * </Reveal>
+ * ```
+ */
+declare const Reveal: React.ForwardRefExoticComponent<RevealProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TextRevealProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
+    /** The text to reveal. Plain string only (split into tokens internally). */
+    children: string;
+    /** Split granularity. `words` (default) animates word-by-word; `lines` splits on `\n`. */
+    splitBy?: "words" | "lines";
+    /** Seconds between each token's entrance. Default 0.06. */
+    stagger?: number;
+    /** Seconds before the first token animates. Default 0. */
+    delay?: number;
+    /** Per-token duration in seconds. Default {@link DURATION.base}. */
+    duration?: number;
+    /** Replay every time it re-enters the viewport. Default `false`. */
+    repeat?: boolean;
+    /** Visibility fraction before animating (0–1). Default 0.4. */
+    amount?: number;
+    /** Render the wrapper as a block-level heading element instead of an inline span. */
+    as?: "span" | "h1" | "h2" | "h3" | "h4" | "p";
+}
+/**
+ * Reveal text token-by-token with a masked slide-up — the signature
+ * editorial/luxury headline entrance. Each word (or line) rides up out of an
+ * `overflow-hidden` clip on a stagger. Collapses to static text under
+ * `prefers-reduced-motion`.
+ *
+ * ```tsx
+ * <TextReveal as="h1" className="text-6xl font-semibold" stagger={0.08}>
+ *   Every step forward
+ * </TextReveal>
+ * ```
+ */
+declare function TextReveal({ children, splitBy, stagger, delay, duration, repeat, amount, as, className, ...rest }: TextRevealProps): react_jsx_runtime.JSX.Element;
+
+interface ParallaxProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Parallax strength. Positive values drift the element *slower* than scroll
+     * (it lags behind); negative values push it ahead. Roughly the fraction of
+     * the element's travel to offset. Sensible range -0.6…0.6. Default 0.2.
+     */
+    speed?: number;
+    /** Axis to translate along. Default `"y"`. */
+    axis?: "x" | "y";
+    /** Smooth the motion with a spring (avoids jitter on fast scroll). Default `true`. */
+    smooth?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Translate a layer relative to scroll for depth. Drives off the element's own
+ * position in the viewport (no global scroll listener), so multiple parallax
+ * layers compose cheaply. No-op under `prefers-reduced-motion`.
+ *
+ * ```tsx
+ * <Parallax speed={0.3}>
+ *   <img src={hero} alt="" className="h-full w-full object-cover" />
+ * </Parallax>
+ * ```
+ */
+declare const Parallax: React.ForwardRefExoticComponent<ParallaxProps & React.RefAttributes<HTMLDivElement>>;
+
+interface MarqueeProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Scroll speed in px/second. Default 60. */
+    speed?: number;
+    /** Travel direction. Default `"left"`. */
+    direction?: "left" | "right";
+    /** Pause while hovered. Default `true`. */
+    pauseOnHover?: boolean;
+    /** Gap between the repeated content groups (any CSS length). Default `"3rem"`. */
+    gap?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Seamless infinite marquee. Duplicates its children and advances a single
+ * motion value per frame, wrapping at the content width so there is no visible
+ * seam. Frame-rate independent (uses elapsed delta). Renders a static,
+ * horizontally-scrollable row under `prefers-reduced-motion`.
+ *
+ * ```tsx
+ * <Marquee speed={40} className="py-6">
+ *   {logos.map((l) => <img key={l.id} src={l.src} alt={l.name} className="h-8" />)}
+ * </Marquee>
+ * ```
+ */
+declare const Marquee: React.ForwardRefExoticComponent<MarqueeProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Shared motion tokens for the expressive `/site` layer.
+ *
+ * These are deliberately *opinionated but restrained* — the defaults produce
+ * the kind of confident, weighted motion seen on award-tier marketing sites
+ * (slow-out cubic-bezier, ~0.7–1s durations) rather than the snappy 150ms
+ * micro-interactions the app kit favours. Override per-component when a brief
+ * calls for it.
+ */
+/** Cubic-bezier easings as `[x1, y1, x2, y2]` tuples (motion's `ease` format). */
+declare const EASE: {
+    /** Strong slow-out — the workhorse for entrances and reveals. */
+    readonly out: readonly [0.16, 1, 0.3, 1];
+    /** Symmetric in-out for loops and continuous motion. */
+    readonly inOut: readonly [0.65, 0, 0.35, 1];
+    /** Gentle in-out, good for parallax / large translations. */
+    readonly soft: readonly [0.4, 0, 0.2, 1];
+};
+/** Default durations (seconds) for the expressive layer. */
+declare const DURATION: {
+    readonly fast: 0.4;
+    readonly base: 0.7;
+    readonly slow: 1.1;
+};
+/** Spring presets for pointer-driven motion (Magnetic, etc.). */
+declare const SPRING: {
+    /** Tight, responsive follow. */
+    readonly snappy: {
+        readonly stiffness: 350;
+        readonly damping: 30;
+        readonly mass: 0.4;
+    };
+    /** Looser, more elastic follow. */
+    readonly smooth: {
+        readonly stiffness: 150;
+        readonly damping: 20;
+        readonly mass: 0.6;
+    };
+};
+
+interface MagneticProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** How far the element follows the pointer, as a fraction of the cursor offset. Default 0.35. */
+    strength?: number;
+    /** Max travel in px in any direction (clamps `strength` on large elements). Default 24. */
+    max?: number;
+    /** Spring feel. Default `"snappy"`. */
+    spring?: keyof typeof SPRING;
+    children?: React.ReactNode;
+}
+/**
+ * Make a child element drift toward the cursor while hovered, springing back
+ * on leave — the classic "magnetic" CTA / nav affordance. Wrap a single
+ * interactive child (button, link). No-op under `prefers-reduced-motion`.
+ *
+ * ```tsx
+ * <Magnetic strength={0.4}>
+ *   <Button>Shop the drop</Button>
+ * </Magnetic>
+ * ```
+ */
+declare const Magnetic: React.ForwardRefExoticComponent<MagneticProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DURATION, EASE, Magnetic, type MagneticProps, Marquee, type MarqueeProps, Parallax, type ParallaxProps, Reveal, type RevealProps, type RevealVariant, SPRING, TextReveal, type TextRevealProps };

package/dist/site.esm.js

@@ -0,0 +1,322 @@
+import {
+  cn
+} from "./chunk-EDEKQYSU.esm.js";
+
+// src/site/Reveal.tsx
+import * as React from "react";
+import { motion, useReducedMotion } from "motion/react";
+
+// src/site/easing.ts
+var EASE = {
+  /** Strong slow-out — the workhorse for entrances and reveals. */
+  out: [0.16, 1, 0.3, 1],
+  /** Symmetric in-out for loops and continuous motion. */
+  inOut: [0.65, 0, 0.35, 1],
+  /** Gentle in-out, good for parallax / large translations. */
+  soft: [0.4, 0, 0.2, 1]
+};
+var DURATION = {
+  fast: 0.4,
+  base: 0.7,
+  slow: 1.1
+};
+var SPRING = {
+  /** Tight, responsive follow. */
+  snappy: { stiffness: 350, damping: 30, mass: 0.4 },
+  /** Looser, more elastic follow. */
+  smooth: { stiffness: 150, damping: 20, mass: 0.6 }
+};
+
+// src/site/Reveal.tsx
+import { jsx } from "react/jsx-runtime";
+function hidden(variant, distance) {
+  switch (variant) {
+    case "fade":
+      return { opacity: 0 };
+    case "fade-up":
+      return { opacity: 0, y: distance };
+    case "fade-down":
+      return { opacity: 0, y: -distance };
+    case "fade-left":
+      return { opacity: 0, x: distance };
+    case "fade-right":
+      return { opacity: 0, x: -distance };
+    case "blur":
+      return { opacity: 0, filter: "blur(12px)" };
+    case "scale":
+      return { opacity: 0, scale: 0.94 };
+    case "mask-up":
+      return { y: "110%" };
+  }
+}
+function shown(variant) {
+  if (variant === "mask-up") return { y: "0%" };
+  if (variant === "blur") return { opacity: 1, filter: "blur(0px)" };
+  if (variant === "scale") return { opacity: 1, scale: 1 };
+  return { opacity: 1, x: 0, y: 0 };
+}
+var Reveal = React.forwardRef(function Reveal2({
+  variant = "fade-up",
+  delay = 0,
+  duration = DURATION.base,
+  distance = 28,
+  amount = 0.3,
+  repeat = false,
+  as = "div",
+  className,
+  children,
+  ...rest
+}, ref) {
+  const reduce = useReducedMotion();
+  const isMask = variant === "mask-up";
+  if (reduce) {
+    const Tag = as;
+    return /* @__PURE__ */ jsx(Tag, { ref, className: cn(isMask && "overflow-hidden", className), ...rest, children });
+  }
+  const variants = {
+    hidden: hidden(variant, distance),
+    shown: shown(variant)
+  };
+  const MotionTag = motion[as] ?? motion.div;
+  const inner = /* @__PURE__ */ jsx(
+    MotionTag,
+    {
+      ref,
+      className,
+      variants,
+      initial: "hidden",
+      whileInView: "shown",
+      viewport: { once: !repeat, amount },
+      transition: { duration, delay, ease: EASE.out },
+      ...rest,
+      children
+    }
+  );
+  if (isMask) {
+    return /* @__PURE__ */ jsx("span", { className: "block overflow-hidden", children: inner });
+  }
+  return inner;
+});
+
+// src/site/TextReveal.tsx
+import * as React2 from "react";
+import { motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var tokenVariants = {
+  hidden: { y: "115%" },
+  shown: { y: "0%" }
+};
+function TextReveal({
+  children,
+  splitBy = "words",
+  stagger = 0.06,
+  delay = 0,
+  duration = DURATION.base,
+  repeat = false,
+  amount = 0.4,
+  as = "span",
+  className,
+  ...rest
+}) {
+  const reduce = useReducedMotion2();
+  const Tag = as;
+  const tokens = React2.useMemo(() => {
+    if (splitBy === "lines") return children.split("\n");
+    return children.split(/(\s+)/).filter((t) => t.length > 0);
+  }, [children, splitBy]);
+  if (reduce) {
+    return /* @__PURE__ */ jsx2(Tag, { className, ...rest, children });
+  }
+  const containerVariants = {
+    hidden: {},
+    shown: { transition: { staggerChildren: stagger, delayChildren: delay } }
+  };
+  return /* @__PURE__ */ jsx2(
+    motion2.span,
+    {
+      variants: containerVariants,
+      initial: "hidden",
+      whileInView: "shown",
+      viewport: { once: !repeat, amount },
+      className: cn(as === "span" ? "inline" : "block", className),
+      ...rest,
+      children: /* @__PURE__ */ jsx2(Tag, { className: as === "span" ? "inline" : "block", children: tokens.map(
+        (token, i) => /^\s+$/.test(token) && splitBy === "words" ? /* @__PURE__ */ jsx2("span", { children: " " }, i) : /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: cn(
+              "overflow-hidden",
+              splitBy === "lines" ? "block" : "inline-block align-bottom"
+            ),
+            children: /* @__PURE__ */ jsx2(
+              motion2.span,
+              {
+                className: "inline-block",
+                variants: tokenVariants,
+                transition: { duration, ease: EASE.out },
+                children: token
+              }
+            )
+          },
+          i
+        )
+      ) })
+    }
+  );
+}
+
+// src/site/Parallax.tsx
+import * as React3 from "react";
+import {
+  motion as motion3,
+  useReducedMotion as useReducedMotion3,
+  useScroll,
+  useSpring,
+  useTransform
+} from "motion/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Parallax = React3.forwardRef(function Parallax2({ speed = 0.2, axis = "y", smooth = true, className, children, style, ...rest }, forwardedRef) {
+  const reduce = useReducedMotion3();
+  const innerRef = React3.useRef(null);
+  React3.useImperativeHandle(forwardedRef, () => innerRef.current);
+  const { scrollYProgress } = useScroll({
+    target: innerRef,
+    offset: ["start end", "end start"]
+  });
+  const range = 100 * speed;
+  const raw = useTransform(scrollYProgress, [0, 1], [range, -range]);
+  const smoothed = useSpring(raw, { stiffness: 120, damping: 30, mass: 0.4 });
+  const value = smooth ? smoothed : raw;
+  if (reduce) {
+    return /* @__PURE__ */ jsx3("div", { ref: innerRef, className, style, ...rest, children });
+  }
+  return /* @__PURE__ */ jsx3(
+    motion3.div,
+    {
+      ref: innerRef,
+      className: cn("will-change-transform", className),
+      style: { ...style, [axis]: value },
+      ...rest,
+      children
+    }
+  );
+});
+
+// src/site/Marquee.tsx
+import * as React4 from "react";
+import {
+  motion as motion4,
+  useAnimationFrame,
+  useMotionValue,
+  useReducedMotion as useReducedMotion4
+} from "motion/react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var Marquee = React4.forwardRef(function Marquee2({ speed = 60, direction = "left", pauseOnHover = true, gap = "3rem", className, children, ...rest }, ref) {
+  const reduce = useReducedMotion4();
+  const x = useMotionValue(0);
+  const setWidthRef = React4.useRef(0);
+  const groupRef = React4.useRef(null);
+  const [paused, setPaused] = React4.useState(false);
+  React4.useEffect(() => {
+    const el = groupRef.current;
+    if (!el) return;
+    const measure = () => {
+      const gapPx = parseFloat(getComputedStyle(el.parentElement).columnGap || "0") || 0;
+      setWidthRef.current = el.offsetWidth + gapPx;
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  useAnimationFrame((_, delta) => {
+    if (reduce || paused || setWidthRef.current === 0) return;
+    const dir = direction === "left" ? -1 : 1;
+    const moveBy = speed * delta / 1e3;
+    let next = x.get() + dir * moveBy;
+    const w = setWidthRef.current;
+    if (next <= -w) next += w;
+    else if (next >= w) next -= w;
+    x.set(next);
+  });
+  if (reduce) {
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        ref,
+        className: cn("flex w-full items-center overflow-x-auto", className),
+        style: { columnGap: gap },
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref,
+      className: cn("w-full overflow-hidden", className),
+      onMouseEnter: pauseOnHover ? () => setPaused(true) : void 0,
+      onMouseLeave: pauseOnHover ? () => setPaused(false) : void 0,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(motion4.div, { className: "flex w-max flex-nowrap items-center", style: { x, columnGap: gap }, children: [
+        /* @__PURE__ */ jsx4("div", { ref: groupRef, className: "flex flex-nowrap items-center", style: { columnGap: gap }, children }),
+        /* @__PURE__ */ jsx4("div", { className: "flex flex-nowrap items-center", style: { columnGap: gap }, "aria-hidden": true, children })
+      ] })
+    }
+  );
+});
+
+// src/site/Magnetic.tsx
+import * as React5 from "react";
+import { motion as motion5, useMotionValue as useMotionValue2, useReducedMotion as useReducedMotion5, useSpring as useSpring2 } from "motion/react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Magnetic = React5.forwardRef(function Magnetic2({ strength = 0.35, max = 24, spring = "snappy", className, children, ...rest }, forwardedRef) {
+  const reduce = useReducedMotion5();
+  const innerRef = React5.useRef(null);
+  React5.useImperativeHandle(forwardedRef, () => innerRef.current);
+  const mvx = useMotionValue2(0);
+  const mvy = useMotionValue2(0);
+  const x = useSpring2(mvx, SPRING[spring]);
+  const y = useSpring2(mvy, SPRING[spring]);
+  const clamp = (v) => Math.max(-max, Math.min(max, v));
+  function handleMove(e) {
+    if (reduce) return;
+    const el = innerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    mvx.set(clamp((e.clientX - cx) * strength));
+    mvy.set(clamp((e.clientY - cy) * strength));
+  }
+  function reset() {
+    mvx.set(0);
+    mvy.set(0);
+  }
+  if (reduce) {
+    return /* @__PURE__ */ jsx5("div", { ref: innerRef, className: cn("inline-block", className), ...rest, children });
+  }
+  return /* @__PURE__ */ jsx5(
+    motion5.div,
+    {
+      ref: innerRef,
+      className: cn("inline-block", className),
+      style: { x, y },
+      onMouseMove: handleMove,
+      onMouseLeave: reset,
+      ...rest,
+      children
+    }
+  );
+});
+export {
+  DURATION,
+  EASE,
+  Magnetic,
+  Marquee,
+  Parallax,
+  Reveal,
+  SPRING,
+  TextReveal
+};