@timbal-ai/timbal-react 1.4.0 → 1.6.0

package/dist/site.cjs

@@ -0,0 +1,429 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/site.ts
+var site_exports = {};
+__export(site_exports, {
+  DURATION: () => DURATION,
+  EASE: () => EASE,
+  Magnetic: () => Magnetic,
+  Marquee: () => Marquee,
+  Parallax: () => Parallax,
+  Reveal: () => Reveal,
+  SITE_AGENT_INSTRUCTIONS: () => SITE_AGENT_INSTRUCTIONS,
+  SPRING: () => SPRING,
+  TextReveal: () => TextReveal
+});
+module.exports = __toCommonJS(site_exports);
+
+// src/site/agent-instructions.ts
+var SITE_AGENT_INSTRUCTIONS = `
+## Site kit (@timbal-ai/timbal-react/site)
+
+Expressive **motion & interaction primitives** for marketing, brand, landing, and editorial pages \u2014 the counterpart to \`/app\` (which is for dashboards and operations UIs). Import from \`@timbal-ai/timbal-react/site\` (or the package root).
+
+These are **mechanics, not art direction**: they animate whatever you put inside them. Compose them under a chosen aesthetic; they do not impose colors, type, or layout.
+
+### When to use \`/site\` (and when not to)
+
+- **Do** use \`/site\` for landing pages, hero sections, feature walkthroughs, logo walls, pricing pages, and editorial/brand storytelling.
+- **Do not** use \`/site\` inside dashboards, settings, tables, or in-thread chat artifacts \u2014 those stay on \`/app\` and \`/artifacts\`. Animated dashboard chrome reads as slop.
+- Every primitive is **reduced-motion-aware** (collapses to static, no-transform output under \`prefers-reduced-motion\`) and **SSR-safe** (no layout shift \u2014 elements occupy their space from first paint). You never need to guard them yourself.
+- Built on the \`motion\` engine the package already bundles \u2014 **no extra dependencies**.
+
+### Dosing (anti-overuse \u2014 read this)
+
+The failure mode is animating *everything*. Restraint is the brand signal.
+
+- Pick **one** signature motion per section (e.g. a \`TextReveal\` headline **or** a \`Parallax\` hero image, not both stacked).
+- Stagger entrances down the page; do not fire ten reveals at once on first paint.
+- Reserve \`Magnetic\` for **primary** CTAs / nav, not every button.
+- Keep \`Parallax\` \`speed\` subtle (\`0.15\`\u2013\`0.35\`); large values look gimmicky.
+- Default durations are intentionally slow and weighted (\`DURATION.base\` = 0.7s) \u2014 that confident pacing is the point. Don't speed everything up to app-kit's 150ms.
+
+### Component menu
+
+| Component | Use for | Key props |
+|-----------|---------|-----------|
+| \`Reveal\` | Fade/slide a block in as it scrolls into view (headings, cards, images, list items). | \`variant\` (\`fade\` \\| \`fade-up\` \\| \`fade-down\` \\| \`fade-left\` \\| \`fade-right\` \\| \`blur\` \\| \`scale\` \\| \`mask-up\`, default \`fade-up\`), \`delay\`, \`duration\`, \`distance\` (px, default 28), \`amount\` (visibility fraction 0\u20131 / \`"some"\` / \`"all"\`, default 0.3), \`repeat\` (replay on re-enter), \`as\` (render element, e.g. \`"section"\`/\`"li"\`). |
+| \`TextReveal\` | Signature editorial headline entrance \u2014 text rides up token-by-token from a clip on a stagger. | \`children\` (**plain string only**), \`splitBy\` (\`words\` default \\| \`lines\`), \`stagger\` (default 0.06), \`delay\`, \`duration\`, \`amount\` (default 0.4), \`repeat\`, \`as\` (\`span\` default \\| \`h1\`\u2013\`h4\` \\| \`p\`). |
+| \`Parallax\` | Depth \u2014 translate a layer relative to scroll (hero images, background art). | \`speed\` (-0.6\u20260.6, positive = lags behind scroll, default 0.2), \`axis\` (\`y\` default \\| \`x\`), \`smooth\` (spring-damped, default true). |
+| \`Marquee\` | Seamless infinite scrolling row (logo walls, testimonials, ticker). Duplicates children internally \u2014 no visible seam. | \`speed\` (px/s, default 60), \`direction\` (\`left\` default \\| \`right\`), \`pauseOnHover\` (default true), \`gap\` (CSS length, default \`"3rem"\`). |
+| \`Magnetic\` | Pointer-following "magnetic" affordance for a **single** interactive child (primary CTA, nav link). | \`strength\` (fraction of cursor offset, default 0.35), \`max\` (px clamp, default 24), \`spring\` (\`"snappy"\` default \\| \`"smooth"\`). Wrap one button/link. |
+
+### Motion tokens
+
+\`EASE\` (cubic-bezier tuples: \`out\` / \`inOut\` / \`soft\`), \`DURATION\` (\`fast\` 0.4s / \`base\` 0.7s / \`slow\` 1.1s), and \`SPRING\` (\`snappy\` / \`smooth\`) are exported for custom \`motion\` work that should match the kit's feel. Prefer the component defaults; reach for tokens only when hand-rolling a bespoke animation.
+
+### Example imports
+
+\`\`\`tsx
+import { Reveal, TextReveal, Parallax, Marquee, Magnetic } from "@timbal-ai/timbal-react/site";
+\`\`\`
+
+\`\`\`tsx
+<Reveal variant="fade-up" delay={0.1}>
+  <TextReveal as="h1" className="text-6xl font-semibold">
+    Built for the long run
+  </TextReveal>
+</Reveal>
+
+<Parallax speed={0.3}>
+  <img src={hero} alt="" className="h-full w-full object-cover" />
+</Parallax>
+
+<Magnetic strength={0.4}>
+  <Button>Get started</Button>
+</Magnetic>
+\`\`\`
+
+### Rules
+
+- \`/site\` is for the **marketing/brand surface**, not the product app shell (\`/app\`) or in-chat widgets (\`/artifacts\`).
+- \`TextReveal\` takes a **string** child only \u2014 it splits internally; do not pass JSX.
+- \`Magnetic\` wraps a **single** interactive child; don't wrap whole layouts.
+- Trust the reduced-motion / SSR handling \u2014 never add your own \`prefers-reduced-motion\` guards around these.
+`.trim();
+
+// src/site/Reveal.tsx
+var React = __toESM(require("react"), 1);
+var import_react = require("motion/react");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// 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
+var import_jsx_runtime = require("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 = (0, import_react.useReducedMotion)();
+  const isMask = variant === "mask-up";
+  if (reduce) {
+    const Tag = as;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { ref, className: cn(isMask && "overflow-hidden", className), ...rest, children });
+  }
+  const variants = {
+    hidden: hidden(variant, distance),
+    shown: shown(variant)
+  };
+  const MotionTag = import_react.motion[as] ?? import_react.motion.div;
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "block overflow-hidden", children: inner });
+  }
+  return inner;
+});
+
+// src/site/TextReveal.tsx
+var React2 = __toESM(require("react"), 1);
+var import_react2 = require("motion/react");
+var import_jsx_runtime2 = require("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 = (0, import_react2.useReducedMotion)();
+  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__ */ (0, import_jsx_runtime2.jsx)(Tag, { className, ...rest, children });
+  }
+  const containerVariants = {
+    hidden: {},
+    shown: { transition: { staggerChildren: stagger, delayChildren: delay } }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react2.motion.span,
+    {
+      variants: containerVariants,
+      initial: "hidden",
+      whileInView: "shown",
+      viewport: { once: !repeat, amount },
+      className: cn(as === "span" ? "inline" : "block", className),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Tag, { className: as === "span" ? "inline" : "block", children: tokens.map(
+        (token, i) => /^\s+$/.test(token) && splitBy === "words" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: " " }, i) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            className: cn(
+              "overflow-hidden",
+              splitBy === "lines" ? "block" : "inline-block align-bottom"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_react2.motion.span,
+              {
+                className: "inline-block",
+                variants: tokenVariants,
+                transition: { duration, ease: EASE.out },
+                children: token
+              }
+            )
+          },
+          i
+        )
+      ) })
+    }
+  );
+}
+
+// src/site/Parallax.tsx
+var React3 = __toESM(require("react"), 1);
+var import_react3 = require("motion/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Parallax = React3.forwardRef(function Parallax2({ speed = 0.2, axis = "y", smooth = true, className, children, style, ...rest }, forwardedRef) {
+  const reduce = (0, import_react3.useReducedMotion)();
+  const innerRef = React3.useRef(null);
+  React3.useImperativeHandle(forwardedRef, () => innerRef.current);
+  const { scrollYProgress } = (0, import_react3.useScroll)({
+    target: innerRef,
+    offset: ["start end", "end start"]
+  });
+  const range = 100 * speed;
+  const raw = (0, import_react3.useTransform)(scrollYProgress, [0, 1], [range, -range]);
+  const smoothed = (0, import_react3.useSpring)(raw, { stiffness: 120, damping: 30, mass: 0.4 });
+  const value = smooth ? smoothed : raw;
+  if (reduce) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: innerRef, className, style, ...rest, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react3.motion.div,
+    {
+      ref: innerRef,
+      className: cn("will-change-transform", className),
+      style: { ...style, [axis]: value },
+      ...rest,
+      children
+    }
+  );
+});
+
+// src/site/Marquee.tsx
+var React4 = __toESM(require("react"), 1);
+var import_react4 = require("motion/react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Marquee = React4.forwardRef(function Marquee2({ speed = 60, direction = "left", pauseOnHover = true, gap = "3rem", className, children, ...rest }, ref) {
+  const reduce = (0, import_react4.useReducedMotion)();
+  const x = (0, import_react4.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();
+  }, []);
+  (0, import_react4.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__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("flex w-full items-center overflow-x-auto", className),
+        style: { columnGap: gap },
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("w-full overflow-hidden", className),
+      onMouseEnter: pauseOnHover ? () => setPaused(true) : void 0,
+      onMouseLeave: pauseOnHover ? () => setPaused(false) : void 0,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react4.motion.div, { className: "flex w-max flex-nowrap items-center", style: { x, columnGap: gap }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: groupRef, className: "flex flex-nowrap items-center", style: { columnGap: gap }, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-nowrap items-center", style: { columnGap: gap }, "aria-hidden": true, children })
+      ] })
+    }
+  );
+});
+
+// src/site/Magnetic.tsx
+var React5 = __toESM(require("react"), 1);
+var import_react5 = require("motion/react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Magnetic = React5.forwardRef(function Magnetic2({ strength = 0.35, max = 24, spring = "snappy", className, children, ...rest }, forwardedRef) {
+  const reduce = (0, import_react5.useReducedMotion)();
+  const innerRef = React5.useRef(null);
+  React5.useImperativeHandle(forwardedRef, () => innerRef.current);
+  const mvx = (0, import_react5.useMotionValue)(0);
+  const mvy = (0, import_react5.useMotionValue)(0);
+  const x = (0, import_react5.useSpring)(mvx, SPRING[spring]);
+  const y = (0, import_react5.useSpring)(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__ */ (0, import_jsx_runtime5.jsx)("div", { ref: innerRef, className: cn("inline-block", className), ...rest, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react5.motion.div,
+    {
+      ref: innerRef,
+      className: cn("inline-block", className),
+      style: { x, y },
+      onMouseMove: handleMove,
+      onMouseLeave: reset,
+      ...rest,
+      children
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DURATION,
+  EASE,
+  Magnetic,
+  Marquee,
+  Parallax,
+  Reveal,
+  SITE_AGENT_INSTRUCTIONS,
+  SPRING,
+  TextReveal
+});

package/dist/site.d.cts

@@ -0,0 +1,198 @@
+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>>;
+
+/**
+ * Copy-paste into a workforce agent system prompt (or codegen tool context) so
+ * the model knows which expressive `/site` motion primitives exist and how to
+ * dose them — without turning every page into a motion demo.
+ *
+ * @example
+ * ```ts
+ * import { SITE_AGENT_INSTRUCTIONS } from "@timbal-ai/timbal-react/site";
+ *
+ * const systemPrompt = `${basePrompt}\n\n${SITE_AGENT_INSTRUCTIONS}`;
+ * ```
+ */
+declare const SITE_AGENT_INSTRUCTIONS: string;
+
+export { DURATION, EASE, Magnetic, type MagneticProps, Marquee, type MarqueeProps, Parallax, type ParallaxProps, Reveal, type RevealProps, type RevealVariant, SITE_AGENT_INSTRUCTIONS, SPRING, TextReveal, type TextRevealProps };