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:T1f97,"use client"; import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react"; import type { CSSProperties } from "react"; import { AnimatePresence, animate, motion, useMotionValue, usePresence, useReducedMotion, useTransform, useVelocity } from "motion/react"; import styles from "./slot-text.module.css"; /** * Text and numbers that spin into their new value like slot machine reels. Every character is a reel; digits count through * the wheel in the direction the number moved, letters shuffle through the alphabet, and reels stop one after another from * left to right with a soft, overshoot-free landing. Use it for prices, stats, and launch moments where a change deserves a beat. */ export interface SlotTextProps { /** The value to show. Numbers pass through format; strings render as they are. */ value: string | number; /** Formats a number value. Defaults to en-US grouping, so 12480 reads 12,480. */ format?: (value: number) => string; /** Seconds the first reel spins. Later reels add stagger. */ duration?: number; /** Seconds between reels stopping, left to right. */ stagger?: number; /** Extra full turns a digit makes before it lands. 0 rolls straight to the new digit. */ spins?: number; /** Which end reels are matched from when the length changes. Numbers default to end, so 999 to 1,000 grows on the left. */ align?: "start" | "end"; /** Announce new values politely to screen readers. */ announce?: boolean; className?: string; style?: CSSProperties; } const DIGITS = "0123456789"; const LOWER = "abcdefghijklmnopqrstuvwxyz"; const UPPER = LOWER.toUpperCase(); /** Fast out, long soft landing, never past the target. */ const LANDING = [.12, .8, .16, 1] as const; const subscribe = () => () => {}; /** Cell pitch in em. Keep in sync with .cell in the stylesheet. */ const CELL = 1.6; function useReducedFlag() { const hydrated = useSyncExternalStore(subscribe, () => true, () => false); return !!useReducedMotion() && hydrated; } const classOf = (char: string) => DIGITS.includes(char) ? DIGITS : LOWER.includes(char) ? LOWER : UPPER.includes(char) ? UPPER : null; /** Deterministic shuffle so the same change always spins the same letters. */ function seeded(seed: number) { let state = seed >>> 0 || 1; return () => { state = (state * 1664525 + 1013904223) >>> 0; return state / 4294967296; }; } /** The reel's cells, from what is visible now to the target. */ function buildStrip(from: string, to: string, spins: number, rising: boolean, seed: number) { if (from === to) return [to]; const set = classOf(to); if (!set) return [from, to]; if (set === DIGITS && classOf(from) === DIGITS) { const a = Number(from), b = Number(to); const steps = spins * 10 + (rising ? (b - a + 10) % 10 : (a - b + 10) % 10); return Array.from({ length: steps + 1 }, (_, i) => String((a + (rising ? i : -i) + 100) % 10)); } const random = seeded(seed); const fillers = Array.from({ length: Math.max(2, spins * 5 + 2) }, () => set[Math.floor(random() * set.length)]); return [from, ...fillers, to]; } interface ReelProps { char: string; order: number; entering: boolean; rising: boolean; duration: number; stagger: number; spins: number; reduced: boolean; } function Reel({ char, order, entering, rising, duration, stagger, spins, reduced }: ReelProps) { const pos = useMotionValue(0); const width = useMotionValue("auto"); const sizer = useRef(null); const [isPresent, safeToRemove] = usePresence(); const [reel, setReel] = useState(() => ({ char, strip: entering && !reduced ? buildStrip("", char, spins, rising, char.charCodeAt(0) + order) : [char], from: 0, grow: entering, time: duration + order * stagger, })); // A new target restarts the reel from the cell that is on screen right now, keeping its sub-cell offset, so nothing jumps. if (reel.char !== char) { const current = pos.get(); const index = Math.max(0, Math.min(reel.strip.length - 1, Math.round(current))); const visible = reel.strip[index]!; setReel({ char, strip: reduced ? [char] : buildStrip(visible, char, spins, rising, char.charCodeAt(0) * 31 + visible.charCodeAt(0) * 7 + order + reel.strip.length), from: reduced ? 0 : current - index, grow: false, time: duration + order * stagger, }); } const blur = useTransform(useVelocity(pos), velocity => { const amount = Math.min(Math.abs(velocity) * .05, 2.4); return amount < .15 ? "none" : `blur(${amount.toFixed(2)}px)`; }); // Cells are taller than the line, so the neighbours of a landed glyph sit fully outside the window. const y = useTransform(pos, value => `translate3d(0, ${(-value * CELL).toFixed(4)}em, 0)`); useLayoutEffect(() => { const measured = sizer.current?.getBoundingClientRect().width ?? 0; const last = reel.strip.length - 1; if (reduced) { pos.jump(last); width.jump(measured); return; } pos.jump(reel.from); const spin = animate(pos, last, { duration: last === 0 ? .2 : reel.time, ease: [...LANDING] }); if (reel.grow) width.jump(0); if (width.get() === "auto") { width.jump(measured); return () => spin.stop(); } const size = animate(width, measured, { type: "spring", visualDuration: Math.min(reel.time, .6), bounce: 0 }); return () => { spin.stop(); size.stop(); }; }, [reel, pos, width, reduced]); useLayoutEffect(() => { if (isPresent) return; if (reduced) { safeToRemove(); return; } const exit = animate(width, 0, { type: "spring", visualDuration: .35, bounce: 0, onComplete: safeToRemove }); return () => exit.stop(); }, [isPresent, safeToRemove, width, reduced]); return {char === " " ? "\u00a0" : char} {reel.strip.map((cell, i) => {cell === " " ? "\u00a0" : cell})} ; } export function SlotText({ value, format, duration = .9, stagger = .07, spins = 1, align, announce = false, className, style }: SlotTextProps) { const reduced = useReducedFlag(); const text = typeof value === "number" ? (format ? format(value) : value.toLocaleString("en-US")) : value; const fromEnd = (align ?? (typeof value === "number" ? "end" : "start")) === "end"; const chars = Array.from(text); // A leading run of symbols (a currency sign, a plus) is keyed from the start and never spins into a digit; the rest is // keyed from the aligned end, so separators and suffixes stay on their own reels when the number grows. const lead = fromEnd ? chars.findIndex(char => /[\p{L}\p{N}]/u.test(char)) : 0; const prefix = lead < 0 ? chars.length : lead; const keyOf = (i: number) => i < prefix ? `p${i}` : fromEnd ? `e${chars.length - 1 - i}` : `s${i}`; const [initialKeys] = useState(() => new Set(chars.map((_, i) => keyOf(i)))); const [trend, setTrend] = useState({ value, rising: true }); if (trend.value !== value) { setTrend({ value, rising: typeof value === "number" && typeof trend.value === "number" ? value >= trend.value : true }); } return {text} ; } export default SlotText; 64:T547,.root { position: relative; display: inline-block; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; vertical-align: bottom; } .reels { display: inline-flex; height: 1.15em; align-items: flex-start; } /* Each slot holds one character. Its width follows the character on a spring, so the word never resizes in one frame. */ .slot { position: relative; display: inline-block; height: 1.15em; flex: none; overflow: visible; } .sizer { display: inline-block; visibility: hidden; white-space: pre; pointer-events: none; } /* The window reaches a little past the line so glyphs fade at the edges instead of being cut. */ .window { position: absolute; inset: -.22em -.08em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 .24em, #000 calc(100% - .24em), transparent); mask-image: linear-gradient(to bottom, transparent, #000 .24em, #000 calc(100% - .24em), transparent); } .strip { position: absolute; top: calc(.22em - .225em); right: .08em; left: .08em; display: flex; flex-direction: column; align-items: center; will-change: transform; } .cell { display: block; height: 1.6em; padding-top: .225em; box-sizing: border-box; line-height: 1.15; white-space: pre; } .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } 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":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/components/slot-text/slot-text.tsx","content":"$63","type":"registry:component","target":"@components/arc/slot-text/slot-text.tsx"},{"path":"registry/components/slot-text/slot-text.module.css","content":"$64","type":"registry:component","target":"@components/arc/slot-text/slot-text.module.css"}],"className":"h-[70svh] min-h-80"}]]}]