@zyncat/ui 0.10.0 → 0.12.0

package/dist/menu-surface.css

@@ -0,0 +1,127 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  /* The floating menu surface shared by Select's listbox and Dropdown's menu: panel chrome,
+   scroll box, row skeleton and the travelling hover pill. Everything that differs between the
+   two is a custom property set by the component, so neither sheet has to restate a rule.
+   Enter/exit are Motion-owned inline styles; transform-origin belongs to the component. */
+
+  .menu-surface {
+    position: fixed;
+    margin: 0;
+    inset: auto; /* JS sets top/left - anchor() needs the top layer, which we don't use */
+    z-index: var(
+      --layer-overlay
+    ); /* base of the overlay band (tokens/layers.css) - a nested menu is pushed one step up */
+    width: max-content;
+    max-width: var(--menu-max-width, min(22rem, 92vw));
+    padding: var(--space-1);
+    background: var(--bg-surface-raised);
+    border: var(--border-hairline) solid var(--border-default);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    outline: none;
+    font-family: var(--font-sans);
+  }
+
+  /* data-side/data-align are written by useAnchorPosition after any flip - grow from the anchored edge. */
+  .menu-surface[data-align='start'] {
+    --menu-origin: var(--space-4);
+  }
+  .menu-surface[data-align='center'] {
+    --menu-origin: 50%;
+  }
+  .menu-surface[data-align='end'] {
+    --menu-origin: calc(100% - var(--space-4));
+  }
+  .menu-surface[data-side='bottom'] {
+    transform-origin: var(--menu-origin) top;
+  }
+  .menu-surface[data-side='top'] {
+    transform-origin: var(--menu-origin) bottom;
+  }
+  .menu-surface[data-side='right'] {
+    transform-origin: left var(--menu-origin);
+  }
+  .menu-surface[data-side='left'] {
+    transform-origin: right var(--menu-origin);
+  }
+
+  .menu-scroller {
+    max-height: var(--menu-max-height, 16.5rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+  }
+  .menu-scroller::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+  /* position: relative keeps the row above the pill, which is a single absolute child. */
+  .menu-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--menu-row-padding, var(--space-1)) var(--menu-row-inline, var(--space-3));
+    margin-block-end: var(--menu-row-gap, var(--space-1));
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    color: var(--text-body);
+  }
+
+  .menu-row__icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--icon-sm);
+    color: var(--text-muted);
+  }
+  .menu-row__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+  .menu-row__label {
+    font-size: var(--size-body);
+    line-height: var(--leading-body);
+    font-weight: var(--weight-medium);
+  }
+  .menu-row__desc {
+    font: var(--type-caption);
+    color: var(--text-subtle);
+  }
+  .menu-row__label,
+  .menu-row__desc {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .menu-group-label {
+    padding: var(--space-2) var(--menu-row-inline, var(--space-3)) var(--space-1);
+    font: var(--type-micro);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-caps);
+    color: var(--text-subtle);
+  }
+
+  /* One persistent fill (../../../motion/glide) that travels to the active row and animates its
+   real size, so it is never clipped and never scales. GlidePill writes x/y/width/height inline -
+   nothing here may transition those. */
+  .menu-glide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    border-radius: var(--radius-sm);
+    background: var(--menu-glide-fill, var(--neutral-wash));
+    pointer-events: none;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+}

package/dist/modal.css

@@ -1,9 +1,13 @@
-/* modal.css - the unpainted modal surface: the shell layer centers the panel and
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  /* modal.css - the unpainted modal surface: the shell layer centers the panel and
    constrains it to the layer box. Everything else is the consumer's paint. */
-.overlay-layer--modal {
-  place-items: center;
-}
-.overlay-panel--modal {
-  max-width: 100%;
-  max-height: 100%;
+  .overlay-layer--modal {
+    place-items: center;
+  }
+  .overlay-panel--modal {
+    max-width: 100%;
+    max-height: 100%;
+  }
 }

package/dist/modal.js

@@ -1,27 +1,26 @@
-'use client';import { ModalShell } from './chunk-K5X2GCXU.js';
-import './chunk-ZCOUPPTI.js';
-import { ovCloneTrigger, OverlayPortal } from './chunk-RCONNA7I.js';
-import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
-import { Presence } from './chunk-356HZMT4.js';
-import './chunk-XWUWYSCT.js';
-import './chunk-YGCVWGUG.js';
+'use client';import { OV_TAKEOVER_TIMING, ModalShell } from './chunk-FONOS5RN.js';
+import './chunk-A5WTZACK.js';
+import { ovCloneTrigger, OverlayPortal } from './chunk-VAXCXZ53.js';
+import './chunk-JY6A2ZJZ.js';
+import { popOut, popIn } from './chunk-HDSFWZ7L.js';
+import { Presence } from './chunk-DDRSMHN4.js';
+import { resolveMotionTiming } from './chunk-TUTXXC3W.js';
+import './chunk-M43IOM5C.js';
+import './chunk-IJS7TPGV.js';
 import { useControllable } from './chunk-MMRIQNEN.js';
