react-morpheus 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shivek Khurana
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# React Morpheus
+
+A controlled React component for morphing one UI state into another.
+
+`Morpheus` does not manage its own open state. Keep the `expanded` boolean in
+your app state, render your trigger wherever it belongs, and pass the same
+source content to `collapsedContent` so Morpheus can measure and morph from it.
+
+```tsx
+import { Morpheus, MorphAnchor } from "react-morpheus";
+
+function Example() {
+  const [expanded, setExpanded] = useState(false);
+  const source = (
+    <button type="button" onClick={() => setExpanded(true)}>
+      Open
+    </button>
+  );
+
+  return (
+    <>
+      {source}
+      <Morpheus
+        direction="bottom"
+        anchor={MorphAnchor.TopMiddle}
+        expanded={expanded}
+        onClose={() => setExpanded(false)}
+        collapsedContent={source}
+        expandedContent={<div>Expanded content</div>}
+      />
+    </>
+  );
+}
+```
+
+## Scripts
+
+- `bun run build` builds declarations and bundled ESM output.
+- `bun run tag` creates an annotated git tag for the current package version.
+- `bun run tag:push` pushes tags to `origin`.
+- `bun run deploy:npm` builds and publishes to npm.
+- `bun run release:npm` builds, creates the version tag, and publishes to npm.

package/dist/index.d.ts

@@ -0,0 +1,172 @@
+import * as react from 'react';
+import { ReactNode, RefObject } from 'react';
+import { Transition } from 'framer-motion';
+
+type MorphDirection = "top" | "right" | "bottom" | "left";
+declare enum MorphAnchor {
+    LeftTop = "left-top",
+    LeftMiddle = "left-middle",
+    LeftBottom = "left-bottom",
+    TopMiddle = "top-middle",
+    MiddleMiddle = "middle-middle",
+    RightTop = "right-top",
+    RightMiddle = "right-middle",
+    RightBottom = "right-bottom",
+    BottomMiddle = "bottom-middle"
+}
+type PanelSize = {
+    width: number;
+    height: number;
+};
+type ContentOffset = {
+    x: number;
+    y: number;
+};
+type PanelPosition = {
+    left: number;
+    top: number;
+};
+type PanelVisualStyle = {
+    backgroundColor: string;
+    borderRadius: string;
+};
+type MorphSpringPreset = "balanced" | "snappy" | "smooth" | "wobbly" | "heavy";
+type MorphMeasuredSurface = {
+    measured: boolean;
+    size: PanelSize;
+    visualStyle: PanelVisualStyle;
+};
+type MorphSurfaceSnapshot = {
+    size: PanelSize;
+    visualStyle: PanelVisualStyle;
+};
+type MorphMeasurements = {
+    collapsedRef: RefObject<HTMLDivElement | null>;
+    expandedRef: RefObject<HTMLDivElement | null>;
+    collapsed: MorphMeasuredSurface;
+    expanded: MorphMeasuredSurface;
+    ready: boolean;
+};
+type MorphMotionInput = {
+    expanded: boolean;
+    direction: MorphDirection;
+    anchor?: MorphAnchor | undefined;
+    spring: Transition;
+    animationEnabled: boolean;
+    collapsed: MorphMeasuredSurface;
+    expandedSurface: MorphMeasuredSurface;
+};
+type MorphMotionState = {
+    activeSpring: Transition;
+    anchorPosition: PanelPosition;
+    animatedSize: PanelSize;
+    collapsedLayerSize: PanelSize;
+    collapsedToExpandedScale: ContentOffset;
+    expandedLayerSize: PanelSize;
+    sourceGrowthScale: ContentOffset;
+    sourceOpacityTransition: Transition;
+    sourcePosition: PanelPosition;
+    sourceTransition: Transition;
+    targetOpacityTransition: Transition;
+    targetPosition: PanelPosition;
+    targetTransition: Transition;
+    transformOrigin: string;
+    visualStyle: PanelVisualStyle;
+};
+type MorphProps = {
+    direction: MorphDirection;
+    anchor?: MorphAnchor | undefined;
+    expanded: boolean;
+    onOpen?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    collapsedContent: ReactNode;
+    expandedContent: ReactNode;
+    className?: string;
+    overlayColor?: string;
+    overlayOpacity?: number;
+    overlayBlur?: number;
+    spring?: Transition;
+};
+type MorphOverlayProps = {
+    expanded: boolean;
+    onClose?: (() => void) | undefined;
+    color: string;
+    opacity: number;
+    blur: number;
+};
+type MorphMeasurementNodesProps = {
+    collapsedRef: RefObject<HTMLDivElement | null>;
+    expandedRef: RefObject<HTMLDivElement | null>;
+    collapsedContent: ReactNode;
+    expandedContent: ReactNode;
+};
+type MorphShellProps = {
+    expanded: boolean;
+    position: PanelPosition;
+    animatedSize: PanelSize;
+    visualStyle: PanelVisualStyle;
+    overflowVisible: boolean;
+    spring: Transition;
+    onMorphComplete: () => void;
+    onMorphStart: () => void;
+    children: ReactNode;
+};
+type MorphContentLayersProps = {
+    expanded: boolean;
+    collapsedContent: ReactNode;
+    expandedContent: ReactNode;
+    collapsedLayerSize: PanelSize;
+    expandedLayerSize: PanelSize;
+    sourcePosition: PanelPosition;
+    targetPosition: PanelPosition;
+    sourceGrowthScale: ContentOffset;
+    collapsedToExpandedScale: ContentOffset;
+    transformOrigin: string;
+    sourceTransition: Transition;
+    sourceOpacityTransition: Transition;
+    targetTransition: Transition;
+    targetOpacityTransition: Transition;
+    onOpen?: (() => void) | undefined;
+};
+type MorphLayerInteractivityProps = {
+    "aria-hidden": boolean;
+    inert?: boolean;
+};
+
+declare function Morpheus({ direction, anchor, expanded, onOpen, onClose, collapsedContent, expandedContent, className, overlayColor, overlayOpacity, overlayBlur, spring, }: MorphProps): react.JSX.Element;
+
+declare const defaultAnchorByDirection: Record<MorphDirection, MorphAnchor>;
+declare const morphSpringPresets: {
+    balanced: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
+    snappy: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
+    smooth: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
+    wobbly: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
+    heavy: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
+};
+
+export { type ContentOffset, MorphAnchor, type MorphContentLayersProps, type MorphDirection, type MorphLayerInteractivityProps, type MorphMeasuredSurface, type MorphMeasurementNodesProps, type MorphMeasurements, type MorphMotionInput, type MorphMotionState, type MorphOverlayProps, type MorphProps, type MorphShellProps, type MorphSpringPreset, type MorphSurfaceSnapshot, Morpheus, type PanelPosition, type PanelSize, type PanelVisualStyle, Morpheus as default, defaultAnchorByDirection, morphSpringPresets };

