{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tape-measure","type":"registry:component","title":"Tape measure","description":"Pull the blade out to measure; release the lock and it reels itself back in.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/tape-measure.tsx","type":"registry:component","content":"\"use client\";\n\nimport { memo, useEffect, useId, useRef, useState } from \"react\";\nimport {\n animate,\n motion,\n useMotionValue,\n useMotionValueEvent,\n useTransform,\n} from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\n// Pixels per centimetre. Wide enough that a 1mm step is still a whole pixel\n// under the finger, so fine adjustments are actually reachable.\nconst SCALE = 10;\nconst CASE_W = 132;\nconst BLADE_H = 26;\n// The tab is only grabbable near its own edge; this is the reach past it.\nconst TAB_REACH = 28;\n// Within this of a whole centimetre the blade drops into the detent; between\n// detents it moves in 1mm steps.\nconst DETENT = 0.15;\n// Keyboard moves and external changes slide the blade with no overshoot,\n// so the reading never passes the value it is heading for.\nconst SLIDE = { type: \"spring\", stiffness: 500, damping: 45 } as const;\n// The retract motor: fast, and just underdamped enough that a long blade\n// slams the tab into the mouth. That overshoot becomes the case's jolt.\nconst RETRACT = { type: \"spring\", stiffness: 380, damping: 28 } as const;\n// The largest jolt the case takes from the tab hitting it, in px.\nconst MAX_JOLT = 8;\n\n// A tape measure is a physical object: it keeps its own materials in both\n// themes. Safety-yellow housing and blade, black rubber, plated steel, and\n// a red lock so you can see at a glance whether it is set.\nconst HOUSING = \"linear-gradient(170deg, oklch(0.87 0.16 88), oklch(0.78 0.16 78))\";\nconst RUBBER = \"oklch(0.22 0.005 60)\";\nconst STEEL = \"linear-gradient(135deg, oklch(0.93 0 0), oklch(0.66 0 0) 55%, oklch(0.82 0 0))\";\nconst RIVET = \"oklch(0.5 0 0)\";\nconst LOCK = \"oklch(0.58 0.2 28)\";\nconst BLADE = \"oklch(0.9 0.15 95)\";\nconst BLADE_INK = \"oklch(0.2 0.01 60)\";\nconst BLADE_RED = \"oklch(0.52 0.2 28)\";\n\nfunction detent(raw: number) {\n const whole = Math.round(raw);\n if (Math.abs(raw - whole) < DETENT) return whole;\n return Math.round(raw * 10) / 10;\n}\n\nfunction clamp(v: number, lo: number, hi: number) {\n return Math.min(Math.max(v, lo), hi);\n}\n\nconst format = (cm: number) => Math.max(0, cm).toFixed(1);\n\nexport function TapeMeasure({\n value,\n onChange,\n label,\n max = 300,\n className,\n}: {\n /** Length in centimetres, to one decimal. */\n value: number;\n onChange: (value: number) => void;\n label: string;\n max?: number;\n className?: string;\n}) {\n const id = useId();\n const reduceMotion = useReducedMotion();\n const length = useMotionValue(value);\n const [locked, setLocked] = useState(true);\n // The readout and ARIA value are written straight from the motion value,\n // so React only ever renders the first one.\n const [initial] = useState(() => format(value));\n\n const sliderRef = useRef(null);\n const readoutRef = useRef(null);\n const anim = useRef | null>(null);\n const drag = useRef<{ id: number; startX: number; start: number } | null>(null);\n // The last value handed to onChange, so a prop change can be told apart\n // from our own echo.\n const committed = useRef(value);\n\n const shown = useTransform(length, (l) => Math.max(l, 0));\n const stripX = useTransform(shown, (l) => (l - max) * SCALE);\n const tabX = useTransform(shown, (l) => l * SCALE);\n // Past zero, the tab is inside the mouth: the whole tape shoves left.\n const jolt = useTransform(length, (l) =>\n l < 0 ? -MAX_JOLT * Math.tanh((-l * SCALE) / 40) : 0,\n );\n\n // The reading ticks along with the blade without re-rendering per frame.\n useMotionValueEvent(length, \"change\", (l) => {\n const text = format(l);\n if (readoutRef.current) readoutRef.current.textContent = text;\n sliderRef.current?.setAttribute(\"aria-valuenow\", text);\n sliderRef.current?.setAttribute(\"aria-valuetext\", `${text} centimetres`);\n });\n\n const halt = () => {\n anim.current?.stop();\n anim.current = null;\n };\n\n const commit = (v: number) => {\n const next = Math.round(clamp(v, 0, max) * 10) / 10;\n committed.current = next;\n onChange(next);\n };\n\n const slideTo = (v: number) => {\n halt();\n if (reduceMotion) length.jump(v);\n else anim.current = animate(length, v, SLIDE);\n };\n\n useEffect(() => {\n if (Math.abs(value - committed.current) < 1e-6) return;\n committed.current = value;\n anim.current?.stop();\n if (reduceMotion) length.jump(value);\n else anim.current = animate(length, value, SLIDE);\n }, [value, reduceMotion, length]);\n\n useEffect(() => () => anim.current?.stop(), []);\n\n const retract = () => {\n halt();\n commit(0);\n if (reduceMotion) {\n length.jump(0);\n return;\n }\n anim.current = animate(length, 0, { ...RETRACT, velocity: length.getVelocity() });\n };\n\n const toggleLock = () => {\n if (locked && length.get() > 0) {\n setLocked(false);\n retract();\n } else {\n setLocked(!locked);\n }\n };\n\n const onPointerDown = (e: React.PointerEvent) => {\n if (e.button !== 0 || drag.current) return;\n const box = e.currentTarget.getBoundingClientRect();\n if (e.clientX - box.left > shown.get() * SCALE + TAB_REACH) return;\n halt();\n e.currentTarget.setPointerCapture(e.pointerId);\n // A thumb on the lock is what keeps a real tape out; grabbing sets it.\n setLocked(true);\n drag.current = { id: e.pointerId, startX: e.clientX, start: shown.get() };\n };\n\n const onPointerMove = (e: React.PointerEvent) => {\n const d = drag.current;\n if (!d || e.pointerId !== d.id) return;\n const raw = d.start + (e.clientX - d.startX) / SCALE;\n length.set(detent(clamp(raw, 0, max)));\n };\n\n const onPointerEnd = (e: React.PointerEvent) => {\n const d = drag.current;\n if (!d || e.pointerId !== d.id) return;\n drag.current = null;\n const velocity = length.getVelocity();\n // A flick keeps sliding on its own speed, then settles into a detent.\n if (!reduceMotion && Math.abs(velocity) > 15) {\n anim.current = animate(length, length.get(), {\n type: \"inertia\",\n velocity,\n power: 0.5,\n timeConstant: 220,\n min: 0,\n max,\n bounceStiffness: 600,\n bounceDamping: 40,\n modifyTarget: Math.round,\n onComplete: () => commit(length.get()),\n });\n return;\n }\n commit(length.get());\n };\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n const step = e.shiftKey ? 10 : 1;\n const base = committed.current;\n let next: number;\n // Keys land on whole centimetres, the way a detent would catch them.\n if (e.key === \"ArrowRight\" || e.key === \"ArrowUp\") next = Math.floor(base + 1e-6) + step;\n else if (e.key === \"ArrowLeft\" || e.key === \"ArrowDown\") next = Math.ceil(base - 1e-6) - step;\n else if (e.key === \"PageUp\") next = Math.floor(base + 1e-6) + 10;\n else if (e.key === \"PageDown\") next = Math.ceil(base - 1e-6) - 10;\n else if (e.key === \"Home\") next = 0;\n else if (e.key === \"End\") next = max;\n else return;\n e.preventDefault();\n next = clamp(next, 0, max);\n setLocked(true);\n commit(next);\n slideTo(next);\n };\n\n return (\n
\n
\n
\n \n {label}\n \n \n \n {initial}\n \n cm\n \n
\n \n \n {locked ? \"Locked\" : \"Free\"}\n \n
\n\n
\n \n \n \n \n \n {/* The hook: a riveted plate on the blade's end, bent up into\n a tab that stands proud of the blade on both sides. */}\n \n \n \n \n \n \n \n
\n\n {/* The case: a moulded yellow housing with a rubber side panel\n over the spring drum, a steel belt clip behind it, and the\n thumb lock above the mouth. */}\n \n \n \n {/* Grip ridges moulded into the rubber. */}\n \n \n \n \n
\n {/* The mouth the blade feeds out of. */}\n \n \n {/* The slot, and the lock riding in it. Down is locked: the\n brake presses on the blade right above the mouth. */}\n \n \n \n \n \n \n \n \n \n \n \n\n

\n Pull the tab to measure. Release the lock to reel it back in.\n

\n \n );\n}\n\n// Thousands of ticks that never change, so they render once.\nconst Blade = memo(function Blade({ max }: { max: number }) {\n const width = max * SCALE + 1;\n const ticks: React.ReactNode[] = [];\n for (let half = 0; half <= max * 2; half++) {\n const cm = half / 2;\n // Numbers grow away from the hook, so the scale runs right to left.\n const x = (max - cm) * SCALE + 0.5;\n const h = cm % 10 === 0 ? 13 : cm % 5 === 0 ? 10 : Number.isInteger(cm) ? 7 : 4;\n ticks.push();\n }\n const labels: React.ReactNode[] = [];\n for (let cm = 10; cm <= max; cm += 10) {\n labels.push(\n \n {cm}\n ,\n );\n }\n return (\n \n \n {/* The blade is cupped: its top edge falls into shadow, its bottom\n edge catches the light. */}\n \n \n {ticks}\n {labels}\n \n );\n});\n\nexport default function TapeMeasureDemo() {\n const [value, setValue] = useState(28);\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"}],"categories":["objects"],"docs":"From ui lab: https://lab.xevrion.dev/lab/tape-measure"}