60: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"] 61: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"] 62:T1d4f,"use client"; import { useEffect, useRef, useState } from "react"; import { motion, useSpring, useTransform } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; import { usePreviewPlay } from "@/lib/preview-play"; const DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; // The tens column starts blank, so 7% never reads as 07%. const TENS = [" ", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; const EASE_OUT = "ease-[cubic-bezier(0.23,1,0.32,1)]"; function Roll({ strip, index }: { strip: string[]; index: number }) { return ( {strip.map((d, i) => ( {d} ))} ); } export function TextProgress({ value, label, doneLabel = "Done", className, }: { /** 0 to 100. */ value: number; label: string; doneLabel?: string; className?: string; }) { const reduceMotion = useReducedMotion(); const clamped = Math.min(100, Math.max(0, value)); const percent = Math.round(clamped); const done = percent >= 100; // Progress arrives in uneven jumps; a spring turns them into one steady // pour of ink and keeps its speed when the next jump lands mid-glide. const ink = useSpring(clamped, { stiffness: 90, damping: 20 }); useEffect(() => { if (reduceMotion) ink.jump(clamped); else ink.set(clamped); }, [clamped, ink, reduceMotion]); const clip = useTransform(ink, (v) => `inset(0 ${Math.max(0, 100 - v).toFixed(2)}% 0 0)`); return (

{label} {/* The same words, stacked and clipped: ink fills the letters themselves rather than a bar beside them. */} {label} {doneLabel} % {done ? doneLabel : ""}

); } // An index card at rest holds the upload part-way, so the half-inked label // shows the idea without anything running. const PREVIEW_REST = 62; export default function TextProgressDemo() { const play = usePreviewPlay(); const [value, setValue] = useState(() => (play === null ? 0 : PREVIEW_REST)); const [run, setRun] = useState(0); const timer = useRef>(undefined); // A fake upload: uneven chunks at uneven intervals, like a real network. useEffect(() => { if (play !== null) return; let v = 0; const tick = () => { v = Math.min(100, v + 4 + Math.random() * 14); setValue(v); if (v < 100) timer.current = setTimeout(tick, 220 + Math.random() * 480); }; timer.current = setTimeout(tick, 600); return () => clearTimeout(timer.current); }, [run, play]); // Index preview: the waiting upload picks up and finishes, holds on // "Uploaded" for a beat, then the next one starts from empty. Leaving // glides the ink back to where it rested. useEffect(() => { if (!play) return; let v = PREVIEW_REST; let t: ReturnType; const tick = () => { v = Math.min(100, v + 5 + Math.random() * 12); setValue(v); if (v < 100) { t = setTimeout(tick, 200 + Math.random() * 350); return; } t = setTimeout(() => { v = 0; setValue(0); t = setTimeout(tick, 900); }, 1800); }; t = setTimeout(tick, 250); return () => { clearTimeout(t); setValue(PREVIEW_REST); }; }, [play]); return (

); } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/text-progress.tsx","content":"$62","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"},{"path":"lib/preview-play.ts","content":"\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\n// Lets a demo know whether it's showing in an index card, and whether that\n// card is hovered or focused. Demos use it to act themselves out on hover:\n// a star button stars itself, a checkbox scribbles, and so on.\n//\n// null: not in a preview (the component's own page, or real use).\n// false: in a preview, at rest.\n// true: in a preview, being hovered or focused: play the show.\nexport const PreviewPlayContext = createContext(null);\n\nexport function usePreviewPlay() {\n return useContext(PreviewPlayContext);\n}\n","type":"registry:lib","target":"lib/preview-play.ts"}],"className":"h-[70svh] min-h-80"}]]}]