{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "caliper", "type": "registry:ui", "title": "Caliper", "description": "Before/after comparison slider that clips a leading layer with a draggable divider. Machinist's-caliper hairline with tick marks, a knurled grip, a live vernier readout, and a 50% detent. Accepts arbitrary children, keyboard-accessible, hover/drag/autoplay modes.", "dependencies": [ "motion" ], "registryDependencies": [ "https://crucibleui.com/r/use-reduced-motion.json", "https://crucibleui.com/r/use-visibility-pause.json" ], "files": [ { "path": "registry/default/utility/caliper/caliper.tsx", "type": "registry:ui", "target": "components/crucible/caliper.tsx", "content": "\"use client\";\n\nimport { motion, useMotionValue, useMotionValueEvent, useSpring, useTransform } from \"motion/react\";\nimport * as React from \"react\";\n\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { useVisibilityPause } from \"@/hooks/use-visibility-pause\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CaliperProps extends Omit, \"onChange\"> {\n /** Leading content — revealed from the start edge up to the divider (the \"before\"). */\n before: React.ReactNode;\n /** Trailing content — fills the frame beneath the leading layer (the \"after\"). */\n after: React.ReactNode;\n /** Starting split as a percentage, 0–100. @default 50 */\n initial?: number;\n /** `drag` requires a press to move the divider; `hover` follows the pointer on move. @default \"drag\" */\n mode?: \"drag\" | \"hover\";\n /** Divider axis. `vertical` splits left/right; `horizontal` splits top/bottom. @default \"vertical\" */\n orientation?: \"vertical\" | \"horizontal\";\n /** Render the knurled grip on the divider. @default true */\n handle?: boolean;\n /** Sweep the divider back and forth on a timer while idle (ignored under reduced motion). @default false */\n autoplay?: boolean;\n /** Seconds for one full autoplay sweep, there and back. @default 6 */\n autoplayDuration?: number;\n /** Beam / tick / grip color — the bright neutral hairline. @default \"#f5f5f5\" */\n color?: string;\n /** Cool accent for the live readout and detent pulse. @default \"#7dd3fc\" */\n accent?: string;\n /** Optional short chip pinned to the leading side. */\n beforeLabel?: React.ReactNode;\n /** Optional short chip pinned to the trailing side. */\n afterLabel?: React.ReactNode;\n /** Fires with the rounded split percentage whenever the divider settles. */\n onSplitChange?: (percent: number) => void;\n /** Extra classes for the leading (before) layer. */\n beforeClassName?: string;\n /** Extra classes for the trailing (after) layer. */\n afterClassName?: string;\n}\n\nconst clamp = (n: number) => Math.min(100, Math.max(0, n));\n\n// Drag inertia — the beam has a whisper of mass, then settles crisply.\nconst SPRING = { stiffness: 320, damping: 30, mass: 0.7 } as const;\n\n/**\n * Caliper — a before/after comparison slider. Two layers occupy one frame; a\n * vertical (or horizontal) divider clips the leading layer so dragging — or\n * hovering across, in hover mode — sweeps the reveal boundary and lets the eye\n * compare two states. Accepts arbitrary children, not just images: diff two\n * entire component trees.\n *\n * Crucible signature: a machinist's caliper — neutral beam with one cool accent.\n * The divider is a thin bright hairline capped with fine tick marks and a\n * knurled grip; a tiny live percentage readout fades in while you drag and\n * evaporates on release, like reading a vernier scale. The beam moves with a\n * whisper of spring inertia, a 1px detent tick brightens as it crosses 50%, and\n * the grip is a focusable slider — arrows nudge 1%, Home/End snap to either\n * side, value announced. Under reduced motion the spring and autoplay are\n * dropped for direct 1:1 tracking. Clip-path compositing only; no per-frame\n * layout.\n */\nexport function Caliper({\n before,\n after,\n initial = 50,\n mode = \"drag\",\n orientation = \"vertical\",\n handle = true,\n autoplay = false,\n autoplayDuration = 6,\n color = \"#f5f5f5\",\n accent = \"#7dd3fc\",\n beforeLabel,\n afterLabel,\n onSplitChange,\n beforeClassName,\n afterClassName,\n className,\n ...props\n}: CaliperProps) {\n const reducedMotion = useReducedMotion();\n const isVertical = orientation === \"vertical\";\n\n const raw = useMotionValue(clamp(initial));\n const springed = useSpring(raw, SPRING);\n const tracked = reducedMotion ? raw : springed;\n\n const activeRef = React.useRef(false);\n const [interacting, setInteracting] = React.useState(false);\n // Once the user grabs the divider, autoplay yields for good (no jarring resume).\n const [engaged, setEngaged] = React.useState(false);\n const [display, setDisplay] = React.useState(() => Math.round(clamp(initial)));\n const displayRef = React.useRef(display);\n const hideTimer = React.useRef | null>(null);\n const onChangeRef = React.useRef(onSplitChange);\n onChangeRef.current = onSplitChange;\n\n // Keep the announced value + readout in sync with the tracked value, but only\n // re-render on whole-percent changes so a full sweep costs ~100 updates, not\n // one per frame. The clip itself is a pure MotionValue transform (no React).\n useMotionValueEvent(tracked, \"change\", (v) => {\n const r = Math.round(v);\n if (r !== displayRef.current) {\n displayRef.current = r;\n setDisplay(r);\n }\n });\n\n const clipPath = useTransform(tracked, (p) =>\n isVertical ? `inset(0 ${100 - p}% 0 0)` : `inset(0 0 ${100 - p}% 0)`\n );\n const linePos = useTransform(tracked, (p) => `${p}%`);\n\n const commit = React.useCallback(() => {\n onChangeRef.current?.(Math.round(raw.get()));\n }, [raw]);\n\n const set = React.useCallback(\n (next: number) => {\n raw.set(clamp(next));\n },\n [raw]\n );\n\n // Autoplay: a cosine sweep between two insets, paused while the user is\n // interacting, offscreen, or on a hidden tab. Reduced motion opts out entirely.\n const autoplayPaused = !autoplay || reducedMotion || interacting || engaged;\n const rootRef = useVisibilityPause(\n (elapsed) => {\n const period = Math.max(0.5, autoplayDuration);\n const phase = (elapsed % period) / period;\n const eased = 0.5 - 0.5 * Math.cos(phase * Math.PI * 2);\n raw.set(8 + eased * 84);\n },\n { paused: autoplayPaused }\n );\n\n const updateFromPointer = React.useCallback(\n (clientX: number, clientY: number) => {\n const el = rootRef.current;\n if (!el) return;\n const rect = el.getBoundingClientRect();\n const p = isVertical\n ? ((clientX - rect.left) / rect.width) * 100\n : ((clientY - rect.top) / rect.height) * 100;\n set(p);\n },\n [isVertical, rootRef, set]\n );\n\n const showReadout = React.useCallback(() => {\n if (hideTimer.current) {\n clearTimeout(hideTimer.current);\n hideTimer.current = null;\n }\n setInteracting(true);\n }, []);\n\n const scheduleHide = React.useCallback((ms: number) => {\n if (hideTimer.current) clearTimeout(hideTimer.current);\n hideTimer.current = setTimeout(() => setInteracting(false), ms);\n }, []);\n\n React.useEffect(\n () => () => {\n if (hideTimer.current) clearTimeout(hideTimer.current);\n },\n []\n );\n\n const onPointerDown = (e: React.PointerEvent) => {\n if (e.button !== 0 && e.pointerType === \"mouse\") return;\n e.currentTarget.setPointerCapture(e.pointerId);\n activeRef.current = true;\n setEngaged(true);\n showReadout();\n updateFromPointer(e.clientX, e.clientY);\n };\n\n const onPointerMove = (e: React.PointerEvent) => {\n if (activeRef.current) {\n updateFromPointer(e.clientX, e.clientY);\n return;\n }\n if (mode === \"hover\" && e.pointerType === \"mouse\") {\n showReadout();\n updateFromPointer(e.clientX, e.clientY);\n }\n };\n\n const endPress = (e: React.PointerEvent) => {\n if (!activeRef.current) return;\n activeRef.current = false;\n try {\n e.currentTarget.releasePointerCapture(e.pointerId);\n } catch {\n /* pointer already released */\n }\n commit();\n if (mode === \"drag\" || e.pointerType !== \"mouse\") setInteracting(false);\n };\n\n const onPointerLeave = () => {\n if (mode === \"hover\" && !activeRef.current) {\n setInteracting(false);\n // Hover mode has no release — the split settles when the pointer leaves.\n commit();\n }\n };\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n const current = Math.round(raw.get());\n let next: number | null = null;\n switch (e.key) {\n case \"ArrowLeft\":\n case \"ArrowDown\":\n next = current - 1;\n break;\n case \"ArrowRight\":\n case \"ArrowUp\":\n next = current + 1;\n break;\n case \"PageDown\":\n next = current - 10;\n break;\n case \"PageUp\":\n next = current + 10;\n break;\n case \"Home\":\n next = 0;\n break;\n case \"End\":\n next = 100;\n break;\n default:\n return;\n }\n e.preventDefault();\n setEngaged(true);\n set(next);\n commit();\n showReadout();\n scheduleHide(1000);\n };\n\n const nearDetent = Math.abs(display - 50) <= 1;\n\n // Grip orientation: a pill along the divider with knurl lines and drag chevrons.\n const grip = handle ? (\n \n {/* knurl lines — fine ridges across the grip face */}\n \n \n \n \n \n \n ) : null;\n\n return (\n \n {/* Trailing layer (after) — fills the frame */}\n
{after}
\n\n {/* Leading layer (before) — clipped to the split via clip-path only */}\n \n {before}\n \n\n {/* Optional side labels */}\n {(beforeLabel || afterLabel) && (\n
\n \n {beforeLabel}\n \n \n {afterLabel}\n \n
\n )}\n\n {/* Static 50% detent reference — a 1px tick that brightens as the beam nears it */}\n \n\n {/* Divider — the bright beam, capped with tick marks, carrying the grip.\n Not aria-hidden as a whole: the grip inside is the focusable slider. */}\n \n
\n {/* the hairline beam + soft glow */}\n \n {/* caliper jaw ticks at both ends */}\n \n \n
\n\n {/* live readout — fades in while interacting, evaporates on release */}\n \n \n {display}%\n \n \n\n {grip}\n \n \n );\n}\n" } ] }