{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"order-tracker","type":"registry:component","title":"Order tracker","description":"Drives a parcel across a street map to your door and stamps each stop as it arrives.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/order-tracker.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport {\n animate,\n AnimatePresence,\n motion,\n useMotionValue,\n useTransform,\n} from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TrackingStop = {\n label: string;\n // What the latest scan said, shown while this is the current stop.\n detail: string;\n // ISO time the stop was reached. Stops after the current one have none.\n at?: string;\n};\n\ntype Point = { x: number; y: number };\n\n// The map is drawn 1:1 at the card's full width (540 minus the 8px frame),\n// so strokes and icons land on whole pixels on desktop.\nconst W = 524;\nconst H = 196;\n// Room either side for a centred stop label (88px wide) to stay inside.\nconst INSET = 48;\n// Each stop sits on its own street. Heights alternate so the route reads as\n// a drive across town, never a straight progress bar.\nconst Y = [146, 96, 132, 64, 110];\n// Corner radius where the route turns from one street onto the next.\nconst TURN = 14;\n// Samples per turn for the arc-length table: enough that the parcel stays\n// within a fraction of a pixel of the drawn curve.\nconst TURN_SAMPLES = 10;\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n// On-screen travel, so ease-in-out. It is the one thing to watch here, a\n// journey between two places, so it runs longer than a UI change.\nconst TRAVEL = { duration: 1.1, ease: [0.77, 0, 0.175, 1] } as const;\nconst ROLL = { type: \"spring\", duration: 0.35, bounce: 0 } as const;\n// Stamps lean like they were pressed by hand, each a little differently.\nconst TILT = [-4, 3, -2, 4, -3];\n\n// Map colours are data, the conventions every street map uses: parks read\n// green and water reads blue. Kept faint so the route stays the focus.\nconst PARK = \"light-dark(oklch(0.93 0.05 150), oklch(0.26 0.035 150))\";\nconst WATER = \"light-dark(oklch(0.91 0.04 235), oklch(0.26 0.04 240))\";\n\nfunction stopPoints(count: number): Point[] {\n return Array.from({ length: count }, (_, i) => ({\n x: INSET + ((W - INSET * 2) * i) / Math.max(1, count - 1),\n y: Y[i % Y.length],\n }));\n}\n\n// Streets meet at right angles, so each leg runs along the stop's street,\n// turns onto a cross street halfway, then onto the next stop's street.\nfunction corners(stops: Point[]) {\n const vertices: Point[] = [stops[0]];\n const stopAt = [0];\n for (let i = 1; i < stops.length; i++) {\n const a = stops[i - 1];\n const b = stops[i];\n const mid = (a.x + b.x) / 2;\n if (a.y !== b.y) vertices.push({ x: mid, y: a.y }, { x: mid, y: b.y });\n stopAt.push(vertices.length);\n vertices.push(b);\n }\n return { vertices, stopAt };\n}\n\n// Rounds every turn with a quadratic curve. Returns the path for drawing\n// and a dense polyline for measuring, both from the same geometry.\nfunction build(stops: Point[]) {\n const { vertices, stopAt } = corners(stops);\n const f = (p: Point) => `${p.x.toFixed(1)} ${p.y.toFixed(1)}`;\n let d = `M${f(vertices[0])}`;\n const points: Point[] = [vertices[0]];\n const stopIndex = [0];\n for (let k = 1; k < vertices.length; k++) {\n const v = vertices[k];\n const prev = vertices[k - 1];\n const next = vertices[k + 1];\n const isStop = stopAt.includes(k);\n if (!next || isStop) {\n d += ` L${f(v)}`;\n points.push(v);\n if (isStop) stopIndex.push(points.length - 1);\n continue;\n }\n const inLen = Math.hypot(v.x - prev.x, v.y - prev.y);\n const outLen = Math.hypot(next.x - v.x, next.y - v.y);\n const r = Math.min(TURN, inLen / 2, outLen / 2);\n const a = { x: v.x - ((v.x - prev.x) / inLen) * r, y: v.y - ((v.y - prev.y) / inLen) * r };\n const b = { x: v.x + ((next.x - v.x) / outLen) * r, y: v.y + ((next.y - v.y) / outLen) * r };\n d += ` L${f(a)} Q${f(v)} ${f(b)}`;\n for (let s = 0; s <= TURN_SAMPLES; s++) {\n const t = s / TURN_SAMPLES;\n const u = 1 - t;\n points.push({\n x: u * u * a.x + 2 * u * t * v.x + t * t * b.x,\n y: u * u * a.y + 2 * u * t * v.y + t * t * b.y,\n });\n }\n }\n return { d, vertices, ...measure(points, stopIndex) };\n}\n\n// Arc length along the polyline, pure math, so the server and the client\n// draw the parcel in the same place without measuring the DOM.\nfunction measure(points: Point[], stopIndex: number[]) {\n const lengths = [0];\n for (let i = 1; i < points.length; i++) {\n lengths.push(\n lengths[i - 1] + Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y),\n );\n }\n const total = lengths[lengths.length - 1] || 1;\n const pointAt = (fraction: number): Point => {\n const target = Math.max(0, Math.min(1, fraction)) * total;\n let lo = 0;\n let hi = lengths.length - 1;\n while (hi - lo > 1) {\n const mid = (lo + hi) >> 1;\n if (lengths[mid] < target) lo = mid;\n else hi = mid;\n }\n const span = lengths[hi] - lengths[lo] || 1;\n const t = (target - lengths[lo]) / span;\n return {\n x: points[lo].x + (points[hi].x - points[lo].x) * t,\n y: points[lo].y + (points[hi].y - points[lo].y) * t,\n };\n };\n return { pointAt, stops: stopIndex.map((i) => lengths[i] / total) };\n}\n\nconst DAY = 86_400_000;\n\nexport function OrderTracker({\n orderId,\n stops,\n current,\n eta,\n timeZone = \"UTC\",\n className,\n}: {\n orderId: string;\n stops: TrackingStop[];\n // Index of the latest stop reached.\n current: number;\n // ISO time of the promised delivery.\n eta: string;\n // Dates print in the carrier's zone, so server and client agree.\n timeZone?: string;\n className?: string;\n}) {\n const reduceMotion = useReducedMotion();\n const geometry = useMemo(() => {\n const points = stopPoints(stops.length);\n return { points, ...build(points) };\n }, [stops.length]);\n\n const last = stops.length - 1;\n const delivered = current >= last;\n\n // Fraction of the route travelled. The parcel and the solid line both\n // read it, so they never drift apart.\n const progress = useMotionValue(geometry.stops[current]);\n useEffect(() => {\n const target = geometry.stops[current];\n if (reduceMotion) {\n progress.jump(target);\n return;\n }\n const run = animate(progress, target, TRAVEL);\n return () => run.stop();\n }, [current, geometry, progress, reduceMotion]);\n const parcelX = useTransform(progress, (p) => geometry.pointAt(p).x);\n const parcelY = useTransform(progress, (p) => geometry.pointAt(p).y);\n\n const format = (iso: string, options: Intl.DateTimeFormatOptions) =>\n new Intl.DateTimeFormat(\"en-US\", { timeZone, ...options }).format(new Date(iso));\n // Calendar day number in the carrier's zone, so \"today\" flips at their\n // midnight rather than at 24 hours.\n const day = (iso: string) => {\n const parts = new Intl.DateTimeFormat(\"en-US\", {\n timeZone,\n year: \"numeric\",\n month: \"numeric\",\n day: \"numeric\",\n }).formatToParts(new Date(iso));\n const get = (type: string) => Number(parts.find((p) => p.type === type)?.value);\n return Date.UTC(get(\"year\"), get(\"month\") - 1, get(\"day\")) / DAY;\n };\n\n const reachedAt = stops[current]?.at;\n const daysLeft = reachedAt ? Math.max(0, day(eta) - day(reachedAt)) : 0;\n const etaLabel = format(eta, { weekday: \"long\", month: \"short\", day: \"numeric\" });\n\n const headline = delivered\n ? \"delivered\"\n : daysLeft === 0\n ? \"today\"\n : \"days\";\n\n const start = geometry.points[0];\n const end = geometry.points[last];\n const streetsY = [...new Set([...geometry.points.map((p) => p.y), 22, 184])];\n const streetsX = geometry.vertices\n .filter((v, i, all) => i > 0 && all[i - 1].x === v.x)\n .map((v) => v.x);\n\n return (\n \n
\n
\n

Order {orderId}

\n

\n {delivered && reachedAt\n ? format(reachedAt, { weekday: \"short\", month: \"short\", day: \"numeric\", hour: \"numeric\", minute: \"2-digit\" })\n : etaLabel}\n

\n
\n\n {/* Fixed height, so the map below never moves as the copy changes. */}\n
\n \n \n {headline === \"delivered\" ? (\n \"Delivered\"\n ) : headline === \"today\" ? (\n \"Arriving today\"\n ) : (\n <>\n Arriving in\n \n {daysLeft === 1 ? \"day\" : \"days\"}\n \n )}\n \n \n \n {delivered ? \"Delivered\" : daysLeft === 0 ? \"Arriving today\" : `Arriving in ${daysLeft} ${daysLeft === 1 ? \"day\" : \"days\"}, ${etaLabel}`}\n \n
\n\n
\n \n \n {stops[current]?.detail}\n \n \n
\n
\n\n
\n \n {/* Town: a river, two parks, then the streets on top of them. */}\n \n \n \n \n {streetsY.map((y) => (\n \n ))}\n {streetsX.map((x) => (\n \n ))}\n {geometry.points.map((p) => (\n \n ))}\n \n\n {/* The road still to drive, then the part already driven. */}\n \n \n\n {geometry.points.map((p, i) => {\n const reached = i <= current;\n const next = i === current + 1;\n return (\n \n {next && (\n \n )}\n \n \n );\n })}\n\n {/* Warehouse: flat roofline and a roller door, so it never reads\n as a second house. The destination is filled, like a map's\n \"you are here\". */}\n \n \n \n \n \n \n \n \n\n \n \n \n \n
\n\n
    \n {stops.map((stop, i) => {\n const x = geometry.points[i].x / W;\n const reached = i <= current && !!stop.at;\n return (\n \n \n {stop.label}\n \n {reached && stop.at\n ? `, ${format(stop.at, { month: \"short\", day: \"numeric\", hour: \"numeric\", minute: \"2-digit\" })}`\n : i === current + 1\n ? \", next\"\n : \", pending\"}\n \n \n \n {reached && stop.at && (\n \n {format(stop.at, { month: \"short\", day: \"numeric\" })}\n {format(stop.at, { hour: \"2-digit\", minute: \"2-digit\", hourCycle: \"h23\" })}\n \n )}\n \n \n );\n })}\n
\n \n );\n}\n\n// A map pin carrying a parcel, its tip on the road, with a soft contact\n// shadow so it reads as standing on the map rather than pasted over it.\nfunction Pin() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\n// Where the trip starts and ends, a landmark on the map like a real app's.\nfunction Badge({\n x,\n y,\n label,\n filled = false,\n children,\n}: Point & { label: string; filled?: boolean; children: ReactNode }) {\n return (\n \n \n \n {children}\n \n \n );\n}\n\nfunction RollingNumber({ value }: { value: number }) {\n const [previous, setPrevious] = useState(value);\n const [direction, setDirection] = useState(1);\n if (value !== previous) {\n setPrevious(value);\n setDirection(value > previous ? 1 : -1);\n }\n const chars = [...String(value)];\n return (\n \n {chars.map((char, i) => (\n \n ))}\n \n );\n}\n\nfunction Digit({ char, direction }: { char: string; direction: number }) {\n const reduceMotion = useReducedMotion();\n // Counting down, so the new day drops in from above.\n const offset = (d: number) => (reduceMotion ? \"0%\" : `${d * 100}%`);\n return (\n \n \n ({ y: offset(d), opacity: 0 }),\n center: { y: \"0%\", opacity: 1 },\n exit: (d: number) => ({ y: offset(-d), opacity: 0 }),\n }}\n initial=\"enter\"\n animate=\"center\"\n exit=\"exit\"\n transition={ROLL}\n className=\"col-start-1 row-start-1\"\n >\n {char}\n \n \n \n );\n}\n\nconst STOPS: (TrackingStop & { at: string })[] = [\n { label: \"Ordered\", detail: \"Order confirmed, payment received\", at: \"2026-09-21T09:14:00Z\" },\n { label: \"Packed\", detail: \"Packed at our Leeds warehouse\", at: \"2026-09-21T16:40:00Z\" },\n { label: \"Shipped\", detail: \"Handed to Parcelway, tracking PW 4471 2093\", at: \"2026-09-22T08:05:00Z\" },\n { label: \"Out for delivery\", detail: \"On the van, 14 stops before yours\", at: \"2026-09-24T07:12:00Z\" },\n { label: \"Delivered\", detail: \"Left with your neighbour at no. 12\", at: \"2026-09-24T13:36:00Z\" },\n];\n\nexport default function OrderTrackerDemo() {\n const [current, setCurrent] = useState(1);\n const done = current >= STOPS.length - 1;\n return (\n
\n (i <= current ? s : { ...s, at: undefined }))}\n current={current}\n eta=\"2026-09-24T20:00:00Z\"\n />\n setCurrent((c) => (done ? 0 : c + 1))}\n className=\"h-10 touch-manipulation rounded-full bg-muted px-4 text-sm font-medium text-foreground shadow-raised outline-hidden transition-[scale] duration-150 ease-out select-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground active:scale-[0.96]\"\n >\n {done ? \"Start over\" : \"Simulate next update\"}\n \n
\n );\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":["data"],"docs":"From ui lab: https://lab.xevrion.dev/lab/order-tracker"}