50: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"] 51: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"] 52:T35dd,"use client"; /** * Text roll — per-character vertical slide transitions. * Ported from slot-text (motion-primitives TextRoll variant). */ import { cn } from "@/lib/utils"; import { useReducedMotion } from "motion/react"; import { type HTMLAttributes, type Ref, type RefCallback, useEffect, useRef, } from "react"; export interface TextRollOptions { /** * Per-letter personality: 0 = every glyph lands identically, 1 = lots of * individual variation in speed and a little tilt-wobble as each settles. */ bounce?: number; /** * Chromatic flash: each incoming glyph rolls in tinted, then fades to its * resting color once it lands. */ color?: string | ((index: number, total: number) => string); /** How long the chromatic tint takes to fade back to rest, in ms (default 280). */ colorFade?: number; /** "down" rolls glyphs downward (enter from top); "up" rolls upward. */ direction?: "up" | "down"; /** Slide duration per character in ms (default 300). */ duration?: number; /** Easing — defaults to a springy, overshooting "back" curve. */ easing?: string; /** How long the incoming glyph trails the outgoing one, in ms (default 50). */ exitOffset?: number; /** Interrupt in-flight rolls when a new target text is set (default true). */ interrupt?: boolean; /** Keep characters that are identical at the same index static. */ skipUnchanged?: boolean; /** Per-character stagger in ms (default 45). */ stagger?: number; } export interface ChromaticOptions { from?: number; lightness?: number; saturation?: number; spread?: number; } const DEFAULTS = { direction: "down" as const, stagger: 45, duration: 300, exitOffset: 50, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)", bounce: 0.6, colorFade: 280, skipUnchanged: true, interrupt: true, }; const NBSP = "\u00A0"; const SLOT_TEXT_CLASS = "inline-flex whitespace-pre"; const CHAR_SLOT_CLASS = "relative inline-flex flex-none justify-center overflow-hidden overflow-x-visible overflow-y-clip align-bottom leading-[1.3]"; const CHAR_SLOT_RESIZING_CLASS = "overflow-x-clip"; const CHAR_SIZER_CLASS = "invisible whitespace-pre"; const CHAR_FACE_CLASS = "absolute inset-0 flex items-center justify-center whitespace-pre will-change-transform"; const glyph = (char: string) => (char === " " ? NBSP : char); /** Build a `color` function that sweeps hue across the line. */ export function chromatic({ from = 0, spread = 320, saturation = 92, lightness = 60, }: ChromaticOptions = {}) { return (index: number, total: number) => { const t = total <= 1 ? 0 : index / (total - 1); return `hsl(${(from + t * spread) % 360} ${saturation}% ${lightness}%)`; }; } interface SlotState { pending?: { text: string; options: TextRollOptions }; target: string; timers: number[]; } const states = new WeakMap(); function settle(container: HTMLElement) { const state = states.get(container); if (!state) { return; } for (const timer of state.timers) { window.clearTimeout(timer); } states.delete(container); buildTextRoll(container, state.target); } function makeFace(char: string) { const face = document.createElement("span"); face.className = CHAR_FACE_CLASS; face.dataset.charFace = ""; face.textContent = glyph(char); return face; } function buildSlot(char: string) { const slot = document.createElement("span"); slot.className = CHAR_SLOT_CLASS; slot.dataset.char = char; slot.dataset.charSlot = ""; const sizer = document.createElement("span"); sizer.className = CHAR_SIZER_CLASS; sizer.dataset.charSizer = ""; sizer.textContent = glyph(char); slot.append(sizer, makeFace(char)); return slot; } export function buildTextRoll(container: HTMLElement, text: string) { container.classList.add(...SLOT_TEXT_CLASS.split(" ")); container.replaceChildren(...Array.from(text, buildSlot)); } /** biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Ported animation engine with per-glyph timing branches. */ export function animateTextRoll( container: HTMLElement, toText: string, options: TextRollOptions = {} ) { if (!(container instanceof HTMLElement)) { return; } const { direction, stagger, duration, exitOffset, easing, bounce, color, colorFade, skipUnchanged, interrupt, } = { ...DEFAULTS, ...options, }; const running = states.get(container); if (running && !interrupt) { if (toText !== running.target) { running.pending = { text: toText, options }; } return; } settle(container); if (!container.querySelector("[data-char-slot]")) { buildTextRoll(container, toText); return; } const slots = Array.from( container.querySelectorAll("[data-char-slot]") ); const fromText = slots.map((slot) => slot.dataset.char ?? "").join(""); if (!interrupt && fromText === toText) { return; } const maxLen = Math.max(fromText.length, toText.length); const sample = slots.find((slot) => (slot.dataset.char ?? "") !== "") ?? slots[0]; const computedStyle = getComputedStyle(container); const H = Math.ceil( sample?.getBoundingClientRect().height || sample?.offsetHeight || container.getBoundingClientRect().height || Number.parseFloat(computedStyle.lineHeight) || 0 ) || Math.ceil(Number.parseFloat(computedStyle.fontSize) * 1.3) || 18; const restColor = color ? computedStyle.color : ""; for (let i = slots.length; i < maxLen; i++) { const slot = buildSlot(""); container.appendChild(slot); slots.push(slot); } const timers: number[] = []; const state: SlotState = { timers, target: toText }; states.set(container, state); const outY = direction === "down" ? H : -H; const inStart = direction === "down" ? -H : H; const wobble = (index: number, salt: number) => { const n = Math.sin((index + 1) * 12.9898 + salt * 78.233) * 43_758.5453; return (n - Math.floor(n)) * 2 - 1; }; let maxEnd = 0; for (let i = 0; i < maxLen; i++) { const fromChar = fromText[i] || ""; const toChar = toText[i] || ""; if (fromChar === toChar && (skipUnchanged || fromChar === "")) { continue; } const slot = slots[i]; const sizer = slot.querySelector("[data-char-sizer]"); if (!sizer) { continue; } const oldFace = slot.querySelector("[data-char-face]"); const oldW = slot.getBoundingClientRect().width; sizer.textContent = glyph(toChar); const newW = sizer.getBoundingClientRect().width; const widthChanges = Math.abs(newW - oldW) > 0.5; if (widthChanges) { slot.style.width = `${oldW}px`; } if (fromChar === "" || toChar === "") { slot.classList.add(CHAR_SLOT_RESIZING_CLASS); } const tint = typeof color === "function" ? color(i, maxLen) : color; const isTail = toChar === ""; const d = Math.round( duration * (isTail ? 0.75 : 1) * (1 + bounce * 0.45 * wobble(i, 1)) ); const staggerIndex = isTail ? toText.length * 0.5 + (i - toText.length) * 0.25 : i; const base = Math.round( staggerIndex * stagger * (1 + bounce * 0.25 * wobble(i, 2)) ); const tilt = (bounce * 5 * wobble(i, 3)).toFixed(2); const rollTrans = `transform ${d}ms ${easing}`; const trans = color ? `${rollTrans}, color ${colorFade}ms linear ${d}ms` : rollTrans; const newFace = makeFace(toChar); newFace.style.transformOrigin = "50% 50%"; newFace.style.transform = `translateY(${inStart}px) rotate(${tilt}deg)`; if (tint) { newFace.style.color = tint; } slot.appendChild(newFace); slot.getBoundingClientRect(); if (widthChanges) { let wDelay = base; let wDur = d; if (isTail) { wDelay = base + Math.round(d * 0.55); wDur = Math.max(140, Math.round(d * 0.6)); } else if (fromChar === "") { wDur = Math.max(140, Math.round(d * 0.45)); } timers.push( window.setTimeout(() => { slot.style.transition = `width ${wDur}ms cubic-bezier(0.2, 0, 0, 1)`; slot.style.width = `${newW}px`; }, wDelay) ); maxEnd = Math.max(maxEnd, wDelay + wDur); } maxEnd = Math.max(maxEnd, base + exitOffset + d + (color ? colorFade : 0)); if (oldFace) { timers.push( window.setTimeout(() => { oldFace.style.transition = rollTrans; oldFace.style.transform = `translateY(${outY}px) rotate(${-Number(tilt)}deg)`; }, base) ); } timers.push( window.setTimeout(() => { newFace.style.transition = trans; newFace.style.transform = "translateY(0) rotate(0deg)"; if (color) { newFace.style.color = restColor; } const done = (event: TransitionEvent) => { if (event.propertyName !== "transform") { return; } newFace.removeEventListener("transitionend", done); slot.dataset.char = toChar; slot.style.removeProperty("transition"); slot.style.removeProperty("width"); slot.classList.remove(CHAR_SLOT_RESIZING_CLASS); for (const face of slot.querySelectorAll("[data-char-face]")) { if (face !== newFace) { face.remove(); } } }; newFace.addEventListener("transitionend", done); }, base + exitOffset) ); } const total = maxEnd + 80; timers.push( window.setTimeout(() => { const pending = state.pending; states.delete(container); buildTextRoll(container, toText); if (pending) { animateTextRoll(container, pending.text, pending.options); } }, total) ); } export function clearTextRoll(container: HTMLElement, text = "") { settle(container); for (const className of SLOT_TEXT_CLASS.split(" ")) { container.classList.remove(className); } container.textContent = text; } export interface TextRollProps extends Omit, "children"> { /** Shorthand for `options.bounce`. */ bounce?: number; /** * When true, applies a chromatic color sweep via `chromatic()`. * Use `options.color` for full control. */ chromatic?: boolean; /** * Shorthand for `options.direction` — exposed for docs Tweakpane controls. */ direction?: TextRollOptions["direction"]; /** Shorthand for `options.duration`. */ duration?: number; /** Roll animation options. */ options?: TextRollOptions; ref?: Ref; /** Shorthand for `options.skipUnchanged`. */ skipUnchanged?: boolean; /** Shorthand for `options.stagger`. */ stagger?: number; /** Text to display. Changing this value triggers the roll animation. */ text: string; } function mergeRefs(...refs: (Ref | undefined)[]): RefCallback { return (node) => { for (const ref of refs) { if (!ref) { continue; } if (typeof ref === "function") { ref(node); } else { ref.current = node; } } }; } function resolveOptions({ options, direction, stagger, duration, bounce, skipUnchanged, chromatic: useChromatic, }: Pick< TextRollProps, | "options" | "direction" | "stagger" | "duration" | "bounce" | "skipUnchanged" | "chromatic" >): TextRollOptions { return { ...options, ...(direction === undefined ? {} : { direction }), ...(stagger === undefined ? {} : { stagger }), ...(duration === undefined ? {} : { duration }), ...(bounce === undefined ? {} : { bounce }), ...(skipUnchanged === undefined ? {} : { skipUnchanged }), ...(useChromatic ? { color: chromatic() } : {}), }; } /** Matches `slot-text/react` — roll animates when `text` changes. */ export function TextRoll({ text, options, direction, stagger, duration, bounce, skipUnchanged, chromatic: useChromatic, className, ref, ...props }: TextRollProps) { const elementRef = useRef(null); const mountedRef = useRef(false); const firstTextEffectRef = useRef(true); const optionsRef = useRef( resolveOptions({ options, direction, stagger, duration, bounce, skipUnchanged, chromatic: useChromatic, }) ); const prefersReducedMotion = useReducedMotion(); useEffect(() => { optionsRef.current = resolveOptions({ options, direction, stagger, duration, bounce, skipUnchanged, chromatic: useChromatic, }); }, [ options, direction, stagger, duration, bounce, skipUnchanged, useChromatic, ]); // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only DOM setup (slot-text/react) useEffect(() => { const element = elementRef.current; if (!element) { return; } buildTextRoll(element, text); mountedRef.current = true; return () => { clearTextRoll(element); mountedRef.current = false; firstTextEffectRef.current = true; }; }, []); useEffect(() => { const element = elementRef.current; if (!(element && mountedRef.current)) { return; } if (firstTextEffectRef.current) { firstTextEffectRef.current = false; return; } if (prefersReducedMotion) { buildTextRoll(element, text); return; } animateTextRoll(element, text, optionsRef.current); }, [text, prefersReducedMotion]); return ( ); } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@soralabs","registryDependencies":["utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/primitives/texts/text-roll/index.tsx","content":"$52","type":"registry:ui","target":"components/sora-ui/texts/text-roll.tsx"}],"className":"h-[70svh] min-h-80"}]]}]