package/dist/index.js

@@ -0,0 +1,574 @@
+// src/component.tsx
+import { motion as motion2 } from "framer-motion";
+import { useEffect, useState as useState2 } from "react";
+
+// src/measurement.ts
+import { useLayoutEffect, useRef, useState } from "react";
+var defaultVisualStyle = {
+  backgroundColor: "transparent",
+  borderRadius: "0px"
+};
+function createRAFSchedule(callback) {
+  let frame = null;
+  const schedule = () => {
+    if (frame !== null) {
+      return;
+    }
+    frame = requestAnimationFrame(() => {
+      frame = null;
+      callback();
+    });
+  };
+  const cancel = () => {
+    if (frame === null) {
+      return;
+    }
+    cancelAnimationFrame(frame);
+    frame = null;
+  };
+  return { cancel, schedule };
+}
+function getMeasuredElement(element) {
+  return element.firstElementChild instanceof HTMLElement ? element.firstElementChild : element;
+}
+function getSurfaceVisualStyle(element) {
+  const computedStyle = getComputedStyle(element);
+  return {
+    backgroundColor: computedStyle.backgroundColor,
+    borderRadius: computedStyle.borderTopLeftRadius
+  };
+}
+function measureSurface(element) {
+  const measuredElement = getMeasuredElement(element);
+  const width = measuredElement.offsetWidth;
+  const height = measuredElement.offsetHeight;
+  if (width === 0 || height === 0) {
+    return null;
+  }
+  return {
+    size: { width, height },
+    visualStyle: getSurfaceVisualStyle(measuredElement)
+  };
+}
+function useMeasuredSize(ref, fallbackSize) {
+  const [size, setSize] = useState(fallbackSize);
+  const [visualStyle, setVisualStyle] = useState(defaultVisualStyle);
+  const [measured, setMeasured] = useState(false);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const updateSize = () => {
+      const snapshot = measureSurface(element);
+      if (!snapshot) {
+        return;
+      }
+      setMeasured(true);
+      setSize(
+        (current) => current.width === snapshot.size.width && current.height === snapshot.size.height ? current : snapshot.size
+      );
+      setVisualStyle(
+        (current) => current.backgroundColor === snapshot.visualStyle.backgroundColor && current.borderRadius === snapshot.visualStyle.borderRadius ? current : snapshot.visualStyle
+      );
+    };
+    updateSize();
+    const scheduledUpdateSize = createRAFSchedule(updateSize);
+    const observer = new ResizeObserver(scheduledUpdateSize.schedule);
+    observer.observe(element);
+    if (element.firstElementChild instanceof HTMLElement) {
+      observer.observe(element.firstElementChild);
+    }
+    return () => {
+      scheduledUpdateSize.cancel();
+      observer.disconnect();
+    };
+  }, [fallbackSize.height, fallbackSize.width, ref]);
+  return { measured, size, visualStyle };
+}
+function useMorphMeasurements() {
+  const collapsedRef = useRef(null);
+  const expandedRef = useRef(null);
+  const collapsed = useMeasuredSize(collapsedRef, { width: 1, height: 1 });
+  const expanded = useMeasuredSize(expandedRef, { width: 1, height: 1 });
+  return {
+    collapsedRef,
+    expandedRef,
+    collapsed,
+    expanded,
+    ready: collapsed.measured && expanded.measured
+  };
+}
+
+// src/types.ts
+var MorphAnchor = /* @__PURE__ */ ((MorphAnchor2) => {
+  MorphAnchor2["LeftTop"] = "left-top";
+  MorphAnchor2["LeftMiddle"] = "left-middle";
+  MorphAnchor2["LeftBottom"] = "left-bottom";
+  MorphAnchor2["TopMiddle"] = "top-middle";
+  MorphAnchor2["MiddleMiddle"] = "middle-middle";
+  MorphAnchor2["RightTop"] = "right-top";
+  MorphAnchor2["RightMiddle"] = "right-middle";
+  MorphAnchor2["RightBottom"] = "right-bottom";
+  MorphAnchor2["BottomMiddle"] = "bottom-middle";
+  return MorphAnchor2;
+})(MorphAnchor || {});
+
+// src/motion.ts
+var defaultAnchorByDirection = {
+  top: "bottom-middle" /* BottomMiddle */,
+  right: "left-middle" /* LeftMiddle */,
+  bottom: "top-middle" /* TopMiddle */,
+  left: "right-middle" /* RightMiddle */
+};
+var anchorTransformOrigins = {
+  ["left-top" /* LeftTop */]: "left top",
+  ["left-middle" /* LeftMiddle */]: "left center",
+  ["left-bottom" /* LeftBottom */]: "left bottom",
+  ["top-middle" /* TopMiddle */]: "center top",
+  ["middle-middle" /* MiddleMiddle */]: "center center",
+  ["right-top" /* RightTop */]: "right top",
+  ["right-middle" /* RightMiddle */]: "right center",
+  ["right-bottom" /* RightBottom */]: "right bottom",
+  ["bottom-middle" /* BottomMiddle */]: "center bottom"
+};
+var morphSpringPresets = {
+  balanced: {
+    type: "spring",
+    stiffness: 360,
+    damping: 34,
+    mass: 0.9
+  },
+  snappy: {
+    type: "spring",
+    stiffness: 520,
+    damping: 42,
+    mass: 0.7
+  },
+  smooth: {
+    type: "spring",
+    stiffness: 300,
+    damping: 32,
+    mass: 1
+  },
+  wobbly: {
+    type: "spring",
+    stiffness: 260,
+    damping: 18,
+    mass: 0.9
+  },
+  heavy: {
+    type: "spring",
+    stiffness: 220,
+    damping: 34,
+    mass: 1.6
+  }
+};
+var defaultPanelSpring = morphSpringPresets.balanced;
+var contentFade = {
+  duration: 0.22,
+  ease: "easeOut"
+};
+var sourceContentFade = {
+  duration: 0.12,
+  ease: "easeOut"
+};
+var sourceReturnDelay = 0.06;
+var sourceGrowthRatio = 2;
+var instantTransition = { duration: 0 };
+var createSourceContentMotion = (spring) => ({
+  opacity: sourceContentFade,
+  scaleX: spring,
+  scaleY: spring,
+  left: spring,
+  top: spring
+});
+var createTargetContentMotion = (spring) => ({
+  opacity: contentFade,
+  scaleX: spring,
+  scaleY: spring,
+  left: spring,
+  top: spring
+});
+var safeScale = (from, to) => to === 0 ? 1 : from / to;
+function getAnchoredPanelPosition(anchor, collapsedSize, targetSize) {
+  const alignLeft = 0;
+  const alignCenterX = (collapsedSize.width - targetSize.width) / 2;
+  const alignRight = collapsedSize.width - targetSize.width;
+  const alignTop = 0;
+  const alignCenterY = (collapsedSize.height - targetSize.height) / 2;
+  const alignBottom = collapsedSize.height - targetSize.height;
+  switch (anchor) {
+    case "left-top" /* LeftTop */:
+      return { left: alignLeft, top: alignTop };
+    case "left-middle" /* LeftMiddle */:
+      return { left: alignLeft, top: alignCenterY };
+    case "left-bottom" /* LeftBottom */:
+      return { left: alignLeft, top: alignBottom };
+    case "top-middle" /* TopMiddle */:
+      return { left: alignCenterX, top: alignTop };
+    case "middle-middle" /* MiddleMiddle */:
+      return { left: alignCenterX, top: alignCenterY };
+    case "right-top" /* RightTop */:
+      return { left: alignRight, top: alignTop };
+    case "right-middle" /* RightMiddle */:
+      return { left: alignRight, top: alignCenterY };
+    case "right-bottom" /* RightBottom */:
+      return { left: alignRight, top: alignBottom };
+    case "bottom-middle" /* BottomMiddle */:
+      return { left: alignCenterX, top: alignBottom };
+  }
+}
+function invertPosition(position) {
+  return {
+    left: -(position.left ?? 0),
+    top: -(position.top ?? 0)
+  };
+}
+function getLayerInteractivityProps(interactive) {
+  return interactive ? { "aria-hidden": false } : { "aria-hidden": true, inert: true };
+}
+function getMorphMotionState({
+  expanded,
+  direction,
+  anchor,
+  spring,
+  animationEnabled,
+  collapsed,
+  expandedSurface
+}) {
+  const collapsedLayerSize = collapsed.size;
+  const expandedLayerSize = expandedSurface.size;
+  const animatedSize = expanded ? expandedLayerSize : collapsedLayerSize;
+  const visualStyle = expanded ? expandedSurface.visualStyle : collapsed.visualStyle;
+  const panelAnchor = anchor ?? defaultAnchorByDirection[direction];
+  const sourcePanelPosition = { left: 0, top: 0 };
+  const targetPanelPosition = getAnchoredPanelPosition(
+    panelAnchor,
+    collapsedLayerSize,
+    expandedLayerSize
+  );
+  const activeSpring = animationEnabled ? spring : instantTransition;
+  return {
+    activeSpring,
+    anchorPosition: expanded ? targetPanelPosition : sourcePanelPosition,
+    animatedSize,
+    collapsedLayerSize,
+    collapsedToExpandedScale: {
+      x: safeScale(collapsedLayerSize.width, expandedLayerSize.width),
+      y: safeScale(collapsedLayerSize.height, expandedLayerSize.height)
+    },
+    expandedLayerSize,
+    sourceGrowthScale: {
+      x: sourceGrowthRatio,
+      y: sourceGrowthRatio
+    },
+    sourceOpacityTransition: {
+      ...sourceContentFade,
+      delay: expanded ? 0 : sourceReturnDelay
+    },
+    sourcePosition: expanded ? invertPosition(targetPanelPosition) : sourcePanelPosition,
+    sourceTransition: createSourceContentMotion(activeSpring),
+    targetOpacityTransition: { ...contentFade, delay: expanded ? 0.03 : 0 },
+    targetPosition: expanded ? sourcePanelPosition : targetPanelPosition,
+    targetTransition: createTargetContentMotion(activeSpring),
+    transformOrigin: anchorTransformOrigins[panelAnchor],
+    visualStyle
+  };
+}
+
+// src/overlay.tsx
+import { AnimatePresence, motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+function getOverlayBackgroundColor(color, opacity) {
+  if (/^#[0-9a-f]{6}$/i.test(color)) {
+    const red = Number.parseInt(color.slice(1, 3), 16);
+    const green = Number.parseInt(color.slice(3, 5), 16);
+    const blue = Number.parseInt(color.slice(5, 7), 16);
+    return `rgb(${red} ${green} ${blue} / ${opacity})`;
+  }
+  return color;
+}
+function MorphOverlay({
+  expanded,
+  onClose,
+  color,
+  opacity,
+  blur
+}) {
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && onClose ? /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      type: "button",
+      "aria-label": "Close morph",
+      className: "fixed inset-0 z-40 cursor-default",
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 1
+      },
+      exit: {
+        opacity: 0
+      },
+      transition: { duration: 0.18, ease: "easeOut" },
+      style: {
+        backdropFilter: `blur(${blur}px)`,
+        backgroundColor: getOverlayBackgroundColor(color, opacity),
+        WebkitBackdropFilter: `blur(${blur}px)`
+      },
+      onClick: onClose
+    }
+  ) : null });
+}
+
+// src/component.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var liveSurfaceContentClassName = "absolute [&>*:first-child]:!border-transparent [&>*:first-child]:!bg-transparent [&>*:first-child]:!shadow-none";
+function MorphMeasurementNodes({
+  collapsedRef,
+  expandedRef,
+  collapsedContent,
+  expandedContent
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: collapsedRef,
+        "aria-hidden": "true",
+        className: "invisible absolute inset-x-0 top-0 pointer-events-none",
+        children: collapsedContent
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: expandedRef,
+        "aria-hidden": "true",
+        className: "invisible absolute inset-x-0 top-0 pointer-events-none",
+        children: expandedContent
+      }
+    )
+  ] });
+}
+function MorphShell({
+  expanded,
+  position,
+  animatedSize,
+  visualStyle,
+  overflowVisible,
+  spring,
+  onMorphComplete,
+  onMorphStart,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(
+    motion2.div,
+    {
+      className: `absolute shadow-xs ${expanded ? "z-50" : "z-0"}`,
+      initial: false,
+      animate: {
+        width: animatedSize.width,
+        height: animatedSize.height,
+        backgroundColor: visualStyle.backgroundColor,
+        borderRadius: visualStyle.borderRadius,
+        ...position
+      },
+      onAnimationComplete: onMorphComplete,
+      onAnimationStart: onMorphStart,
+      style: {
+        overflow: overflowVisible ? "visible" : "hidden"
+      },
+      transition: spring,
+      children
+    }
+  );
+}
+function MorphContentLayers({
+  expanded,
+  collapsedContent,
+  expandedContent,
+  collapsedLayerSize,
+  expandedLayerSize,
+  sourcePosition,
+  targetPosition,
+  sourceGrowthScale,
+  collapsedToExpandedScale,
+  transformOrigin,
+  sourceTransition,
+  sourceOpacityTransition,
+  targetTransition,
+  targetOpacityTransition,
+  onOpen
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      motion2.div,
+      {
+        ...getLayerInteractivityProps(!expanded),
+        className: liveSurfaceContentClassName,
+        initial: false,
+        animate: {
+          opacity: expanded ? 0 : 1,
+          scaleX: expanded ? sourceGrowthScale.x : 1,
+          scaleY: expanded ? sourceGrowthScale.y : 1,
+          ...sourcePosition
+        },
+        transition: {
+          ...sourceTransition,
+          opacity: sourceOpacityTransition
+        },
+        onClick: expanded ? void 0 : onOpen,
+        style: {
+          width: collapsedLayerSize.width,
+          height: collapsedLayerSize.height,
+          pointerEvents: expanded ? "none" : "auto",
+          transformOrigin
+        },
+        children: collapsedContent
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      motion2.div,
+      {
+        ...getLayerInteractivityProps(expanded),
+        className: liveSurfaceContentClassName,
+        initial: false,
+        animate: {
+          opacity: expanded ? 1 : 0,
+          scaleX: expanded ? 1 : collapsedToExpandedScale.x,
+          scaleY: expanded ? 1 : collapsedToExpandedScale.y,
+          ...targetPosition
+        },
+        transition: {
+          ...targetTransition,
+          opacity: targetOpacityTransition
+        },
+        style: {
+          width: expandedLayerSize.width,
+          height: expandedLayerSize.height,
+          pointerEvents: expanded ? "auto" : "none",
+          transformOrigin
+        },
+        children: expandedContent
+      }
+    )
+  ] });
+}
+function Morpheus({
+  direction,
+  anchor,
+  expanded,
+  onOpen,
+  onClose,
+  collapsedContent,
+  expandedContent,
+  className = "relative inline-block align-top",
+  overlayColor = "#05070a",
+  overlayOpacity = 0.54,
+  overlayBlur = 0,
+  spring = defaultPanelSpring
+}) {
+  const measurements = useMorphMeasurements();
+  const [animationEnabled, setAnimationEnabled] = useState2(false);
+  const [shellOverflowVisible, setShellOverflowVisible] = useState2(false);
+  useEffect(() => {
+    if (!measurements.ready) {
+      return;
+    }
+    const frame = requestAnimationFrame(() => setAnimationEnabled(true));
+    return () => cancelAnimationFrame(frame);
+  }, [measurements.ready]);
+  const motionState = getMorphMotionState({
+    expanded,
+    direction,
+    anchor,
+    spring,
+    animationEnabled,
+    collapsed: measurements.collapsed,
+    expandedSurface: measurements.expanded
+  });
+  const overflowVisible = expanded && shellOverflowVisible;
+  const shouldRenderStaticSource = !measurements.ready && !expanded;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      MorphOverlay,
+      {
+        expanded,
+        onClose,
+        color: overlayColor,
+        opacity: overlayOpacity,
+        blur: overlayBlur
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className, "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx2(
+        MorphMeasurementNodes,
+        {
+          collapsedRef: measurements.collapsedRef,
+          expandedRef: measurements.expandedRef,
+          collapsedContent,
+          expandedContent
+        }
+      ),
+      /* @__PURE__ */ jsx2("div", { className: "relative mx-auto block w-fit align-top", children: shouldRenderStaticSource ? /* @__PURE__ */ jsx2("div", { className: "inline-block align-top", onClick: onOpen, children: collapsedContent }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              visibility: "hidden",
+              width: motionState.collapsedLayerSize.width,
+              height: motionState.collapsedLayerSize.height
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          MorphShell,
+          {
+            expanded,
+            position: motionState.anchorPosition,
+            animatedSize: motionState.animatedSize,
+            visualStyle: motionState.visualStyle,
+            overflowVisible,
+            spring: motionState.activeSpring,
+            onMorphComplete: () => {
+              if (expanded) {
+                setShellOverflowVisible(true);
+              }
+            },
+            onMorphStart: () => setShellOverflowVisible(false),
+            children: /* @__PURE__ */ jsx2(
+              MorphContentLayers,
+              {
+                expanded,
+                collapsedContent,
+                expandedContent,
+                collapsedLayerSize: motionState.collapsedLayerSize,
+                expandedLayerSize: motionState.expandedLayerSize,
+                sourcePosition: motionState.sourcePosition,
+                targetPosition: motionState.targetPosition,
+                sourceGrowthScale: motionState.sourceGrowthScale,
+                collapsedToExpandedScale: motionState.collapsedToExpandedScale,
+                transformOrigin: motionState.transformOrigin,
+                sourceTransition: motionState.sourceTransition,
+                sourceOpacityTransition: motionState.sourceOpacityTransition,
+                targetTransition: motionState.targetTransition,
+                targetOpacityTransition: motionState.targetOpacityTransition,
+                onOpen
+              }
+            )
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+}
+export {
+  MorphAnchor,
+  Morpheus,
+  Morpheus as default,
+  defaultAnchorByDirection,
+  morphSpringPresets
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-morpheus",
+  "version": "0.1.0",
+  "description": "A React component for morphing one surface into other.",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --external react --external react-dom --external framer-motion --clean",
+    "check": "tsc --noEmit",
+    "release:minor": "bun run scripts/release.ts minor",
+    "release:major": "bun run scripts/release.ts major"
+  },
+  "peerDependencies": {
+    "framer-motion": "^12.42.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.14",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "framer-motion": "^12.42.2",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3"
+  }
+}