-import './chunk-S5ZTZANS.js';
-import './chunk-VTJTGVZZ.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import './chunk-DMX2F6B4.js';
 import './chunk-QGNC7LH5.js';
 import './modal.css';
 import { useRef, useId, Fragment } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var MODAL_TIMING = {
-  open: { duration: "slow", ease: "entrance" },
-  close: { duration: "base", ease: "standard" }
-};
 function Modal({
   open: controlledOpen,
   defaultOpen = false,
   onOpenChange,
   trigger = null,
+  activateOn,
   dismissible = true,
   container = null,
   id,
@@ -35,14 +34,22 @@ function Modal({
   const autoId = useId();
   const panelId = id || "modal-" + autoId;
   const close = () => setOpen(false);
-  const timings = resolveMotionTiming(animation, MODAL_TIMING);
+  const timings = resolveMotionTiming(animation, OV_TAKEOVER_TIMING);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
+    ovCloneTrigger(trigger, {
+      open,
+      onPress: () => setOpen(true),
+      panelId,
+      haspopup: "dialog",
+      triggerRef,
+      activateOn
+    }),
     /* @__PURE__ */ jsx(OverlayPortal, { container, children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
       ModalShell,
       {
-        animate: { opacity: [0, 1], scale: [0.98, 1], timing: timings.open },
-        exit: { opacity: [0], scale: [0.98], timing: timings.close },
+        timings,
+        animate: popIn(UIMotion.scale.panel, timings.open),
+        exit: popOut(UIMotion.scale.panel, timings.close),
         layerClass: "overlay-layer--modal",
         panelClass: "overlay-panel--modal",
         panelId,

package/dist/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/composites/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAYA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA,EAAW;AAAA,EAC3C,KAAA,EAAO,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA;AACnC,CAAA;AAiCO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,EAAM,cAAA;AAAA,EACN,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,WAAA,GAAc,IAAA;AAAA,EACd,SAAA,GAAY,IAAA;AAAA,EACZ,EAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAe;AACb,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,IAAI,eAAA,CAAgB,cAAA,EAAgB,aAAa,YAAY,CAAA;AACjF,EAAA,MAAM,UAAA,GAAa,OAAoB,IAAI,CAAA;AAC3C,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,OAAA,GAAU,MAAM,QAAA,GAAW,MAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,MAAM,OAAA,CAAQ,KAAK,CAAA;AACjC,EAAA,MAAM,OAAA,GAAU,mBAAA,CAAoB,SAAA,EAAW,YAAY,CAAA;AAE3D,EAAA,4BACG,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,cAAA,CAAe,OAAA,EAAS,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA,EAAG,OAAA,EAAS,QAAA,EAAU,QAAA,EAAU,UAAA,EAAY,CAAA;AAAA,oBACxG,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,YACE,QAAA,EAAA,IAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAC,GAAG,CAAC,CAAA,EAAG,KAAA,EAAO,CAAC,IAAA,EAAM,CAAC,CAAA,EAAG,MAAA,EAAQ,QAAQ,IAAA,EAAK;AAAA,QACnE,IAAA,EAAM,EAAE,OAAA,EAAS,CAAC,CAAC,CAAA,EAAG,KAAA,EAAO,CAAC,IAAI,CAAA,EAAG,MAAA,EAAQ,OAAA,CAAQ,KAAA,EAAM;AAAA,QAC3D,UAAA,EAAW,sBAAA;AAAA,QACX,UAAA,EAAW,sBAAA;AAAA,QACX,OAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,QACA,YAAA,EAAc,KAAA;AAAA,QACd,UAAA,EAAY,SAAA;AAAA,QACZ,UAAA;AAAA,QAEC;AAAA,OAAA;AAAA,MAZG;AAAA,OAeV,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"modal.js","sourcesContent":["'use client';\n\nimport './modal.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport type { DataAttributes } from '../../../dom-props';\n\nconst MODAL_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'base', ease: 'standard' },\n} as const;\n\nexport interface ModalProps {\n  /** Controlled open state. Omit to stay uncontrolled. */\n  open?: boolean;\n  /** Initial state when uncontrolled. Default false. */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n\n  /** Cloned to open the modal on click. */\n  trigger?: ReactElement | null;\n\n  /** Scrim/Esc dismissal. Default true. */\n  dismissible?: boolean;\n\n  /** Mount inside this element instead of the viewport - it must be positioned (`position: relative` or similar).\n   *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */\n  container?: HTMLElement | null;\n\n  /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the panel - this is where your paint goes.\n   *  Centered by default; `width: 100%; height: 100%` makes it full-bleed. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Standard attributes forwarded to the layer behind the panel - set `--bg-overlay` here to retint the scrim. */\n  layerProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n  animation?: DisableableAnimation;\n  /** The ENTIRE surface - paint AND semantics (`role=\"dialog\"`, a label). Nothing is painted for you. */\n  children: ReactNode;\n}\n\nexport function Modal({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  dismissible = true,\n  container = null,\n  id,\n  htmlProps,\n  layerProps,\n  animation,\n  children,\n}: ModalProps) {\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const autoId = useId();\n  const panelId = id || 'modal-' + autoId;\n  const close = () => setOpen(false);\n  const timings = resolveMotionTiming(animation, MODAL_TIMING);\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n      <OverlayPortal container={container}>\n        <Presence>\n          {open && (\n            <ModalShell\n              key=\"modal\"\n              animate={{ opacity: [0, 1], scale: [0.98, 1], timing: timings.open }}\n              exit={{ opacity: [0], scale: [0.98], timing: timings.close }}\n              layerClass=\"overlay-layer--modal\"\n              panelClass=\"overlay-panel--modal\"\n              panelId={panelId}\n              dismissible={dismissible}\n              container={container}\n              requestClose={close}\n              panelProps={htmlProps}\n              layerProps={layerProps}\n            >\n              {children}\n            </ModalShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/composites/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAkDO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,EAAM,cAAA;AAAA,EACN,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,UAAA;AAAA,EACA,WAAA,GAAc,IAAA;AAAA,EACd,SAAA,GAAY,IAAA;AAAA,EACZ,EAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAe;AACb,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,IAAI,eAAA,CAAgB,cAAA,EAAgB,aAAa,YAAY,CAAA;AACjF,EAAA,MAAM,UAAA,GAAa,OAAoB,IAAI,CAAA;AAC3C,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,OAAA,GAAU,MAAM,QAAA,GAAW,MAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,MAAM,OAAA,CAAQ,KAAK,CAAA;AACjC,EAAA,MAAM,OAAA,GAAU,mBAAA,CAAoB,SAAA,EAAW,kBAAkB,CAAA;AAEjE,EAAA,4BACG,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,cAAA,CAAe,OAAA,EAAS;AAAA,MACvB,IAAA;AAAA,MACA,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAC3B,OAAA;AAAA,MACA,QAAA,EAAU,QAAA;AAAA,MACV,UAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,oBACD,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,YACE,QAAA,EAAA,IAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,OAAA;AAAA,QACA,SAAS,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,KAAA,EAAO,QAAQ,IAAI,CAAA;AAAA,QACjD,MAAM,MAAA,CAAO,QAAA,CAAS,KAAA,CAAM,KAAA,EAAO,QAAQ,KAAK,CAAA;AAAA,QAChD,UAAA,EAAW,sBAAA;AAAA,QACX,UAAA,EAAW,sBAAA;AAAA,QACX,OAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,QACA,YAAA,EAAc,KAAA;AAAA,QACd,UAAA,EAAY,SAAA;AAAA,QACZ,UAAA;AAAA,QAEC;AAAA,OAAA;AAAA,MAbG;AAAA,OAgBV,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"modal.js","sourcesContent":["'use client';\n\nimport './modal.css';\n\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport { Presence } from '../../../motion/presence';\nimport { popIn, popOut } from '../../../motion/presets';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell, OV_TAKEOVER_TIMING } from '../../internal/overlay/modal';\nimport type { ActivateOn } from '../../internal/utils/activation';\n\nexport interface ModalProps {\n  /** Controlled open state. Omit to stay uncontrolled. */\n  open?: boolean;\n  /** Initial state when uncontrolled. Default false. */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n\n  /** Cloned to open the modal. */\n  trigger?: ReactElement | null;\n  /** Whether the trigger fires on `pointerdown` (snappier) or waits for `click`. @default 'click' */\n  activateOn?: ActivateOn;\n\n  /** Scrim/Esc dismissal. Default true. */\n  dismissible?: boolean;\n\n  /** Mount inside this element instead of the viewport - it must be positioned (`position: relative` or similar).\n   *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */\n  container?: HTMLElement | null;\n\n  /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the panel - this is where your paint goes.\n   *  Centered by default; `width: 100%; height: 100%` makes it full-bleed. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Standard attributes forwarded to the layer behind the panel - set `--bg-overlay` here to retint the scrim. */\n  layerProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n  animation?: DisableableAnimation;\n  /** The ENTIRE surface - paint AND semantics (`role=\"dialog\"`, a label). Nothing is painted for you. */\n  children: ReactNode;\n}\n\nexport function Modal({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  activateOn,\n  dismissible = true,\n  container = null,\n  id,\n  htmlProps,\n  layerProps,\n  animation,\n  children,\n}: ModalProps) {\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const autoId = useId();\n  const panelId = id || 'modal-' + autoId;\n  const close = () => setOpen(false);\n  const timings = resolveMotionTiming(animation, OV_TAKEOVER_TIMING);\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, {\n        open,\n        onPress: () => setOpen(true),\n        panelId,\n        haspopup: 'dialog',\n        triggerRef,\n        activateOn,\n      })}\n      <OverlayPortal container={container}>\n        <Presence>\n          {open && (\n            <ModalShell\n              key=\"modal\"\n              timings={timings}\n              animate={popIn(UIMotion.scale.panel, timings.open)}\n              exit={popOut(UIMotion.scale.panel, timings.close)}\n              layerClass=\"overlay-layer--modal\"\n              panelClass=\"overlay-panel--modal\"\n              panelId={panelId}\n              dismissible={dismissible}\n              container={container}\n              requestClose={close}\n              panelProps={htmlProps}\n              layerProps={layerProps}\n            >\n              {children}\n            </ModalShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}

package/dist/morphing-text.css

@@ -0,0 +1,84 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .morphing-text {
+    --morphing-text-ink: var(--text-strong);
+    --morphing-text-size: var(--size-display-lg);
+    --morphing-text-weight: var(--weight-medium);
+    --morphing-text-leading: 1.2;
+    --morphing-text-tracking: var(--tracking-display);
+    --morphing-text-smear: 1;
+    --morphing-text-rule-ink: var(--text-strong);
+    --morphing-text-rule-accent: var(--accent);
+    --morphing-text-rule-height: 1px;
+    --morphing-text-rule-gap: var(--space-3);
+    --morphing-text-rule-rest: 0.1;
+    --morphing-text-rule-lift: 0.3;
+
+    position: relative;
+    display: block;
+    font-family: var(--font-sans);
+    font-size: var(--morphing-text-size);
+    font-weight: var(--morphing-text-weight);
+    line-height: var(--morphing-text-leading);
+    letter-spacing: var(--morphing-text-tracking);
+    color: var(--morphing-text-ink);
+  }
+
+  .morphing-text__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .morphing-text__stage {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: calc(1em * var(--morphing-text-leading));
+  }
+
+  .morphing-text__word {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    translate: -50% 0;
+    white-space: pre;
+  }
+
+  .morphing-text__letter {
+    --morphing-text-letter-blur: 0;
+
+    display: inline-block;
+  }
+
+  .morphing-text__stage--fused .morphing-text__letter {
+    filter: blur(calc(var(--morphing-text-letter-blur) * var(--morphing-text-smear) * 1em));
+  }
+
+  .morphing-text__rule {
+    --morphing-text-heat: 0;
+
+    display: block;
+    height: var(--morphing-text-rule-height);
+    margin-block-start: var(--morphing-text-rule-gap);
+    margin-inline: auto;
+    opacity: calc(var(--morphing-text-rule-rest) + var(--morphing-text-rule-lift) * var(--morphing-text-heat));
+    background: color-mix(
+      in oklab,
+      var(--morphing-text-rule-accent) calc(var(--morphing-text-heat) * 100%),
+      var(--morphing-text-rule-ink)
+    );
+  }
+
+  .morphing-text__defs {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+}

package/dist/morphing-text.js

@@ -0,0 +1,256 @@
+'use client';import { loop } from './chunk-IJS7TPGV.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './morphing-text.css';
+import { useRef, useId, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_HOLD_MS = 1500;
+var MORPH_MS = 900;
+var OUT_STAGGER = 0.18;
+var OUT_WINDOW = 0.82;
+var IN_LEAD = 0.14;
+var IN_STAGGER = 0.18;
+var IN_WINDOW = 0.68;
+var SMEAR_CURVE = 1.1;
+var FUSE_OPACITY_CURVE = 0.42;
+var LETTER_BLUR_EM = 0.115;
+var IN_DROP_EM = 0.06;
+var OUT_SHRINK = 0.02;
+var IN_SCALE_FLOOR = 0.98;
+var IN_GROWTH = 0.02;
+var THRESHOLD_BLUR_RATIO = 0.023;
+var THRESHOLD_SWELL_RATIO = 0.0104;
+var ALPHA_GAIN = 21;
+var ALPHA_BIAS = -8.4;
+var FILTER_REGION_X = "-30%";
+var FILTER_REGION_Y = "-60%";
+var FILTER_REGION_WIDTH = "160%";
+var FILTER_REGION_HEIGHT = "220%";
+var RULE_MIN_WIDTH = 2;
+var SETTLED = 1e-3;
+var FALLBACK_FONT_SIZE = 48;
+var LETTER_CLASS = "morphing-text__letter";
+var FUSED_CLASS = "morphing-text__stage--fused";
+var BLUR_PROPERTY = "--morphing-text-letter-blur";
+var HEAT_PROPERTY = "--morphing-text-heat";
+var THRESHOLD_MATRIX = `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${ALPHA_GAIN} ${ALPHA_BIAS}`;
+var clampUnit = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+var easeInOut = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+var letterProgress = (progress, lead, stagger, span, index, count) => clampUnit((progress - (lead + stagger * (count > 1 ? index / (count - 1) : 0))) / span);
+function writeLetters(host, word) {
+  host.textContent = "";
+  const letters = [];
+  for (const character of word) {
+    if (character === " ") {
+      host.appendChild(document.createTextNode(" "));
+      continue;
+    }
+    const span = document.createElement("span");
+    span.className = LETTER_CLASS;
+    span.textContent = character;
+    host.appendChild(span);
+    letters.push(span);
+  }
+  return letters;
+}
+function paintLetter(el, blur, opacity, shift, scale) {
+  el.style.setProperty(BLUR_PROPERTY, blur.toFixed(4));
+  el.style.opacity = clampUnit(opacity).toFixed(3);
+  el.style.translate = `0 ${shift.toFixed(4)}em`;
+  el.style.scale = scale.toFixed(4);
+}
+function fuse(parts, on) {
+  parts.stage.classList.toggle(FUSED_CLASS, on);
+  parts.stage.style.filter = on ? `url(#${parts.filterId})` : "";
+}
+function measure(parts, cycle) {
+  cycle.widthOut = parts.outgoing.getBoundingClientRect().width;
+  cycle.widthIn = parts.incoming.getBoundingClientRect().width;
+  cycle.fontSize = parseFloat(getComputedStyle(parts.stage).fontSize) || FALLBACK_FONT_SIZE;
+}
+function draw(parts, cycle, progress) {
+  cycle.progress = progress;
+  const heat = Math.sin(progress * Math.PI);
+  if (progress <= SETTLED || progress >= 1 - SETTLED) {
+    const arrived = progress >= 1 - SETTLED;
+    fuse(parts, false);
+    for (const el of cycle.out) paintLetter(el, 0, arrived ? 0 : 1, 0, 1);
+    for (const el of cycle.into) paintLetter(el, 0, arrived ? 1 : 0, 0, 1);
+  } else {
+    fuse(parts, true);
+    parts.threshold.setAttribute(
+      "stdDeviation",
+      (cycle.fontSize * (THRESHOLD_BLUR_RATIO + THRESHOLD_SWELL_RATIO * heat)).toFixed(3)
+    );
+    for (let i = 0; i < cycle.out.length; i++) {
+      const p = letterProgress(progress, 0, OUT_STAGGER, OUT_WINDOW, i, cycle.out.length);
+      paintLetter(
+        cycle.out[i],
+        LETTER_BLUR_EM * Math.pow(p, SMEAR_CURVE),
+        Math.pow(1 - p, FUSE_OPACITY_CURVE),
+        -0.05 * p,
+        1 - OUT_SHRINK * p
+      );
+    }
+    for (let i = 0; i < cycle.into.length; i++) {
+      const p = letterProgress(progress, IN_LEAD, IN_STAGGER, IN_WINDOW, i, cycle.into.length);
+      paintLetter(
+        cycle.into[i],
+        LETTER_BLUR_EM * Math.pow(1 - p, SMEAR_CURVE),
+        Math.pow(p, FUSE_OPACITY_CURVE),
+        IN_DROP_EM * (1 - p),
+        IN_SCALE_FLOOR + IN_GROWTH * p
+      );
+    }
+  }
+  const width = cycle.widthOut + (cycle.widthIn - cycle.widthOut) * easeInOut(progress);
+  parts.rule.style.width = `${Math.max(RULE_MIN_WIDTH, width).toFixed(2)}px`;
+  parts.rule.style.setProperty(HEAT_PROPERTY, heat.toFixed(3));
+}
+function build(parts, cycle, words) {
+  const current = words[cycle.index % words.length];
+  cycle.out = writeLetters(parts.outgoing, current);
+  cycle.into = writeLetters(parts.incoming, words[(cycle.index + 1) % words.length]);
+  parts.label.textContent = current;
+  measure(parts, cycle);
+}
+function settle(parts, cycle, words) {
+  cycle.index = 0;
+  cycle.elapsed = 0;
+  cycle.held = false;
+  cycle.resting = true;
+  build(parts, cycle, words);
+  draw(parts, cycle, 0);
+}
+function MorphingText({
+  words,
+  hold = DEFAULT_HOLD_MS,
+  speed = 1,
+  className = "",
+  style,
+  htmlProps
+}) {
+  const rootRef = useRef(null);
+  const stageRef = useRef(null);
+  const outgoingRef = useRef(null);
+  const incomingRef = useRef(null);
+  const ruleRef = useRef(null);
+  const labelRef = useRef(null);
+  const thresholdRef = useRef(null);
+  const wordsRef = useRef(words);
+  const holdRef = useRef(hold);
+  const speedRef = useRef(speed);
+  const filterId = `morphing-text-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const key = JSON.stringify(words);
+  useEffect(() => {
+    wordsRef.current = words;
+    holdRef.current = Number.isFinite(hold) && hold >= 0 ? hold : DEFAULT_HOLD_MS;
+    speedRef.current = speed;
+  }, [words, hold, speed]);
+  useEffect(() => {
+    const root = rootRef.current;
+    const stage = stageRef.current;
+    const outgoing = outgoingRef.current;
+    const incoming = incomingRef.current;
+    const rule = ruleRef.current;
+    const label = labelRef.current;
+    const threshold = thresholdRef.current;
+    if (!root || !stage || !outgoing || !incoming || !rule || !label || !threshold) return;
+    const parts = { stage, outgoing, incoming, rule, label, threshold, filterId };
+    const cycle = {
+      index: 0,
+      elapsed: 0,
+      held: false,
+      resting: true,
+      progress: 0,
+      out: [],
+      into: [],
+      widthOut: 0,
+      widthIn: 0,
+      fontSize: FALLBACK_FONT_SIZE
+    };
+    const list = wordsRef.current;
+    if (!list.length) {
+      outgoing.textContent = "";
+      incoming.textContent = "";
+      label.textContent = "";
+      return;
+    }
+    build(parts, cycle, list);
+    draw(parts, cycle, 0);
+    const sizes = new ResizeObserver(() => {
+      measure(parts, cycle);
+      draw(parts, cycle, cycle.progress);
+    });
+    sizes.observe(outgoing);
+    sizes.observe(incoming);
+    if (list.length < 2) return () => sizes.disconnect();
+    const controller = new AbortController();
+    if (!UIMotion.reduced) {
+      const signal = controller.signal;
+      root.addEventListener("pointerenter", () => cycle.held = true, { signal });
+      root.addEventListener("pointerleave", () => cycle.held = false, { signal });
+    }
+    const playback = loop(
+      (_k, dt) => {
+        const words2 = wordsRef.current;
+        const holdMs = holdRef.current;
+        const span = holdMs + MORPH_MS;
+        if (!cycle.held || cycle.elapsed > holdMs) cycle.elapsed += dt;
+        if (cycle.elapsed >= span) {
+          if (cycle.progress < 1) {
+            cycle.elapsed = span;
+          } else {
+            cycle.elapsed -= span;
+            if (cycle.elapsed >= span) cycle.elapsed = 0;
+            cycle.index = (cycle.index + 1) % words2.length;
+            build(parts, cycle, words2);
+          }
+        }
+        if (cycle.elapsed < holdMs) {
+          if (!cycle.resting) {
+            draw(parts, cycle, 0);
+            cycle.resting = true;
+          }
+          return;
+        }
+        cycle.resting = false;
+        draw(parts, cycle, clampUnit((cycle.elapsed - holdMs) / MORPH_MS));
+      },
+      { el: root, speed: () => speedRef.current, snap: () => settle(parts, cycle, wordsRef.current) }
+    );
+    return () => {
+      playback.stop();
+      sizes.disconnect();
+      controller.abort();
+    };
+  }, [key, filterId]);
+  return /* @__PURE__ */ jsxs("span", { ref: rootRef, className: cx("morphing-text", className), style, ...htmlProps, children: [
+    /* @__PURE__ */ jsx("span", { ref: labelRef, className: "morphing-text__label" }),
+    /* @__PURE__ */ jsxs("span", { ref: stageRef, className: "morphing-text__stage", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("span", { ref: outgoingRef, className: "morphing-text__word" }),
+      /* @__PURE__ */ jsx("span", { ref: incomingRef, className: "morphing-text__word" })
+    ] }),
+    /* @__PURE__ */ jsx("span", { ref: ruleRef, className: "morphing-text__rule", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("svg", { className: "morphing-text__defs", width: "0", height: "0", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+      "filter",
+      {
+        id: filterId,
+        colorInterpolationFilters: "sRGB",
+        x: FILTER_REGION_X,
+        y: FILTER_REGION_Y,
+        width: FILTER_REGION_WIDTH,
+        height: FILTER_REGION_HEIGHT,
+        children: [
+          /* @__PURE__ */ jsx("feGaussianBlur", { ref: thresholdRef, in: "SourceGraphic", stdDeviation: "0", result: "soft" }),
+          /* @__PURE__ */ jsx("feColorMatrix", { in: "soft", type: "matrix", values: THRESHOLD_MATRIX })
+        ]
+      }
+    ) }) })
+  ] });
+}
+
+export { MorphingText };
+//# sourceMappingURL=morphing-text.js.map
+//# sourceMappingURL=morphing-text.js.map

package/dist/morphing-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/expressive/morphing-text/MorphingText.tsx"],"names":["words"],"mappings":"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","file":"morphing-text.js","sourcesContent":["'use client';\n\nimport './morphing-text.css';\n\nimport { useEffect, useId, useRef, type HTMLAttributes } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { loop } from '../../../engine';\nimport type { MorphingTextStyle } from '../../../tokens/component-styles.generated';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { cx } from '../../internal/utils/cx';\n\nconst DEFAULT_HOLD_MS = 1500;\nconst MORPH_MS = 900;\nconst OUT_STAGGER = 0.18;\nconst OUT_WINDOW = 0.82;\nconst IN_LEAD = 0.14;\nconst IN_STAGGER = 0.18;\nconst IN_WINDOW = 0.68;\nconst SMEAR_CURVE = 1.1;\nconst FUSE_OPACITY_CURVE = 0.42;\nconst LETTER_BLUR_EM = 0.115;\nconst OUT_RISE_EM = 0.05;\nconst IN_DROP_EM = 0.06;\nconst OUT_SHRINK = 0.02;\nconst IN_SCALE_FLOOR = 0.98;\nconst IN_GROWTH = 0.02;\nconst THRESHOLD_BLUR_RATIO = 0.023;\nconst THRESHOLD_SWELL_RATIO = 0.0104;\nconst ALPHA_GAIN = 21;\nconst ALPHA_BIAS = -8.4;\nconst FILTER_REGION_X = '-30%';\nconst FILTER_REGION_Y = '-60%';\nconst FILTER_REGION_WIDTH = '160%';\nconst FILTER_REGION_HEIGHT = '220%';\nconst RULE_MIN_WIDTH = 2;\nconst SETTLED = 0.001;\nconst FALLBACK_FONT_SIZE = 48;\nconst LETTER_CLASS = 'morphing-text__letter';\nconst FUSED_CLASS = 'morphing-text__stage--fused';\nconst BLUR_PROPERTY = '--morphing-text-letter-blur';\nconst HEAT_PROPERTY = '--morphing-text-heat';\n\nconst THRESHOLD_MATRIX = `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${ALPHA_GAIN} ${ALPHA_BIAS}`;\n\nconst clampUnit = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);\nconst easeInOut = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);\n\nconst letterProgress = (progress: number, lead: number, stagger: number, span: number, index: number, count: number) =>\n  clampUnit((progress - (lead + stagger * (count > 1 ? index / (count - 1) : 0))) / span);\n\ninterface Parts {\n  root: HTMLElement;\n  stage: HTMLElement;\n  outgoing: HTMLElement;\n  incoming: HTMLElement;\n  rule: HTMLElement;\n  label: HTMLElement;\n  threshold: SVGFEGaussianBlurElement;\n  filterId: string;\n}\n\ninterface Cycle {\n  index: number;\n  elapsed: number;\n  held: boolean;\n  resting: boolean;\n  progress: number;\n  out: HTMLElement[];\n  into: HTMLElement[];\n  widthOut: number;\n  widthIn: number;\n  fontSize: number;\n}\n\nfunction writeLetters(host: HTMLElement, word: string) {\n  host.textContent = '';\n  const letters: HTMLElement[] = [];\n  for (const character of word) {\n    if (character === ' ') {\n      host.appendChild(document.createTextNode(' '));\n      continue;\n    }\n    const span = document.createElement('span');\n    span.className = LETTER_CLASS;\n    span.textContent = character;\n    host.appendChild(span);\n    letters.push(span);\n  }\n  return letters;\n}\n\nfunction paintLetter(el: HTMLElement, blur: number, opacity: number, shift: number, scale: number) {\n  el.style.setProperty(BLUR_PROPERTY, blur.toFixed(4));\n  el.style.opacity = clampUnit(opacity).toFixed(3);\n  el.style.translate = `0 ${shift.toFixed(4)}em`;\n  el.style.scale = scale.toFixed(4);\n}\n\nfunction fuse(parts: Parts, on: boolean) {\n  parts.stage.classList.toggle(FUSED_CLASS, on);\n  parts.stage.style.filter = on ? `url(#${parts.filterId})` : '';\n}\n\nfunction measure(parts: Parts, cycle: Cycle) {\n  cycle.widthOut = parts.outgoing.getBoundingClientRect().width;\n  cycle.widthIn = parts.incoming.getBoundingClientRect().width;\n  cycle.fontSize = parseFloat(getComputedStyle(parts.stage).fontSize) || FALLBACK_FONT_SIZE;\n}\n\nfunction draw(parts: Parts, cycle: Cycle, progress: number) {\n  cycle.progress = progress;\n  const heat = Math.sin(progress * Math.PI);\n\n  if (progress <= SETTLED || progress >= 1 - SETTLED) {\n    const arrived = progress >= 1 - SETTLED;\n    fuse(parts, false);\n    for (const el of cycle.out) paintLetter(el, 0, arrived ? 0 : 1, 0, 1);\n    for (const el of cycle.into) paintLetter(el, 0, arrived ? 1 : 0, 0, 1);\n  } else {\n    fuse(parts, true);\n    parts.threshold.setAttribute(\n      'stdDeviation',\n      (cycle.fontSize * (THRESHOLD_BLUR_RATIO + THRESHOLD_SWELL_RATIO * heat)).toFixed(3),\n    );\n    for (let i = 0; i < cycle.out.length; i++) {\n      const p = letterProgress(progress, 0, OUT_STAGGER, OUT_WINDOW, i, cycle.out.length);\n      paintLetter(\n        cycle.out[i],\n        LETTER_BLUR_EM * Math.pow(p, SMEAR_CURVE),\n        Math.pow(1 - p, FUSE_OPACITY_CURVE),\n        -OUT_RISE_EM * p,\n        1 - OUT_SHRINK * p,\n      );\n    }\n    for (let i = 0; i < cycle.into.length; i++) {\n      const p = letterProgress(progress, IN_LEAD, IN_STAGGER, IN_WINDOW, i, cycle.into.length);\n      paintLetter(\n        cycle.into[i],\n        LETTER_BLUR_EM * Math.pow(1 - p, SMEAR_CURVE),\n        Math.pow(p, FUSE_OPACITY_CURVE),\n        IN_DROP_EM * (1 - p),\n        IN_SCALE_FLOOR + IN_GROWTH * p,\n      );\n    }\n  }\n\n  const width = cycle.widthOut + (cycle.widthIn - cycle.widthOut) * easeInOut(progress);\n  parts.rule.style.width = `${Math.max(RULE_MIN_WIDTH, width).toFixed(2)}px`;\n  parts.rule.style.setProperty(HEAT_PROPERTY, heat.toFixed(3));\n}\n\nfunction build(parts: Parts, cycle: Cycle, words: string[]) {\n  const current = words[cycle.index % words.length];\n  cycle.out = writeLetters(parts.outgoing, current);\n  cycle.into = writeLetters(parts.incoming, words[(cycle.index + 1) % words.length]);\n  parts.label.textContent = current;\n  measure(parts, cycle);\n}\n\nfunction settle(parts: Parts, cycle: Cycle, words: string[]) {\n  cycle.index = 0;\n  cycle.elapsed = 0;\n  cycle.held = false;\n  cycle.resting = true;\n  build(parts, cycle, words);\n  draw(parts, cycle, 0);\n}\n\nexport interface MorphingTextOwnProps {\n  /** The words to cycle through, in order; the last one morphs back into the first. Fewer than two words renders as still type. */\n  words: string[];\n  /** How long a word rests fully legible before the next morph starts, in milliseconds; sampled live. @default 1500 */\n  hold?: number;\n  /** Multiplies the simulation rate; sampled live on every frame. @default 1 */\n  speed?: number;\n  /** Extra class(es) merged onto the root. */\n  className?: string;\n  /** Inline styles merged onto the root. */\n  style?: MorphingTextStyle;\n}\n\nexport interface MorphingTextProps extends MorphingTextOwnProps {\n  /** Standard <span> attributes (aria-*, data-*, title, ...) forwarded to the root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof MorphingTextOwnProps> & DataAttributes;\n}\n\nexport function MorphingText({\n  words,\n  hold = DEFAULT_HOLD_MS,\n  speed = 1,\n  className = '',\n  style,\n  htmlProps,\n}: MorphingTextProps) {\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const stageRef = useRef<HTMLSpanElement>(null);\n  const outgoingRef = useRef<HTMLSpanElement>(null);\n  const incomingRef = useRef<HTMLSpanElement>(null);\n  const ruleRef = useRef<HTMLSpanElement>(null);\n  const labelRef = useRef<HTMLSpanElement>(null);\n  const thresholdRef = useRef<SVGFEGaussianBlurElement>(null);\n  const wordsRef = useRef(words);\n  const holdRef = useRef(hold);\n  const speedRef = useRef(speed);\n  const filterId = `morphing-text-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;\n  const key = JSON.stringify(words);\n\n  useEffect(() => {\n    wordsRef.current = words;\n    holdRef.current = Number.isFinite(hold) && hold >= 0 ? hold : DEFAULT_HOLD_MS;\n    speedRef.current = speed;\n  }, [words, hold, speed]);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    const stage = stageRef.current;\n    const outgoing = outgoingRef.current;\n    const incoming = incomingRef.current;\n    const rule = ruleRef.current;\n    const label = labelRef.current;\n    const threshold = thresholdRef.current;\n    if (!root || !stage || !outgoing || !incoming || !rule || !label || !threshold) return;\n\n    const parts: Parts = { root, stage, outgoing, incoming, rule, label, threshold, filterId };\n    const cycle: Cycle = {\n      index: 0,\n      elapsed: 0,\n      held: false,\n      resting: true,\n      progress: 0,\n      out: [],\n      into: [],\n      widthOut: 0,\n      widthIn: 0,\n      fontSize: FALLBACK_FONT_SIZE,\n    };\n\n    const list = wordsRef.current;\n    if (!list.length) {\n      outgoing.textContent = '';\n      incoming.textContent = '';\n      label.textContent = '';\n      return;\n    }\n\n    build(parts, cycle, list);\n    draw(parts, cycle, 0);\n\n    const sizes = new ResizeObserver(() => {\n      measure(parts, cycle);\n      draw(parts, cycle, cycle.progress);\n    });\n    sizes.observe(outgoing);\n    sizes.observe(incoming);\n\n    if (list.length < 2) return () => sizes.disconnect();\n\n    const controller = new AbortController();\n    if (!UIMotion.reduced) {\n      const signal = controller.signal;\n      root.addEventListener('pointerenter', () => (cycle.held = true), { signal });\n      root.addEventListener('pointerleave', () => (cycle.held = false), { signal });\n    }\n\n    const playback = loop(\n      (_k, dt) => {\n        const words = wordsRef.current;\n        const holdMs = holdRef.current;\n        const span = holdMs + MORPH_MS;\n\n        if (!cycle.held || cycle.elapsed > holdMs) cycle.elapsed += dt;\n        if (cycle.elapsed >= span) {\n          if (cycle.progress < 1) {\n            cycle.elapsed = span;\n          } else {\n            cycle.elapsed -= span;\n            if (cycle.elapsed >= span) cycle.elapsed = 0;\n            cycle.index = (cycle.index + 1) % words.length;\n            build(parts, cycle, words);\n          }\n        }\n        if (cycle.elapsed < holdMs) {\n          if (!cycle.resting) {\n            draw(parts, cycle, 0);\n            cycle.resting = true;\n          }\n          return;\n        }\n        cycle.resting = false;\n        draw(parts, cycle, clampUnit((cycle.elapsed - holdMs) / MORPH_MS));\n      },\n      { el: root, speed: () => speedRef.current, snap: () => settle(parts, cycle, wordsRef.current) },\n    );\n\n    return () => {\n      playback.stop();\n      sizes.disconnect();\n      controller.abort();\n    };\n  }, [key, filterId]);\n\n  return (\n    <span ref={rootRef} className={cx('morphing-text', className)} style={style} {...htmlProps}>\n      <span ref={labelRef} className=\"morphing-text__label\" />\n      <span ref={stageRef} className=\"morphing-text__stage\" aria-hidden=\"true\">\n        <span ref={outgoingRef} className=\"morphing-text__word\" />\n        <span ref={incomingRef} className=\"morphing-text__word\" />\n      </span>\n      <span ref={ruleRef} className=\"morphing-text__rule\" aria-hidden=\"true\" />\n      <svg className=\"morphing-text__defs\" width=\"0\" height=\"0\" aria-hidden=\"true\" focusable=\"false\">\n        <defs>\n          <filter\n            id={filterId}\n            colorInterpolationFilters=\"sRGB\"\n            x={FILTER_REGION_X}\n            y={FILTER_REGION_Y}\n            width={FILTER_REGION_WIDTH}\n            height={FILTER_REGION_HEIGHT}\n          >\n            <feGaussianBlur ref={thresholdRef} in=\"SourceGraphic\" stdDeviation=\"0\" result=\"soft\" />\n            <feColorMatrix in=\"soft\" type=\"matrix\" values={THRESHOLD_MATRIX} />\n          </filter>\n        </defs>\n      </svg>\n    </span>\n  );\n}\n"]}