@dreamtree-org/twreact-ui 2.1.1 → 2.2.0

package/dist/esm/components/motion/DeviceFrame.js

@@ -0,0 +1,102 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["device", "url", "screenClassName", "screenRef", "className", "children"];
+// Bezel parts read `--dt-chrome` (opacity, default 1) so DeviceMorphHero can fade them in.
+var CHROME = "opacity-[var(--dt-chrome,1)]";
+// Bezels are borders (not filled boxes) so the screen area stays see-through: DeviceMorphHero
+// slides its full-bleed media layer under a transparent screen.
+var FRAMES = {
+  phone: {
+    root: "w-[220px] md:w-[262px] aspect-[262/562]",
+    bezel: "inset-0 rounded-[2.75rem] md:rounded-[3.25rem] border-[10px] border-shell shadow-2xl",
+    screen: "inset-[10px] rounded-[2.1rem] md:rounded-[2.6rem]",
+    extras: jsxs(Fragment, {
+      children: [jsx("span", {
+        "aria-hidden": "true",
+        className: cn("absolute left-1/2 top-[18px] h-[22px] w-[30%] -translate-x-1/2 rounded-pill bg-shell", CHROME)
+      }), jsx("span", {
+        "aria-hidden": "true",
+        className: cn("absolute bottom-[16px] left-1/2 h-[4px] w-[34%] -translate-x-1/2 rounded-pill bg-shell-foreground/70", CHROME)
+      }), jsx("span", {
+        "aria-hidden": "true",
+        className: cn("absolute -left-[3px] top-[22%] h-[9%] w-[3px] rounded-l bg-shell-active", CHROME)
+      }), jsx("span", {
+        "aria-hidden": "true",
+        className: cn("absolute -right-[3px] top-[28%] h-[14%] w-[3px] rounded-r bg-shell-active", CHROME)
+      })]
+    })
+  },
+  tablet: {
+    root: "w-[320px] md:w-[440px] aspect-[3/4]",
+    bezel: "inset-0 rounded-[2rem] border-[14px] border-shell shadow-2xl",
+    screen: "inset-[14px] rounded-[1rem]",
+    extras: jsx("span", {
+      "aria-hidden": "true",
+      className: cn("absolute left-1/2 top-[5px] h-[4px] w-[4px] -translate-x-1/2 rounded-full bg-shell-active", CHROME)
+    })
+  },
+  laptop: {
+    root: "w-[340px] md:w-[640px] aspect-[16/10.6]",
+    bezel: "inset-x-0 top-0 bottom-[4%] rounded-t-[1.25rem] border-[10px] border-b-[22px] border-shell shadow-2xl",
+    screen: "left-[10px] right-[10px] top-[10px] bottom-[calc(4%+22px)] rounded-[0.25rem]",
+    extras: jsx("span", {
+      "aria-hidden": "true",
+      className: cn("absolute -inset-x-[6%] bottom-0 h-[4%] rounded-b-[1rem] bg-line shadow-lg", CHROME)
+    })
+  },
+  browser: {
+    root: "w-[340px] md:w-[720px] aspect-[16/10.5]",
+    bezel: "inset-0 rounded-card border border-t-[36px] border-line border-t-gray-100 shadow-2xl dark:border-t-gray-800",
+    screen: "inset-x-px bottom-px top-[36px] rounded-b-card",
+    extras: null
+  }
+};
+/**
+ * A CSS-only device mock-up (phone, tablet, laptop or browser window) around any
+ * screen content. Purely presentational: no motion, works anywhere.
+ */
+var DeviceFrame = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$device = _ref.device,
+    device = _ref$device === void 0 ? "phone" : _ref$device,
+    url = _ref.url,
+    screenClassName = _ref.screenClassName,
+    screenRef = _ref.screenRef,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var f = FRAMES[device] || FRAMES.phone;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    "data-device": device,
+    className: cn("relative shrink-0", f.root, className)
+  }, rest), {}, {
+    children: [jsx("div", {
+      "aria-hidden": "true",
+      className: cn("pointer-events-none absolute", f.bezel, CHROME)
+    }), device === "browser" ? jsxs("div", {
+      "aria-hidden": "true",
+      className: cn("absolute inset-x-0 top-0 flex h-[36px] items-center gap-1.5 px-3", CHROME),
+      children: [jsx("span", {
+        className: "h-2.5 w-2.5 rounded-full bg-error-400"
+      }), jsx("span", {
+        className: "h-2.5 w-2.5 rounded-full bg-warning-400"
+      }), jsx("span", {
+        className: "h-2.5 w-2.5 rounded-full bg-success-400"
+      }), url ? jsx("span", {
+        className: "ml-3 flex-1 truncate rounded-pill bg-surface px-3 py-0.5 text-micro text-muted dark:bg-background",
+        children: url
+      }) : null]
+    }) : null, jsx("div", {
+      ref: screenRef,
+      className: cn("absolute overflow-hidden bg-surface dark:bg-background", f.screen, screenClassName),
+      children: children
+    }), f.extras]
+  }));
+});
+DeviceFrame.displayName = "DeviceFrame";
+
+export { DeviceFrame as default };

