{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"reading-progress","type":"registry:component","title":"Reading progress","description":"A progress bar fills as you read while the time left counts down.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/reading-progress.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Section = { heading?: string; paragraphs: string[] };\n\n// A common average for silent reading of screen text.\nconst WORDS_PER_MINUTE = 220;\n// Far enough in that it is clear the reader has left the top, and a jump\n// back is worth a button.\nconst SHOW_TOP_AFTER = 0.3;\n// Scroll positions land a few pixels short of the true end on some\n// trackpads; this still counts as finished.\nconst END_SLACK = 4;\nconst SWAP = { duration: 0.2, ease: [0.23, 1, 0.32, 1] } as const;\n\n// Runs on the compositor where scroll-driven animations exist, so the bar\n// never waits on the main thread. The inline scaleX(0) is the fallback's\n// starting point; an animation outranks it where supported.\nconst BAR_CSS = `\n@keyframes reading-progress-fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }\n@supports (animation-timeline: scroll()) {\n .reading-progress-bar { animation: reading-progress-fill linear both; animation-timeline: scroll(nearest block); }\n}`;\n\nconst countWords = (text: string) => text.split(/\\s+/).filter(Boolean).length;\n\nfunction label(minutes: number) {\n return minutes === 0 ? \"Finished\" : `${minutes} min left`;\n}\n\nexport function ReadingProgress({\n title,\n sections,\n className,\n}: {\n title: string;\n sections: Section[];\n className?: string;\n}) {\n const reduceMotion = useReducedMotion();\n const scroller = useRef(null);\n const bar = useRef(null);\n const heading = useRef(null);\n const totalWords = sections.reduce(\n (sum, s) => sum + countWords([s.heading ?? \"\", ...s.paragraphs].join(\" \")),\n 0,\n );\n const [minutes, setMinutes] = useState(() => Math.ceil(totalWords / WORDS_PER_MINUTE));\n const [showTop, setShowTop] = useState(false);\n\n useEffect(() => {\n const el = scroller.current;\n if (!el) return;\n const native = CSS.supports(\"animation-timeline: scroll()\");\n let frame = 0;\n // Batched to one read per frame. React only hears about it when the\n // rounded minutes or the button's visibility actually change.\n const update = () => {\n frame = 0;\n const range = el.scrollHeight - el.clientHeight;\n const progress = range > 0 ? el.scrollTop / range : 1;\n if (!native && bar.current) bar.current.style.transform = `scaleX(${progress})`;\n const done = el.scrollTop >= range - END_SLACK;\n setMinutes(done ? 0 : Math.max(1, Math.ceil((totalWords * (1 - progress)) / WORDS_PER_MINUTE)));\n setShowTop(progress > SHOW_TOP_AFTER);\n };\n const onScroll = () => {\n if (!frame) frame = requestAnimationFrame(update);\n };\n el.addEventListener(\"scroll\", onScroll, { passive: true });\n return () => {\n el.removeEventListener(\"scroll\", onScroll);\n cancelAnimationFrame(frame);\n };\n }, [totalWords]);\n\n const backToTop = () => {\n scroller.current?.scrollTo({ top: 0, behavior: reduceMotion ? \"auto\" : \"smooth\" });\n // The button is about to hide, so hand focus to the start of the article\n // instead of letting it fall back to the page.\n heading.current?.focus({ preventScroll: true });\n };\n\n const text = label(minutes);\n\n return (\n \n \n \n {/* Sticky inside the scroller, so scroll() finds this container as\n its nearest scroll ancestor. */}\n
\n \n
\n Design notes\n \n \n \n {text}\n \n \n \n
\n
\n\n
\n \n {title}\n \n {sections.map((section, i) => (\n
\n {section.heading && (\n

{section.heading}

\n )}\n {section.paragraphs.map((p) => (\n

\n {p}\n

\n ))}\n
\n ))}\n
\n \n\n {/* Outside the scroller, so it stays pinned to the corner. Comes in\n over 200ms and leaves in 150ms; while hidden it is inert, so it can\n never be tabbed to or clicked. */}\n \n \n \n \n \n \n );\n}\n\nconst ARTICLE: Section[] = [\n {\n paragraphs: [\n \"Most interface motion goes unnoticed, and that is the goal. When a menu opens from the button you pressed, or a toast leaves the way it came in, nobody stops to admire it. They simply understand what happened and carry on. Good motion answers a question before the user thinks to ask it.\",\n \"Bad motion is the opposite. It asks for attention it has not earned. A dialog that takes half a second to appear feels slow even when the network is instant, and a list that staggers in on every visit turns a quick glance into a small wait. The cost is paid every single time the thing happens.\",\n ],\n },\n {\n heading: \"Start from frequency\",\n paragraphs: [\n \"The first question is how often someone will see an animation. Something used a hundred times a day, like a command palette, should appear at once. Something seen a few times a day, like a drawer or a modal, can take around two hundred milliseconds. Something rare, like finishing onboarding, has room for a little delight.\",\n \"Easing matters as much as duration. An ease-out curve moves quickly at the start, so the interface responds the moment you act, then settles gently. An ease-in curve does the reverse and feels sluggish, because the slow part lands exactly when you are watching most closely.\",\n ],\n },\n {\n heading: \"Motion as explanation\",\n paragraphs: [\n \"The best animations explain structure. A panel that slides in from the right tells you it can be dismissed by sliding it back. A highlight that glides between tabs tells you the tabs belong together. Change the element without motion and you lose that small lesson about how the interface is built.\",\n \"Finally, motion should always be interruptible. People change their minds mid-gesture, click twice, or press Escape halfway through an opening. Transitions and springs can reverse from wherever they are; fixed keyframes restart from zero and feel broken. Build for the interruption and the rest tends to follow.\",\n ],\n },\n];\n\nexport default function ReadingProgressDemo() {\n return ;\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"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"}],"cssVars":{"light":{"shadow-raised":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"},"dark":{"shadow-raised":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["feedback"],"docs":"From ui lab: https://lab.xevrion.dev/lab/reading-progress"}