61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T1388,"use client"; import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; import { AnimatePresence, animate, motion, useReducedMotion, type AnimationPlaybackControls } from "motion/react"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./text-morph.module.css"; /** * Morphs one short label into the next in place. Letters both strings share glide to their new positions, new letters sharpen in, removed letters blur away, * and the width follows on a spring so the surrounding layout glides instead of jumping. Use it for status words that change a few letters at a time, * such as Publish, Publishing, and Published, or Follow and Following. It stays on one line, and assistive technology reads the plain text. */ export interface TextMorphProps { children: string; as?: "span" | "div" | "p" | "strong" | "h1" | "h2" | "h3"; className?: string; id?: string } const enter = [...motionTokens.ease.enter] as [number, number, number, number]; const standard = [...motionTokens.ease.standard] as [number, number, number, number]; const blurred = `blur(${motionTokens.blur.soft}px)`; /** Lets leaving letters start to clear before the first new letter sharpens in their place. */ const HANDOFF = .05; /** Letters match by character and occurrence, so the second "i" in one string pairs with the second "i" in the next. */ function toGlyphs(text: string) { const seen = new Map(); return Array.from(text).map(char => { const count = seen.get(char) ?? 0; seen.set(char, count + 1); return { char, key: `${char}-${count}` }; }); } const measure = (element: HTMLElement) => parseFloat(getComputedStyle(element).width); export function TextMorph({ children, as = "span", className, id }: TextMorphProps) { const Tag = as; const reduced = useReducedMotion(); const frame = useRef(null); const track = useRef(null); const width = useRef(0); const sizing = useRef(null); const glyphs = useMemo(() => toGlyphs(children), [children]); // The previous label tells which letters are new, so only they stagger, in reading order, however far along the word they sit. const [labels, setLabels] = useState({ current: children, previous: children }); if (labels.current !== children) setLabels({ current: children, previous: labels.current }); const kept = useMemo(() => new Set(toGlyphs(labels.previous).map(glyph => glyph.key)), [labels.previous]); let entering = 0; // The frame holds an explicit width so a new label never snaps it; the spring then follows the track, which already has the new letters in place. useLayoutEffect(() => { const frameElement = frame.current, trackElement = track.current; if (!frameElement || !trackElement) return; const next = measure(trackElement); if (!Number.isFinite(next)) return; if (width.current && Math.abs(next - width.current) > .5 && !reduced) sizing.current = animate(frameElement, { width: next }, motionTokens.spring.morph); else { sizing.current?.stop(); frameElement.style.width = `${next}px`; } width.current = next; }, [children, reduced]); // Font loading or a responsive font size changes the width without a new label: follow it immediately. useEffect(() => { const frameElement = frame.current, trackElement = track.current; if (!frameElement || !trackElement || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(() => { const next = measure(trackElement); if (!Number.isFinite(next) || Math.abs(next - width.current) < .5) return; sizing.current?.stop(); frameElement.style.width = `${next}px`; width.current = next; }); observer.observe(trackElement); return () => observer.disconnect(); }, []); return {children} ; } export default TextMorph; 64:T4b2,/* The frame carries the animated width. Its mask reveals new letters through a soft trailing edge as it grows and fades leaving ones as it shrinks. Padding with matching negative margins gives the mask room for blur and descenders without changing layout; the edge sits entirely in that room, so resting text is never dimmed. The track always starts at the frame's leading edge, even in centered text: otherwise it would recenter inside the old width and leaving letters would jump. */ .frame.frame, .frame { position: relative; display: inline-block; box-sizing: content-box; padding: .5em .5em .5em .2em; margin: -.5em -.5em -.5em -.2em; text-align: start; white-space: nowrap; mask-image: linear-gradient(90deg, #000 calc(100% - .5em), transparent); } /* The track sizes to the letters in flow. Leaving letters are taken out of flow and positioned against it. */ .track { position: relative; display: inline-block; white-space: nowrap; } .glyph { display: inline-block; white-space: pre; transform-origin: 50% 60%; } .srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; user-select: none; } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@uiarc","registryDependencies":["https://uiarc.dev/r/arc-motion-tokens.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/components/text-morph/text-morph.tsx","content":"$63","type":"registry:component","target":"@components/arc/text-morph/text-morph.tsx"},{"path":"registry/components/text-morph/text-morph.module.css","content":"$64","type":"registry:component","target":"@components/arc/text-morph/text-morph.module.css"}],"className":"h-[70svh] min-h-80"}]]}]