package/dist/esm/components/motion/DeviceMorphHero.js

@@ -0,0 +1,228 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef, useEffect, useCallback } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { observe } from '../../motion/engine/inView.js';
+import { lerp, segment, easeInOut, easeOut } from '../../motion/engine/progress.js';
+import { useMergedRef } from '../../motion/engine/useMergedRef.js';
+import { useHydrated } from '../../motion/engine/useHydrated.js';
+import { MOBILE_QUERY, SCENE_LENGTH_MOBILE, SCENE_LENGTH } from '../../motion/tokens.js';
+import ScrollStage from './ScrollStage.js';
+import DeviceFrame from './DeviceFrame.js';
+import { useSmoothScroll } from '../../hooks/useSmoothScroll.js';
+
+var _excluded = ["media", "device", "length", "mobileLength", "side", "content", "scrollHint", "className"];
+var MAX_LENGTH = 400;
+var COVER = "h-full w-full object-cover";
+function Media(_ref) {
+  var media = _ref.media,
+    videoRef = _ref.videoRef;
+  var decorative = !media.alt;
+  if (media.video) {
+    return jsx("video", {
+      ref: videoRef,
+      className: COVER,
+      src: media.video,
+      poster: media.poster,
+      muted: true,
+      loop: true,
+      autoPlay: true,
+      playsInline: true,
+      preload: "metadata",
+      "aria-label": decorative ? undefined : media.alt,
+      "aria-hidden": decorative ? "true" : undefined
+    });
+  }
+  return jsx("img", {
+    className: COVER,
+    src: media.image || media.poster,
+    alt: media.alt || ""
+  });
+}
+/**
+ * The signature scroll hero: full-bleed media shrinks into a device frame, the bezel fades
+ * in, then the device slides aside while the copy (`content`) fades in beside it. The
+ * timeline maps the scene's scroll progress: 0–45 % morph, 40–60 % bezel, 60–90 % slide.
+ * The server, no-JS readers and reduced-motion users get the final layout (copy beside the
+ * device) with no pinning. Below `md` the device rises and shrinks and the copy appears under it.
+ */
+var DeviceMorphHero = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var media = _ref2.media,
+    _ref2$device = _ref2.device,
+    device = _ref2$device === void 0 ? "phone" : _ref2$device,
+    _ref2$length = _ref2.length,
+    length = _ref2$length === void 0 ? SCENE_LENGTH : _ref2$length,
+    _ref2$mobileLength = _ref2.mobileLength,
+    mobileLength = _ref2$mobileLength === void 0 ? SCENE_LENGTH_MOBILE : _ref2$mobileLength,
+    _ref2$side = _ref2.side,
+    side = _ref2$side === void 0 ? "right" : _ref2$side,
+    content = _ref2.content,
+    _ref2$scrollHint = _ref2.scrollHint,
+    scrollHint = _ref2$scrollHint === void 0 ? "Scroll to explore" : _ref2$scrollHint,
+    className = _ref2.className,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var reduced = useReducedMotion();
+  var mobile = useMediaQuery(MOBILE_QUERY);
+  var armed = useHydrated() && !reduced;
+  var stageRef = useRef(null);
+  var setRef = useMergedRef(ref, stageRef);
+  var layerRef = useRef(null);
+  var frameRef = useRef(null);
+  var screenRef = useRef(null);
+  var contentRef = useRef(null);
+  var hintRef = useRef(null);
+  var videoRef = useRef(null);
+  var geo = useRef(null);
+  var _useSmoothScroll = useSmoothScroll(),
+    scrollTo = _useSmoothScroll.scrollTo;
+  // Re-measure the frame geometry after a resize or a layout change.
+  useEffect(function () {
+    var reset = function reset() {
+      geo.current = null;
+    };
+    reset();
+    window.addEventListener("resize", reset);
+    return function () {
+      return window.removeEventListener("resize", reset);
+    };
+  }, [mobile, device, armed]);
+  // Play the video only while the hero is on screen.
+  useEffect(function () {
+    return observe(stageRef.current, function (inView) {
+      var v = videoRef.current;
+      if (!v) return;
+      if (inView && !reduced) {
+        var played = v.play && v.play();
+        if (played && played["catch"]) played["catch"](function () {});
+      } else if (v.pause) v.pause();
+    });
+  }, [armed, reduced]);
+  var onProgress = useCallback(function (p) {
+    var layer = layerRef.current;
+    var frame = frameRef.current;
+    var screen = screenRef.current;
+    var stage = stageRef.current && stageRef.current.firstElementChild;
+    if (!layer || !frame || !screen || !stage) return;
+    if (!geo.current) {
+      geo.current = {
+        vw: stage.clientWidth,
+        vh: stage.clientHeight,
+        sx: frame.offsetLeft + screen.offsetLeft,
+        sy: frame.offsetTop + screen.offsetTop,
+        sw: screen.offsetWidth,
+        sh: screen.offsetHeight,
+        r: parseFloat(getComputedStyle(screen).borderTopLeftRadius) || 0
+      };
+    }
+    var g = geo.current;
+    if (!g.sw || !g.sh || !g.vw || !g.vh) return;
+    var q = easeInOut(segment(p, 0, 0.45)); // full-bleed → screen
+    var chrome = segment(p, 0.4, 0.6); // bezel fades in
+    var c = easeOut(segment(p, 0.6, 0.9)); // slide aside + copy in
+    var fit = Math.max(g.sw / g.vw, g.sh / g.vh);
+    var insetX = (g.vw - g.sw / fit) / 2 * q;
+    var insetY = (g.vh - g.sh / fit) / 2 * q;
+    var dx = (g.sx + g.sw / 2 - g.vw / 2) * q;
+    var dy = (g.sy + g.sh / 2 - g.vh / 2) * q;
+    var tx = mobile ? 0 : (side === "left" ? -1 : 1) * g.vw * 0.22 * c;
+    var ty = mobile ? -g.vh * 0.2 * c : 0;
+    var k = mobile ? lerp(1, 0.62, c) : 1;
+    layer.style.transform = "translate3d(".concat(dx + tx, "px,").concat(dy + ty, "px,0) scale(").concat(lerp(1, fit, q) * k, ")");
+    layer.style.clipPath = "inset(".concat(insetY, "px ").concat(insetX, "px round ").concat(g.r / fit * q, "px)");
+    frame.style.transform = "translate3d(".concat(tx, "px,").concat(ty, "px,0) scale(").concat(k, ")");
+    frame.style.setProperty("--dt-chrome", chrome.toFixed(3));
+    if (contentRef.current) {
+      contentRef.current.style.opacity = c.toFixed(3);
+      contentRef.current.style.transform = "translateY(".concat((1 - c) * 24, "px)");
+      contentRef.current.style.pointerEvents = c > 0.5 ? "auto" : "none";
+    }
+    if (hintRef.current) hintRef.current.style.opacity = (1 - segment(p, 0, 0.12)).toFixed(3);
+  }, [mobile, side]);
+  var skip = function skip() {
+    var stage = stageRef.current;
+    if (!stage) return;
+    var end = window.scrollY + stage.getBoundingClientRect().bottom - innerHeight;
+    scrollTo(end, {
+      immediate: reduced
+    });
+  };
+  var deviceLeft = side === "left";
+  if (!armed) {
+    return jsx("section", _objectSpread2(_objectSpread2({
+      ref: setRef,
+      "data-dt-hero": "static",
+      className: cn("relative", className)
+    }, rest), {}, {
+      children: jsxs("div", {
+        className: "mx-auto grid max-w-7xl items-center gap-12 px-4 py-16 md:grid-cols-2 md:px-8",
+        children: [jsx("div", {
+          className: cn(deviceLeft && "md:order-2"),
+          children: content
+        }), jsx("div", {
+          className: cn("flex justify-center", deviceLeft && "md:order-1"),
+          children: jsx(DeviceFrame, {
+            device: device,
+            children: jsx(Media, {
+              media: media,
+              videoRef: videoRef
+            })
+          })
+        })]
+      })
+    }));
+  }
+  return jsxs(ScrollStage, _objectSpread2(_objectSpread2({
+    ref: setRef,
+    "data-dt-hero": "morph",
+    length: Math.min(length, MAX_LENGTH),
+    mobileLength: Math.min(mobileLength, MAX_LENGTH),
+    onProgress: onProgress,
+    className: className
+  }, rest), {}, {
+    children: [jsx("div", {
+      ref: layerRef,
+      className: "absolute inset-0 origin-center will-change-transform",
+      children: jsx(Media, {
+        media: media,
+        videoRef: videoRef
+      })
+    }), jsx("div", {
+      className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+      children: jsx(DeviceFrame, {
+        ref: frameRef,
+        screenRef: screenRef,
+        device: device,
+        screenClassName: "bg-transparent dark:bg-transparent",
+        className: "will-change-transform [--dt-chrome:0]"
+      })
+    }), content ? jsx("div", {
+      ref: contentRef,
+      // The copy stays in the accessibility tree while faded out. Tabbing into it jumps the
+      // scene to its end, so a focused link is never invisible.
+      onFocus: function onFocus() {
+        if (contentRef.current && parseFloat(contentRef.current.style.opacity || "0") < 1) skip();
+      },
+      className: cn("pointer-events-none absolute opacity-0", "inset-x-0 bottom-0 max-h-[45%] overflow-y-auto px-4 pb-8", "md:inset-y-0 md:bottom-auto md:flex md:max-h-none md:w-1/2 md:items-center md:px-12 md:pb-0", deviceLeft ? "md:left-auto md:right-0" : "md:left-0 md:right-auto"),
+      children: jsx("div", {
+        className: "w-full",
+        children: content
+      })
+    }) : null, scrollHint !== false ? jsxs("button", {
+      ref: hintRef,
+      type: "button",
+      onClick: skip,
+      className: "absolute bottom-6 left-1/2 -translate-x-1/2 rounded-pill bg-shell/70 px-4 py-2 text-caption font-medium text-shell-foreground backdrop-blur focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400",
+      children: [scrollHint, jsx("span", {
+        "aria-hidden": "true",
+        className: "ml-2 inline-block motion-safe:animate-bounce",
+        children: "\u2193"
+      })]
+    }) : null]
+  }));
+});
+DeviceMorphHero.displayName = "DeviceMorphHero";
+
+export { DeviceMorphHero as default };

