{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"rubber-stamp","type":"registry:component","title":"Rubber stamp","description":"Stamps a document approved or rejected, with ink that looks pressed in.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/rubber-stamp.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport {\n AnimatePresence,\n animate,\n motion,\n useMotionValue,\n useTransform,\n type AnimationPlaybackControls,\n type MotionValue,\n type ValueAnimationTransition,\n} from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Verdict = \"approved\" | \"rejected\";\n\ntype Impression = {\n id: number;\n verdict: Verdict;\n rotate: number;\n seed: number;\n x: number;\n y: number;\n};\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n// The press accelerates into the paper like a hand pushing down, so the\n// moment of contact lands hard instead of drifting in.\nconst EASE_PRESS = [0.55, 0, 1, 0.45] as const;\n// Hand stamps never land square; +-6deg reads as human without looking drunk.\nconst MAX_TILT = 6;\n// Nor dead centre: a few px of drift per press.\nconst MAX_DRIFT = 4;\n// Where the stamp hovers before it comes down, and where it lifts back to.\nconst HOVER_Y = -36;\nconst LIFT_Y = -48;\n\n// Small deterministic PRNG, so one seed gives one tilt, drift and ink grain.\nfunction mulberry32(seed: number) {\n let a = seed;\n return () => {\n a = (a + 0x6d2b79f5) | 0;\n let t = Math.imul(a ^ (a >>> 15), 1 | a);\n t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\nfunction rollImpression(id: number, verdict: Verdict): Impression {\n const seed = Math.floor(Math.random() * 10_000);\n const rand = mulberry32(seed);\n return {\n id,\n verdict,\n seed,\n rotate: (rand() * 2 - 1) * MAX_TILT,\n x: (rand() * 2 - 1) * MAX_DRIFT,\n y: (rand() * 2 - 1) * MAX_DRIFT,\n };\n}\n\n// Stamp-pad ink is a physical material: the classic blue-violet office pad\n// for approvals, and the danger red (which is red ink anyway) for\n// rejections. The blue lifts in the dark theme to stay readable.\nconst INK: Record = {\n approved: \"light-dark(oklch(0.45 0.16 268), oklch(0.7 0.13 268))\",\n rejected: \"var(--destructive)\",\n};\n// The stamp's wooden handle and mount, and the brass ring between them.\nconst WOOD_LIGHT = \"oklch(0.74 0.085 68)\";\nconst WOOD = \"oklch(0.62 0.095 58)\";\nconst WOOD_DARK = \"oklch(0.5 0.09 50)\";\nconst BRASS = \"oklch(0.8 0.11 85)\";\n\nconst LABEL: Record = {\n approved: \"Approved\",\n rejected: \"Rejected\",\n};\n\nexport function RubberStamp({\n children,\n title,\n onChange,\n className,\n}: {\n children: React.ReactNode;\n // Names the document for screen readers, e.g. \"Expense request EXP-2041\".\n title: string;\n onChange?: (value: Verdict | null) => void;\n className?: string;\n}) {\n const reduceMotion = useReducedMotion();\n const [impression, setImpression] = useState(null);\n const [ink, setInk] = useState(\"approved\");\n const presses = useRef(0);\n const run = useRef(0);\n const running = useRef([]);\n\n const toolY = useMotionValue(LIFT_Y);\n const toolOpacity = useMotionValue(0);\n const toolRotate = useMotionValue(0);\n const squashX = useMotionValue(1);\n const squashY = useMotionValue(1);\n const pageY = useMotionValue(0);\n // 0 when the stamp is at its highest, 1 on the paper.\n const near = useTransform(\n () => toolOpacity.get() * (1 - Math.min(1, -toolY.get() / -LIFT_Y)),\n );\n const shadowOpacity = useTransform(near, (n) => n * 0.28);\n const shadowScale = useTransform(near, (n) => 1.15 - n * 0.15);\n\n useEffect(() => {\n const list = running.current;\n return () => list.forEach((c) => c.stop());\n }, []);\n\n const verdict = impression?.verdict ?? null;\n\n const go = (\n mv: MotionValue,\n to: number | number[],\n transition: ValueAnimationTransition,\n ) => {\n const c = animate(mv, to, transition);\n running.current.push(c);\n return c;\n };\n\n const stopAll = () => {\n running.current.forEach((c) => c.stop());\n running.current.length = 0;\n };\n\n // The whole press runs about 0.6s. It is a staged physical sequence (lift,\n // press, squash, lift) where no single move is over 200ms, and pressing\n // again at any point restarts it from wherever the stamp is.\n const stamp = async (next: Verdict) => {\n const id = ++run.current;\n stopAll();\n const mark = rollImpression(++presses.current, next);\n\n if (reduceMotion) {\n toolOpacity.jump(0);\n setImpression(mark);\n onChange?.(next);\n return;\n }\n\n setInk(next);\n toolRotate.jump(mark.rotate);\n squashX.jump(1);\n squashY.jump(1);\n // A press mid-lift carries on from wherever the stamp is.\n if (toolOpacity.get() === 0) toolY.jump(LIFT_Y);\n\n // Lifted over the page.\n await Promise.all([\n go(toolY, HOVER_Y, { duration: 0.14, ease: EASE_OUT }),\n go(toolOpacity, 1, { duration: 0.1, ease: EASE_OUT }),\n ]);\n if (id !== run.current) return;\n\n // Down.\n await go(toolY, 0, { duration: 0.09, ease: EASE_PRESS });\n if (id !== run.current) return;\n\n // Contact: the ink lands, the rubber squashes a touch and the page gives\n // by 1.5px. Kept within 0.95 to 1.03 so it reads as weight, not cartoon.\n setImpression(mark);\n onChange?.(next);\n navigator.vibrate?.(8);\n go(squashY, [1, 0.95, 1], { duration: 0.16, ease: EASE_OUT });\n go(squashX, [1, 1.03, 1], { duration: 0.16, ease: EASE_OUT });\n go(pageY, [0, 1.5, 0], { duration: 0.18, ease: EASE_OUT });\n\n // Held a beat on the paper, then lifted away. The fade trails the lift\n // so you see it leave rather than vanish in place.\n go(toolY, LIFT_Y, { duration: 0.2, delay: 0.08, ease: EASE_OUT });\n go(toolOpacity, 0, { duration: 0.16, delay: 0.14, ease: EASE_OUT });\n };\n\n const undo = () => {\n if (!impression) return;\n run.current++;\n stopAll();\n go(toolOpacity, 0, { duration: 0.12, ease: EASE_OUT });\n setImpression(null);\n onChange?.(null);\n };\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n if (e.repeat || e.metaKey || e.ctrlKey || e.altKey) return;\n const key = e.key.toLowerCase();\n if (key === \"a\") stamp(\"approved\");\n else if (key === \"r\") stamp(\"rejected\");\n else if (key === \"u\") undo();\n else return;\n e.preventDefault();\n };\n\n return (\n \n \n {children}\n\n \n {/* The box a form leaves for the stamp. It stays under the ink,\n the way a printed box does on paper. */}\n
\n {/* Fades under a fresh impression so the two words never\n compete; the box itself stays, like print on paper. */}\n \n Office use\n \n
\n\n \n {impression && (\n \n )}\n \n\n {/* The stamp's shadow on the page, tightening and darkening as it\n comes down: the cue that says \"this is about to land\". */}\n \n\n \n \n \n \n \n\n
\n stamp(\"approved\")}\n active={verdict === \"approved\"}\n >\n Approve\n \n stamp(\"rejected\")}\n active={verdict === \"rejected\"}\n >\n Reject\n \n \n Undo\n \n
\n\n \n {verdict ? `${title} ${LABEL[verdict].toLowerCase()}` : \"\"}\n \n \n );\n}\n\nfunction Ink({ mark, reduce }: { mark: Impression; reduce: boolean }) {\n const filter = `ink-${useId().replace(/[^a-zA-Z0-9-]/g, \"\")}`;\n return (\n \n \n \n {/* Fine grain: speckled dropouts where the rubber missed. */}\n \n \n {/* Broad pressure: one side of a hand stamp always inks heavier. */}\n \n \n \n \n {/* Rough edges: rubber and paper fibre wobble the outline. */}\n \n \n \n \n \n \n \n \n {LABEL[mark.verdict].toUpperCase()}\n \n \n \n );\n}\n\n// A front view of a desk stamp: a turned wooden knob and neck, a brass\n// ferrule, the wooden mount with its index label, the foam cushion and the\n// inked rubber die.\nfunction StampTool({ ink }: { ink: Verdict }) {\n const id = useId().replace(/[^a-zA-Z0-9-]/g, \"\");\n return (\n \n \n {/* Light from the top left, as on the rest of the page. */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {/* Knob and neck. */}\n \n \n \n {/* Brass ferrule. */}\n \n \n {/* The mount, with a little end grain and a lighter top edge. */}\n \n \n \n {/* The index label, printed with what the die says. */}\n \n \n {LABEL[ink].toUpperCase()}\n \n {/* Foam cushion and the rubber die, wet with ink. */}\n \n \n \n \n );\n}\n\nfunction StampButton({\n shortcut,\n active,\n disabled,\n onClick,\n children,\n}: {\n shortcut: string;\n active?: boolean;\n disabled?: boolean;\n onClick: () => void;\n children: React.ReactNode;\n}) {\n return (\n \n {children}\n {/* A 20px chip 10px in from the pill's edge: 10 + 10 = 20 radius, so\n a 5px corner keeps it reading as a key rather than a pill. */}\n \n {shortcut}\n \n \n );\n}\n\nconst ITEMS = [\n { label: \"Flights, BOM to GOI\", amount: \"$486.00\" },\n { label: \"Hotel, 2 nights\", amount: \"$412.00\" },\n { label: \"Team dinner\", amount: \"$96.40\" },\n];\n\nexport default function RubberStampDemo() {\n const [verdict, setVerdict] = useState(null);\n return (\n \n
\n
\n

EXP-2041

\n

\n Design offsite, Goa\n

\n

Priya Shah, Product design

\n
\n \n {verdict ? LABEL[verdict] : \"Pending\"}\n \n
\n
\n {ITEMS.map((item) => (\n
\n
{item.label}
\n
{item.amount}
\n
\n ))}\n
\n {/* The bottom padding is the stamp's landing zone, so the impression\n overlaps the total the way a real one would without hiding it. */}\n
\n Total\n \n $994.40\n \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":["objects"],"docs":"From ui lab: https://lab.xevrion.dev/lab/rubber-stamp"}