5f: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"] 60: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"] 61:T3ba1,"use client"; import { useEffect, useRef, useState } from "react"; import { motion, useMotionValue, useMotionValueEvent, useTransform, type MotionValue, } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; const DOT = 6; const PILL = 20; const GAP = 6; // How far each edge of the pill travels between two pages. const STEP = DOT + GAP; const clamp01 = (v: number) => Math.min(Math.max(v, 0), 1); const smooth = (v: number) => v * v * (3 - 2 * v); // The leading edge does its travel in the first 60% of the move and the // trailing edge in the last 60%, so the pill stretches toward the next dot, // then pulls its tail in after it, like a worm. const lead = (t: number) => smooth(clamp01(t / 0.6)); const trail = (t: number) => smooth(clamp01((t - 0.4) / 0.6)); /** * `progress` is a continuous page index (1.5 is halfway between the second * and third page), so the dots can follow a scroll or a drag frame by frame * without React rendering anything. */ export function PageDots({ count, progress, onSelect, autoplay, className, }: { count: number; progress: MotionValue; onSelect: (index: number) => void; /** Fills the pill over `duration` ms while `running`, then calls `onElapsed`. */ autoplay?: { duration: number; running: boolean; onElapsed: (active: number) => void; }; className?: string; }) { const [active, setActive] = useState(() => Math.round(progress.get())); // Only crossing the halfway point renders, which is what aria-current needs. useMotionValueEvent(progress, "change", (p) => setActive(Math.round(p))); const fillRef = useRef(null); const settle = useRef(undefined); const onElapsed = useRef(autoplay?.onElapsed); useEffect(() => { onElapsed.current = autoplay?.onElapsed; }); const running = autoplay?.running ?? false; const duration = autoplay?.duration ?? 0; // The countdown is the timer: when the fill finishes, the page advances. // WAAPI keeps it on the compositor with no React state per frame, and // restarting it on every page or pause means a resume starts over. useEffect(() => { const fill = fillRef.current; if (!fill || !running) return; settle.current?.cancel(); const countdown = fill.animate( [{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], { duration, easing: "linear" }, ); countdown.onfinish = () => onElapsed.current?.(active); return () => { countdown.onfinish = null; if (countdown.playState !== "running") return; // Paused partway: ease the fill back to full over 200ms rather than // snapping, so a paused pill reads as solid, not half done. const from = getComputedStyle(fill).transform; countdown.cancel(); settle.current = fill.animate( [{ transform: from }, { transform: "scaleX(1)" }], { duration: 200, easing: "cubic-bezier(0.23, 1, 0.32, 1)" }, ); }; }, [running, active, duration]); useEffect(() => () => settle.current?.cancel(), []); // Pill spans [left, right] across the two pages it is between. const pill = (p: number) => { const k = Math.min(Math.max(Math.floor(p), 0), Math.max(count - 2, 0)); const t = clamp01(p - k); const left = k * STEP + STEP * trail(t); const right = k * STEP + PILL + STEP * lead(t); return { left, width: right - left }; }; const pillX = useTransform(progress, (p) => pill(p).left); const pillWidth = useTransform(progress, (p) => pill(p).width); return (