package/dist/esm/components/motion/LogoMarquee.js

@@ -0,0 +1,144 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef, useState, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { observe } from '../../motion/engine/inView.js';
+import { useMergedRef } from '../../motion/engine/useMergedRef.js';
+
+var _excluded = ["items", "speed", "direction", "pauseOnHover", "fadeEdges", "rows", "label", "className"];
+var isLogo = function isLogo(item) {
+  return item && _typeof(item) === "object" && ! /*#__PURE__*/React.isValidElement(item) && "src" in item;
+};
+function MarqueeItem(_ref) {
+  var item = _ref.item;
+  if (isLogo(item)) {
+    var img = jsx("img", {
+      src: item.src,
+      alt: item.alt,
+      loading: "lazy",
+      className: "h-8 w-auto max-w-[10rem] object-contain"
+    });
+    return item.href ? jsx("a", {
+      href: item.href,
+      className: "rounded-control focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+      children: img
+    }) : img;
+  }
+  if (typeof item === "string") {
+    return jsx("span", {
+      className: "whitespace-nowrap text-lg font-semibold tracking-tight text-muted",
+      children: item
+    });
+  }
+  return item;
+}
+function List(_ref2) {
+  var items = _ref2.items,
+    clone = _ref2.clone;
+  return jsx("ul", {
+    role: clone ? undefined : "list",
+    "aria-hidden": clone ? "true" : undefined,
+    className: cn("flex shrink-0 items-center gap-x-12 pr-12", clone && "motion-reduce:hidden", "motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-6 motion-reduce:pr-0"),
+    children: items.map(function (item, i) {
+      return jsx("li", {
+        className: "flex shrink-0 items-center",
+        children: clone && isLogo(item) && item.href ? jsx(MarqueeItem, {
+          item: {
+            src: item.src,
+            alt: item.alt
+          }
+        }) : jsx(MarqueeItem, {
+          item: item
+        })
+      }, i);
+    })
+  });
+}
+/**
+ * An endless strip of logos or names. The second copy of the list (needed for a seamless
+ * loop) is `aria-hidden`, so screen readers read each item once. Pauses on hover, while
+ * focus is inside and while off screen; under reduced motion it is a static, wrapped row.
+ */
+var LogoMarquee = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var _ref3$items = _ref3.items,
+    items = _ref3$items === void 0 ? [] : _ref3$items,
+    _ref3$speed = _ref3.speed,
+    speed = _ref3$speed === void 0 ? 40 : _ref3$speed,
+    _ref3$direction = _ref3.direction,
+    direction = _ref3$direction === void 0 ? "left" : _ref3$direction,
+    _ref3$pauseOnHover = _ref3.pauseOnHover,
+    pauseOnHover = _ref3$pauseOnHover === void 0 ? true : _ref3$pauseOnHover,
+    _ref3$fadeEdges = _ref3.fadeEdges,
+    fadeEdges = _ref3$fadeEdges === void 0 ? true : _ref3$fadeEdges,
+    _ref3$rows = _ref3.rows,
+    rows = _ref3$rows === void 0 ? 1 : _ref3$rows,
+    _ref3$label = _ref3.label,
+    label = _ref3$label === void 0 ? "Clients" : _ref3$label,
+    className = _ref3.className,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  var local = useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    inView = _useState2[0],
+    setInView = _useState2[1];
+  // Seconds per loop. A rough guess for the server render; measured on the client.
+  var _useState3 = useState(Math.max(items.length, 4) * 3),
+    _useState4 = _slicedToArray(_useState3, 2),
+    seconds = _useState4[0],
+    setSeconds = _useState4[1];
+  useEffect(function () {
+    return observe(local.current, function (v) {
+      return setInView(v);
+    });
+  }, []);
+  useEffect(function () {
+    var list = local.current && local.current.querySelector("ul");
+    if (!list) return undefined;
+    var measure = function measure() {
+      var width = list.getBoundingClientRect().width;
+      if (width > 0 && speed > 0) setSeconds(width / speed);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    var ro = new ResizeObserver(measure);
+    ro.observe(list);
+    return function () {
+      return ro.disconnect();
+    };
+  }, [speed, items]);
+  var rowCount = rows === 2 ? 2 : 1;
+  return jsx("div", _objectSpread2(_objectSpread2({
+    ref: setRef,
+    role: "region",
+    "aria-label": label,
+    className: cn("group relative overflow-hidden py-2", fadeEdges && "[mask-image:linear-gradient(to_right,transparent,rgb(0_0_0)_8%,rgb(0_0_0)_92%,transparent)] motion-reduce:[mask-image:none]", className)
+  }, rest), {}, {
+    children: jsx("div", {
+      className: "flex flex-col gap-y-6",
+      children: Array.from({
+        length: rowCount
+      }, function (_, row) {
+        var reverse = direction === "right" !== (row === 1);
+        return jsxs("div", {
+          "data-marquee-track": "",
+          className: cn("flex w-max animate-dt-marquee motion-reduce:w-full motion-reduce:animate-none motion-reduce:justify-center", pauseOnHover && "group-hover:[animation-play-state:paused]", "group-focus-within:[animation-play-state:paused]", !inView && "[animation-play-state:paused]"),
+          style: {
+            animationDuration: "".concat(seconds, "s"),
+            animationDirection: reverse ? "reverse" : "normal"
+          },
+          children: [jsx(List, {
+            items: items
+          }), jsx(List, {
+            items: items,
+            clone: true
+          })]
+        }, row);
+      })
+    })
+  }));
+});
+LogoMarquee.displayName = "LogoMarquee";
+
+export { LogoMarquee as default };

