4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f:T215b,// Hairline UI · text-morph · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; /* ───────────────────────────────────────────────────────── * TEXT MORPH: text that changes the way it should * * shared letters both texts share stay alive and slide to * their new place ("Save" → "Saving" keeps "Sav") * new letters that weren't there rise in out of a blur, * one after another * gone letters that leave lift away and blur out where * they stood * width the box eases to its new width, so a button or * pill holding it resizes with it * * Texts with little in common crossfade as a whole instead of * flinging single letters across. The real text is always * there for screen readers. * ───────────────────────────────────────────────────────── */ export interface TextMorphProps extends Omit, "children"> { children: string; /** Morph time in ms. */ duration?: number; /** Where new letters come from: below ("up") or above ("down"). */ direction?: "up" | "down"; /** Ease the box's width too; turn off for text that wraps. */ animateWidth?: boolean; } type Glyph = { key: number; char: string }; type Leaving = Glyph & { x: number; y: number }; const EASE = "cubic-bezier(0.16,1,0.3,1)"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore( subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false, ); /** Keep the letters two texts share (longest common subsequence); everything else is new. */ function morph(previous: Glyph[], text: string, nextKey: () => number): Glyph[] { const a = previous.map((g) => g.char); const b = Array.from(text); const fresh = () => b.map((char) => ({ key: nextKey(), char })); if (!a.length || !b.length) return fresh(); const dp = Array.from({ length: a.length + 1 }, () => new Uint16Array(b.length + 1)); for (let i = a.length - 1; i >= 0; i--) for (let j = b.length - 1; j >= 0; j--) dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]); // Too little in common reads as two different words: crossfade them instead. if (dp[0][0] < Math.min(a.length, b.length) * 0.5) return fresh(); const out: Glyph[] = []; let i = 0; let j = 0; while (j < b.length) { if (i < a.length && a[i] === b[j]) { out.push(previous[i++]); j++; } else if (i < a.length && dp[i + 1][j] >= dp[i][j + 1]) i++; else out.push({ key: nextKey(), char: b[j++] }); } return out; } function LeavingGlyph({ glyph, lift, duration, onDone }: { glyph: Leaving; lift: number; duration: number; onDone: (key: number) => void }) { const ref = React.useRef(null); React.useLayoutEffect(() => { const el = ref.current; if (!el) return; const animation = el.animate( [ { opacity: 1, filter: "blur(0px)", transform: "none" }, { opacity: 0, filter: "blur(4px)", transform: `translateY(${lift}em)` }, ], { duration: duration * 0.6, easing: EASE, fill: "forwards" }, ); animation.onfinish = () => onDone(glyph.key); return () => animation.cancel(); }, [glyph.key, lift, duration, onDone]); return ( ); } export function TextMorph({ children: text, duration = 460, direction = "up", animateWidth = true, className = "", ...props }: TextMorphProps) { const reduced = useReducedMotion(); const counter = React.useRef(text.length); const nextKey = React.useCallback(() => ++counter.current, []); const [glyphs, setGlyphs] = React.useState(() => Array.from(text).map((char, i) => ({ key: i + 1, char }))); const [leaving, setLeaving] = React.useState([]); const rootRef = React.useRef(null); const els = React.useRef(new Map()); const before = React.useRef<{ at: Map; width: number } | null>(null); const rise = direction === "up" ? 0.35 : -0.35; // 1. The text changed: note where every letter stands, then work out which letters stay. React.useLayoutEffect(() => { if (text === glyphs.map((g) => g.char).join("")) return; const root = rootRef.current; if (!root || reduced) { setLeaving([]); setGlyphs(Array.from(text).map((char) => ({ key: nextKey(), char }))); return; } const box = root.getBoundingClientRect(); const at = new Map(); els.current.forEach((el, key) => { const r = el.getBoundingClientRect(); at.set(key, { x: r.left - box.left, y: r.top - box.top }); }); before.current = { at, width: box.width }; const next = morph(glyphs, text, nextKey); const kept = new Set(next.map((g) => g.key)); setLeaving((l) => [...l, ...glyphs.filter((g) => !kept.has(g.key)).map((g) => ({ ...g, ...(at.get(g.key) ?? { x: 0, y: 0 }) }))]); setGlyphs(next); // eslint-disable-next-line react-hooks/exhaustive-deps }, [text, reduced]); // 2. The new letters are in place: glide the ones that stayed, raise the new ones, ease the width. React.useLayoutEffect(() => { const prev = before.current; const root = rootRef.current; if (!prev || !root) return; before.current = null; const box = root.getBoundingClientRect(); let order = 0; for (const g of glyphs) { const el = els.current.get(g.key); if (!el) continue; const from = prev.at.get(g.key); if (from) { const r = el.getBoundingClientRect(); const dx = from.x - (r.left - box.left); const dy = from.y - (r.top - box.top); if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], { duration, easing: EASE }); } else { el.animate( [ { opacity: 0, filter: "blur(4px)", transform: `translateY(${rise}em)` }, { opacity: 1, filter: "blur(0px)", transform: "none" }, ], { duration, easing: EASE, delay: Math.min(order++ * 16, 160), fill: "backwards" }, ); } } if (animateWidth && Math.abs(prev.width - box.width) > 0.5) { // Hold the words on one line while the box is narrower than them, or "No credits left" would wrap mid-morph. root.style.whiteSpace = "nowrap"; const resize = root.animate([{ width: `${prev.width}px` }, { width: `${box.width}px` }], { duration, easing: EASE }); resize.onfinish = resize.oncancel = () => { root.style.whiteSpace = ""; }; } }, [glyphs, duration, rise, animateWidth]); const done = React.useCallback((key: number) => setLeaving((l) => l.filter((g) => g.key !== key)), []); // Words stay unbroken; lines may only wrap at spaces. const words: Glyph[][] = []; for (const g of glyphs) { if (g.char === " " || !words.length || words[words.length - 1][0]?.char === " ") words.push([g]); else words[words.length - 1].push(g); } return ( {text} {words.map((word, w) => ( ))} {leaving.map((g) => ( ))} ); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"registry/text-morph.tsx","content":"$4f","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]