{Array.from({ length: count }, (_, i) => ( ))} {autoplay && ( // Rests full, so a paused pill looks exactly like a plain one. )}

); } function Dot({ index, count, progress, current, onSelect, }: { index: number; count: number; progress: MotionValue; current: boolean; onSelect: (index: number) => void; }) { // A dot swells toward pill width as the page approaches, so the gray row // makes room for the pill and every gap stays even mid-scroll. const width = useTransform( progress, (p) => DOT + (PILL - DOT) * clamp01(1 - Math.abs(p - index)), ); // Everything before this dot is plain dots, plus however much of the // extra pill width sits behind it. const left = useTransform( progress, (p) => index * STEP + (PILL - DOT) * clamp01(index - p), ); return ( onSelect(index)} // Reaches half the 6px gap past each side of its dot, so the hit areas // tile the row with no dead space between them. className="group absolute inset-y-0 -ml-[3px] box-content flex touch-manipulation items-center rounded-full px-[3px] outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-foreground" style={{ left, width }} > ); } const PAGES = [ { title: "Inbox zero", note: "Everything triaged before lunch." }, { title: "Focus time", note: "Two quiet hours blocked every morning." }, { title: "Weekly review", note: "Friday at four, fifteen minutes." }, { title: "Shared lists", note: "Groceries, synced with Sam." }, { title: "Offline mode", note: "Works on the train, syncs later." }, ]; // Long enough to read a card's two lines, short enough to feel alive. const INTERVAL = 3000; // A scroll counts as over once no scroll event has arrived for this long, // which also covers the momentum after a flick. const SCROLL_QUIET = 200; const ICON_SWAP = { type: "spring", duration: 0.3, bounce: 0 } as const; export default function PageDotsDemo() { const reduceMotion = useReducedMotion(); const scrollerRef = useRef(null); const toggleRef = useRef(null); const regionRef = useRef(null); const progress = useMotionValue(0); // null until the viewer picks, so reduced motion can default to paused. const [choice, setChoice] = useState(null); const playing = choice ?? !reduceMotion; const [hovered, setHovered] = useState(false); const [focused, setFocused] = useState(false); const [scrolling, setScrolling] = useState(false); const [visible, setVisible] = useState(true); const running = playing && !hovered && !focused && !scrolling && visible; useEffect(() => { const scroller = scrollerRef.current; if (!scroller) return; // Scroll events can outpace frames on high-rate trackpads; reading // layout once per frame is all the dots can show anyway. let frame = 0; const read = () => { frame = 0; const max = scroller.scrollWidth - scroller.clientWidth; progress.set( max > 0 ? (scroller.scrollLeft / max) * (PAGES.length - 1) : 0, ); }; // Only wheel and touch mark a scroll as the viewer's, so autoplay's own // smooth scrolls never pause autoplay. let touching = false; let busy = false; let quiet: ReturnType | undefined; const settleSoon = () => { clearTimeout(quiet); quiet = setTimeout(() => { if (touching) return; busy = false; setScrolling(false); }, SCROLL_QUIET); }; const start = () => { busy = true; setScrolling(true); }; const onScroll = () => { if (!frame) frame = requestAnimationFrame(read); if (busy) settleSoon(); }; const onWheel = () => { start(); settleSoon(); }; const onTouchStart = () => { touching = true; clearTimeout(quiet); start(); }; const onTouchEnd = () => { touching = false; settleSoon(); }; const passive = { passive: true } as const; scroller.addEventListener("scroll", onScroll, passive); scroller.addEventListener("wheel", onWheel, passive); scroller.addEventListener("touchstart", onTouchStart, passive); scroller.addEventListener("touchend", onTouchEnd, passive); scroller.addEventListener("touchcancel", onTouchEnd, passive); return () => { scroller.removeEventListener("scroll", onScroll); scroller.removeEventListener("wheel", onWheel); scroller.removeEventListener("touchstart", onTouchStart); scroller.removeEventListener("touchend", onTouchEnd); scroller.removeEventListener("touchcancel", onTouchEnd); cancelAnimationFrame(frame); clearTimeout(quiet); }; }, [progress]); useEffect(() => { const onChange = () => setVisible(!document.hidden); onChange(); document.addEventListener("visibilitychange", onChange); return () => document.removeEventListener("visibilitychange", onChange); }, []); const goTo = (index: number) => { const scroller = scrollerRef.current; if (!scroller) return; const max = scroller.scrollWidth - scroller.clientWidth; scroller.scrollTo({ left: (index / (PAGES.length - 1)) * max, behavior: reduceMotion ? "auto" : "smooth", }); }; // Past the last page it scrolls back to the first rather than jumping, // and the pill crawls home through every dot, so the loop reads as a // deliberate rewind. const advance = (active: number) => goTo((active + 1) % PAGES.length); const insideRegion = (node: EventTarget | null) => node instanceof Node && !!regionRef.current?.contains(node) && !toggleRef.current?.contains(node); return (

{ if (e.pointerType !== "touch") setHovered(insideRegion(e.target)); }} onPointerLeave={() => setHovered(false)} onFocus={(e) => { // Only keyboard focus pauses; a mouse click on a dot leaves focus // behind that would otherwise hold autoplay forever. if (insideRegion(e.target) && e.target.matches(":focus-visible")) setFocused(true); }} onBlur={(e) => { if (!insideRegion(e.relatedTarget)) setFocused(false); }} >

{PAGES.map((page, i) => (

{String(i + 1).padStart(2, "0")}

{page.title}

{page.note}

))}

{/* The 32px toggle sits on the right with a matching 32px spacer on the left, so the dots stay centered under the cards. */}

); } function SwapIcon({ visible, reduceMotion, children, }: { visible: boolean; reduceMotion: boolean | null; children: React.ReactNode; }) { // Reduced motion keeps the cross-fade but drops the scale and blur. const hidden = reduceMotion ? { opacity: 0 } : { scale: 0.25, opacity: 0, filter: "blur(4px)" }; return ( {children} ); } 5e:["$","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"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"components/page-dots.tsx","content":"$61","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"}],"className":"h-[70svh] min-h-80"}]]}]