package/dist/esm/components/motion/PhotoCollage.js

@@ -0,0 +1,92 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { useScrollProgress } from '../../hooks/useScrollProgress.js';
+import { useMergedRef } from '../../motion/engine/useMergedRef.js';
+
+var _excluded = ["images", "chips", "parallax", "badge", "className", "style"];
+// Placement and parallax depth (sign = direction) for up to four photos.
+var SLOTS = [{
+  className: "left-0 top-0 w-[64%] aspect-[3/4]",
+  depth: 1
+}, {
+  className: "right-0 bottom-0 w-[52%] aspect-square",
+  depth: -0.7
+}, {
+  className: "right-[4%] top-[6%] w-[32%] aspect-[4/5]",
+  depth: 0.5
+}, {
+  className: "left-[10%] bottom-[2%] w-[28%] aspect-square",
+  depth: -0.4
+}];
+// Paint order (back to front) by slot index: later positioned siblings stack on top, so no
+// z-index is needed. Chips and the badge render after the photos and sit above them all.
+var PAINT_ORDER = [2, 0, 1, 3];
+var CHIP_SLOTS = ["left-[48%] top-[38%]", "left-[2%] bottom-[30%]"];
+/**
+ * Overlapping, offset photos with floating stat chips and an optional badge. On scroll the
+ * photos drift at different depths (parallax), driven by a CSS variable — no re-renders.
+ * Under reduced motion (or `parallax={0}`) they stay put.
+ */
+var PhotoCollage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$images = _ref.images,
+    images = _ref$images === void 0 ? [] : _ref$images,
+    _ref$chips = _ref.chips,
+    chips = _ref$chips === void 0 ? [] : _ref$chips,
+    _ref$parallax = _ref.parallax,
+    parallax = _ref$parallax === void 0 ? 0.15 : _ref$parallax,
+    badge = _ref.badge,
+    className = _ref.className,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var local = useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var reduced = useReducedMotion();
+  useScrollProgress(local, {
+    enabled: parallax > 0 && !reduced
+  });
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: setRef,
+    className: cn("relative isolate mx-auto aspect-[5/6] w-full max-w-xl", className),
+    style: _objectSpread2({
+      "--dt-parallax": parallax * 240
+    }, style)
+  }, rest), {}, {
+    children: [PAINT_ORDER.filter(function (i) {
+      return i < images.length;
+    }).map(function (i) {
+      return jsx("figure", {
+        className: cn("absolute overflow-hidden rounded-card shadow-xl ring-4 ring-surface dark:ring-background", "motion-safe:[transform:translate3d(0,calc((var(--dt-p,0.5)_-_0.5)_*_var(--dt-parallax)_*_var(--dt-depth)_*_1px),0)]", SLOTS[i].className),
+        style: {
+          "--dt-depth": SLOTS[i].depth
+        },
+        children: jsx("img", {
+          src: images[i].src,
+          alt: images[i].alt,
+          loading: "lazy",
+          className: "h-full w-full object-cover"
+        })
+      }, i);
+    }), chips.slice(0, CHIP_SLOTS.length).map(function (chip, i) {
+      return jsxs("div", {
+        className: cn("absolute flex flex-col rounded-card border border-line bg-surface/90 px-4 py-3 shadow-lg backdrop-blur dark:bg-background/90", CHIP_SLOTS[i]),
+        children: [jsx("span", {
+          className: "text-section-title font-semibold leading-none text-foreground",
+          children: chip.value
+        }), jsx("span", {
+          className: "mt-1 text-micro uppercase tracking-wider text-muted",
+          children: chip.label
+        })]
+      }, i);
+    }), badge ? jsx("div", {
+      className: "absolute -right-2 -top-4 md:-right-6",
+      children: badge
+    }) : null]
+  }));
+});
+PhotoCollage.displayName = "PhotoCollage";
+
+export { PhotoCollage as default };

