52: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/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"],"RegistryDependencies"] 53: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"] 54:T3352,/** biome-ignore-all lint/suspicious/noArrayIndexKey: Split indices are stable for static text. */ "use client"; import { cn } from "@/lib/utils"; import { motion, type UseInViewOptions, useInView, useReducedMotion, } from "motion/react"; import { type ElementType, isValidElement, type ReactNode, type RefObject, useLayoutEffect, useMemo, useRef, useState, } from "react"; type SplitBy = "lines" | "words" | "chars"; const SPLIT_DEFAULTS: Record = { lines: { duration: 0.8, stagger: 0.08 }, words: { duration: 0.6, stagger: 0.06 }, chars: { duration: 0.4, stagger: 0.01 }, }; const EXPO_OUT = [0.19, 1, 0.22, 1] as const; const WHITESPACE_RE = /\s+/; interface WordToken { emphasized: boolean; text: string; } interface LineCharUnit { char: string; emphasized: boolean; staggerIndex: number; } export interface MaskedTextRevealProps { /** * HTML tag for the container element. * @default "p" */ as?: keyof React.JSX.IntrinsicElements; /** Rich text content. Supports inline emphasis elements such as ``. */ children?: ReactNode; className?: string; /** * Delay before the first unit starts animating, in seconds. * @default 0 */ delay?: number; /** * Duration of each unit's animation in seconds. */ duration?: number; /** * Trigger the animation only once. * @default true */ once?: boolean; /** * Split mode: line-by-line, word-by-word, or character-by-character. * @default "lines" */ splitBy?: SplitBy; /** * Delay between each successive unit in seconds. */ stagger?: number; /** Plain-text alternative to `children`. */ text?: string; /** * Additional className applied to each animated unit. */ unitClassName?: string; /** * Viewport margin that controls when the animation triggers. * Triggers when the element reaches the top 75% of the viewport by default. * @default "0px 0px -25% 0px" */ viewportMargin?: UseInViewOptions["margin"]; /** * Initial vertical offset as a percentage of the unit height. * @default 110 */ yPercent?: number; } function collectWords(node: ReactNode, emphasized = false): WordToken[] { if (typeof node === "string") { return node .split(WHITESPACE_RE) .filter(Boolean) .map((text) => ({ text, emphasized })); } if (Array.isArray(node)) { return node.flatMap((child) => collectWords(child, emphasized)); } if (isValidElement(node)) { const nextEmphasis = emphasized || node.type === "strong" || node.type === "b"; return collectWords( (node.props as { children?: ReactNode }).children, nextEmphasis ); } return []; } function getContentNode( text: string | undefined, children: ReactNode ): ReactNode { if (text) { return text; } return children; } function getAccessibleLabel(words: WordToken[]): string { return words.map((word) => word.text).join(" "); } type LineGroup = number[]; function groupWordsByLine(measureNode: HTMLDivElement): LineGroup[] { const measureWords = measureNode.querySelectorAll("[data-measure-word]"); if (measureWords.length === 0) { return [[0]]; } const groups: LineGroup[] = []; let currentGroup: LineGroup = []; let lastTop = -1; for (const [index, node] of measureWords.entries()) { const top = (node as HTMLElement).offsetTop; if (lastTop !== -1 && top > lastTop + 1) { groups.push(currentGroup); currentGroup = []; } currentGroup.push(index); lastTop = top; } if (currentGroup.length > 0) { groups.push(currentGroup); } return groups.length > 0 ? groups : [[0]]; } function resolveContainerWidth(container: HTMLElement): number { if (container.clientWidth > 0) { return container.clientWidth; } const parent = container.parentElement; if (parent && parent.clientWidth > 0) { return parent.clientWidth; } return 0; } function useLineGroups( words: WordToken[], className: string | undefined, containerRef: RefObject ) { const measureRef = useRef(null); const [lineGroups, setLineGroups] = useState(null); const measurementKey = `${className ?? ""}:${words .map((word) => `${word.emphasized ? "1" : "0"}:${word.text}`) .join("\u0000")}`; // biome-ignore lint/correctness/useExhaustiveDependencies: Remeasure when text, width, or typography changes. useLayoutEffect(() => { const container = containerRef.current; const measureNode = measureRef.current; if (!(container && measureNode)) { return; } let cancelled = false; const measureLines = () => { if (cancelled) { return; } const width = resolveContainerWidth(container); if (width > 0) { measureNode.style.width = `${width}px`; } setLineGroups(groupWordsByLine(measureNode)); }; measureLines(); document.fonts.ready.then(measureLines); const resizeObserver = new ResizeObserver(measureLines); resizeObserver.observe(container); return () => { cancelled = true; resizeObserver.disconnect(); }; }, [containerRef, measurementKey]); const measureLayer = (
{words.map((word, index) => ( {word.text} ))}
); return { lineGroups, measureLayer }; } function renderWordContent(word: WordToken, unitClassName?: string) { if (word.emphasized) { return {word.text}; } return word.text; } function SplitLine({ children, className, }: { children: ReactNode; className?: string; }) { return ( {children} ); } function RevealTarget({ animate, children, className, delay: unitDelay, display = "inline-block", duration: unitDuration, yPercent, }: { animate: boolean; children: ReactNode; className?: string; delay: number; display?: "block" | "inline-block"; duration: number; yPercent: number; }) { const hiddenY = `${yPercent}%`; return ( {children} ); } function WordSpan({ isLastWord, word, unitClassName, }: { isLastWord: boolean; word: WordToken; unitClassName?: string; }) { return ( {renderWordContent(word, unitClassName)} ); } export function MaskedTextReveal({ text, children, as: Tag = "p", splitBy = "lines", duration, stagger, yPercent = 110, delay = 0, once = true, viewportMargin = "0px 0px -25% 0px", className, unitClassName, }: MaskedTextRevealProps) { const rootRef = useRef(null); const prefersReducedMotion = useReducedMotion(); const isInView = useInView(rootRef, { once, margin: viewportMargin }); const content = getContentNode(text, children); const words = useMemo(() => collectWords(content), [content]); const accessibleLabel = useMemo(() => getAccessibleLabel(words), [words]); const defaults = SPLIT_DEFAULTS[splitBy]; const resolvedDuration = duration ?? defaults.duration; const resolvedStagger = stagger ?? defaults.stagger; const { lineGroups, measureLayer } = useLineGroups(words, className, rootRef); const wordStaggerMap = useMemo(() => { const groups = lineGroups ?? []; const map = new Map(); let index = 0; for (const group of groups) { for (const wordIndex of group) { map.set(wordIndex, index); index++; } } return map; }, [lineGroups]); const lineCharGroups = useMemo(() => { const groups = lineGroups ?? []; let globalStagger = 0; return groups.map((group) => { const lineChars: LineCharUnit[] = []; for (const [index, wordIndex] of group.entries()) { const word = words[wordIndex]; if (!word) { continue; } for (const char of word.text) { lineChars.push({ char, emphasized: word.emphasized, staggerIndex: globalStagger, }); globalStagger++; } if (index < group.length - 1) { lineChars.push({ char: " ", emphasized: false, staggerIndex: globalStagger, }); globalStagger++; } } return lineChars; }); }, [lineGroups, words]); const Component = Tag as ElementType; const isReady = lineGroups !== null && lineGroups.length > 0; const hasContent = words.length > 0; const shouldAnimate = isInView && isReady && !prefersReducedMotion; if (prefersReducedMotion) { return (
{content}
); } if (!hasContent) { return (
{content}
); } const rootClassName = cn( "overflow-wrap-anywhere block [contain:layout_style_paint] [overflow-wrap:break-word] [transform:translateZ(0)] [will-change:transform] [word-wrap:break-word]", !isReady && "invisible", className ); const lineContent = isReady && lineGroups.map((group, lineIndex) => ( {group.map((wordIndex) => { const word = words[wordIndex]; if (!word) { return null; } return ( ); })} )); const wordContent = isReady && lineGroups.map((group, lineIndex) => ( {group.map((wordIndex) => { const word = words[wordIndex]; if (!word) { return null; } return ( {renderWordContent(word)} ); })} )); const charContent = isReady && lineCharGroups.map((group, lineIndex) => ( {group.map((token, charIndex) => ( {token.char === " " ? "\u00A0" : token.char} ))} )); let splitContent = charContent; if (splitBy === "lines") { splitContent = lineContent; } else if (splitBy === "words") { splitContent = wordContent; } return (
{measureLayer} {splitContent}
); } 51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@soralabs","registryDependencies":["utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/primitives/texts/text-reveal-mask/index.tsx","content":"$54","type":"registry:ui","target":"components/sora-ui/texts/text-reveal-mask.tsx"}],"className":"h-[70svh] min-h-80"}]]}]