package/dist/esm/components/motion/Reveal.js

@@ -0,0 +1,115 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { observe } from '../../motion/engine/inView.js';
+import { useIsomorphicLayoutEffect } from '../../motion/engine/useIsomorphicLayoutEffect.js';
+import { useMergedRef } from '../../motion/engine/useMergedRef.js';
+
+var _excluded = ["effect", "delay", "stagger", "once", "as", "className", "style", "children"];
+var BASE = "transition-[opacity,transform,clip-path] duration-700 ease-emphasized motion-reduce:transition-none";
+// Classes for the hidden state of each effect (the shown state is the element's natural style).
+var HIDDEN = {
+  "fade-up": "opacity-0 translate-y-6",
+  fade: "opacity-0",
+  scale: "opacity-0 scale-95",
+  clip: "[clip-path:inset(0_0_100%_0)]",
+  "split-words": ""
+};
+var WORD_HIDDEN = "opacity-0 translate-y-[0.6em]";
+/**
+ * Plays an entrance when the element scrolls into view. The server, no-JS readers and
+ * reduced-motion users get the content as-is; elements already on screen at load are not
+ * hidden (no flash, no LCP delay). Only content below the fold animates.
+ */
+var Reveal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$effect = _ref.effect,
+    effect = _ref$effect === void 0 ? "fade-up" : _ref$effect,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    _ref$stagger = _ref.stagger,
+    stagger = _ref$stagger === void 0 ? 40 : _ref$stagger,
+    _ref$once = _ref.once,
+    once = _ref$once === void 0 ? true : _ref$once,
+    _ref$as = _ref.as,
+    Tag = _ref$as === void 0 ? "div" : _ref$as,
+    className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var local = useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var reduced = useReducedMotion();
+  // "static": final state (server, reduced motion, above the fold) · "hidden" · "shown"
+  var _useState = useState("static"),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useIsomorphicLayoutEffect(function () {
+    var el = local.current;
+    if (reduced || !el) {
+      setState("static");
+      return undefined;
+    }
+    var belowFold = el.getBoundingClientRect().top > innerHeight;
+    if (!belowFold && once) return undefined;
+    if (belowFold) setState("hidden");
+    var stop = function stop() {};
+    stop = observe(el, function (inView) {
+      if (inView) {
+        setState("shown");
+        if (once) stop();
+      } else if (!once) {
+        setState("hidden");
+      }
+    }, {
+      threshold: 0.15
+    });
+    return function () {
+      return stop();
+    };
+  }, [reduced, once]);
+  var hidden = state === "hidden";
+  var animated = state !== "static";
+  if (effect === "split-words" && typeof children === "string") {
+    var words = children.split(/\s+/).filter(Boolean);
+    return jsxs(Tag, _objectSpread2(_objectSpread2({
+      ref: setRef,
+      className: className,
+      style: style
+    }, rest), {}, {
+      children: [jsx("span", {
+        className: "sr-only",
+        children: children
+      }), jsx("span", {
+        "aria-hidden": "true",
+        children: words.map(function (word, i) {
+          return jsxs(React.Fragment, {
+            children: [jsx("span", {
+              className: cn("inline-block", animated && BASE, hidden && WORD_HIDDEN),
+              style: animated ? {
+                transitionDelay: "".concat(delay + i * stagger, "ms")
+              } : undefined,
+              children: word
+            }), i < words.length - 1 ? " " : null]
+          }, i);
+        })
+      })]
+    }));
+  }
+  return jsx(Tag, _objectSpread2(_objectSpread2({
+    ref: setRef,
+    "data-reveal": state,
+    className: cn(animated && BASE, hidden && (HIDDEN[effect] || HIDDEN["fade-up"]), className),
+    style: animated && delay ? _objectSpread2({
+      transitionDelay: "".concat(delay, "ms")
+    }, style) : style
+  }, rest), {}, {
+    children: children
+  }));
+});
+Reveal.displayName = "Reveal";
+
+export { Reveal as default };