{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "stamp-card", "title": "Stamp Card", "description": "Collectible postage stamp with perforated edges, 3D tilt and glare, an inked postmark animation and a fanned StampSheet.", "dependencies": [ "motion" ], "registryDependencies": [ "utils", "https://trytweenly.vercel.app/r/use-reduced-motion.json" ], "files": [ { "path": "registry/new-york/stamp-card/stamp-card.tsx", "content": "\"use client\"\n\nimport { useEffect, useId, useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent } from \"react\"\nimport {\n AnimatePresence,\n motion,\n useAnimate,\n useMotionTemplate,\n useMotionValue,\n useSpring,\n useTransform,\n type Transition,\n} from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { useReducedMotion } from \"@/registry/new-york/hooks/use-reduced-motion\"\n\nexport type StampCardVariant = \"classic\" | \"airmail\" | \"minimal\"\n\nexport interface StampCardProps {\n /** Image URL for the artwork. Missing or broken images fall back to a duotone illustration. */\n image?: string\n /** Title printed under the artwork. Default: \"\" */\n title?: string\n /** Denomination shown in the top-right corner, e.g. \"₹25\" or \"50c\". Default: \"₹25\" */\n value?: string\n /** Country or brand printed in the footer and around the postmark. Default: \"India\" */\n country?: string\n /** Small caption next to the country. Default: \"\" */\n caption?: string\n /** Visual style. Default: \"classic\" */\n variant?: StampCardVariant\n /** Paper color (any CSS color). Defaults to a cream, off-white or accent tint depending on the variant. */\n paper?: string\n /** Postmark ink color (any CSS color). Default: \"#0a0a0a\" */\n ink?: string\n /** Accent color for frames, text and the fallback artwork (any CSS color). Default: \"#ff4d12\" */\n accent?: string\n /** Perforation hole diameter in px. Default: 8 */\n perforation?: number\n /** Stamp width in px. The height follows at roughly 5:6, snapped to the perforation grid. Default: 180 */\n size?: number\n /** Controlled postmark state. */\n postmarked?: boolean\n /** Initial postmark state when uncontrolled. Default: false */\n defaultPostmarked?: boolean\n /** Called with the new state when the stamp is clicked. */\n onPostmark?: (postmarked: boolean) => void\n /** Toggle the postmark on click / Enter. Default: true */\n clickToPostmark?: boolean\n /** Text in the middle of the postmark. Default: \"PAID\" */\n postmarkLabel?: string\n /** Maximum 3D tilt in degrees on hover. 0 disables. Default: 12 */\n tilt?: number\n /** Show a light glare that follows the pointer. Default: true */\n glare?: boolean\n /** Resting rotation in degrees. Default: 0 */\n rotate?: number\n className?: string\n}\n\nconst EASE_OUT = [0.22, 1, 0.36, 1] as const\nconst EASE_IN_OUT = [0.76, 0, 0.24, 1] as const\nconst SPRING = { stiffness: 420, damping: 32 }\n\nconst NOISE = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")`\n\nconst PAPER: Record = {\n classic: \"#f3ead6\",\n airmail: \"#fbf9f4\",\n minimal: \"\",\n}\n\nconst hash = (s: string) => {\n let h = 7\n for (const c of s) h = (h * 31 + c.charCodeAt(0)) | 0\n return Math.abs(h)\n}\n\n/** Snaps the stamp to a whole number of perforation steps so every edge ends on a hole. */\nexport function stampDims(size: number, perforation: number) {\n const hole = Math.max(perforation, 2)\n const step = hole * 1.75\n const cols = Math.max(6, Math.round(size / step))\n const width = cols * step\n const rows = Math.max(7, Math.round((width * 1.2) / step))\n return { width, height: rows * step, hole, step }\n}\n\nfunction perforationMask(width: number, height: number, hole: number, step: number) {\n const r = hole / 2\n // Alpha mask that punches the perforated edge, not a color gradient\n return `radial-gradient(circle at center, transparent ${r}px, #000 ${r + 0.5}px) ${-step / 2}px ${-step / 2}px / ${step}px ${step}px repeat, linear-gradient(#000 0 0) center / ${width - hole}px ${height - hole}px no-repeat`\n}\n\nfunction Artwork({ accent, paper, seed }: { accent: string; paper: string; seed: number }) {\n const uid = useId().replace(/[^a-zA-Z0-9]/g, \"\")\n const deep = `color-mix(in oklab, ${accent} 62%, #000)`\n const light = `color-mix(in oklab, ${accent} 22%, ${paper})`\n const motif = seed % 3\n const sunX = 30 + (seed % 40)\n\n return (\n \n \n \n \n \n \n \n {motif === 0 && (\n <>\n \n \n \n \n \n )}\n {motif === 1 && (\n <>\n {[40, 31, 22, 13].map((r, i) => (\n \n ))}\n \n \n \n )}\n {motif === 2 && (\n <>\n \n \n \n \n \n \n )}\n \n )\n}\n\nfunction Art({ image, alt, accent, paper, seed, duotone }: { image?: string; alt: string; accent: string; paper: string; seed: number; duotone: boolean }) {\n const [state, setState] = useState<\"loading\" | \"loaded\" | \"error\">(\"loading\")\n const loaded = state === \"loaded\"\n return (\n <>\n \n {image && state !== \"error\" && (\n {\n if (el?.complete) setState(el.naturalWidth > 0 ? \"loaded\" : \"error\")\n }}\n onLoad={() => setState(\"loaded\")}\n onError={() => setState(\"error\")}\n className=\"absolute inset-0 size-full select-none object-cover transition-opacity duration-500\"\n style={{ opacity: loaded ? 1 : 0, filter: duotone ? \"grayscale(1) contrast(1.15)\" : \"saturate(0.9) contrast(1.05)\" }}\n />\n )}\n {image && loaded && duotone && (\n <>\n \n \n \n )}\n \n )\n}\n\nfunction Postmark({ ink, text, label }: { ink: string; text: string; label: string }) {\n const uid = useId().replace(/[^a-zA-Z0-9]/g, \"\")\n const ring = `${text} • ${text} • `.toUpperCase()\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {ring}\n \n \n \n {label}\n \n {[34, 47, 60, 73, 86].map((y) => (\n \n ))}\n \n \n )\n}\n\nexport function StampCard({\n image,\n title = \"\",\n value = \"₹25\",\n country = \"India\",\n caption = \"\",\n variant = \"classic\",\n paper: paperProp,\n ink = \"#0a0a0a\",\n accent = \"#ff4d12\",\n perforation = 8,\n size = 180,\n postmarked: postmarkedProp,\n defaultPostmarked = false,\n onPostmark,\n clickToPostmark = true,\n postmarkLabel = \"PAID\",\n tilt = 12,\n glare = true,\n rotate = 0,\n className,\n}: StampCardProps) {\n const reduced = useReducedMotion()\n const [inner, setInner] = useState(defaultPostmarked)\n const postmarked = postmarkedProp ?? inner\n\n const paper = paperProp || PAPER[variant] || `color-mix(in oklab, ${accent} 14%, #fff)`\n const { width, height, hole, step } = stampDims(size, perforation)\n const mask = perforationMask(width, height, hole, step)\n const seed = hash(`${title}${country}${value}`)\n const inset = hole / 2 + (variant === \"airmail\" ? 10 : 6)\n const textColor = variant === \"minimal\" ? `color-mix(in oklab, ${accent} 72%, #000)` : `color-mix(in oklab, ${accent} 28%, #1c1917)`\n\n // Pointer tilt\n const tiltRef = useRef(null)\n const px = useMotionValue(0.5)\n const py = useMotionValue(0.5)\n const hover = useMotionValue(0)\n const active = tilt > 0 && !reduced\n const rotateX = useSpring(useTransform(py, [0, 1], [tilt, -tilt]), SPRING)\n const rotateY = useSpring(useTransform(px, [0, 1], [-tilt, tilt]), SPRING)\n const lift = useSpring(hover, SPRING)\n const y = useTransform(lift, [0, 1], [0, -6])\n const shadowY = useTransform(lift, [0, 1], [3, 16])\n const shadowBlur = useTransform(lift, [0, 1], [5, 22])\n const shadowAlpha = useTransform(lift, [0, 1], [0.18, 0.28])\n const shadow = useMotionTemplate`drop-shadow(0 ${shadowY}px ${shadowBlur}px rgba(0,0,0,${shadowAlpha}))`\n // Solid sheen band (a third of the width) that tracks the pointer horizontally\n const glareX = useTransform(px, (v) => `${v * 333 - 50}%`)\n\n const onPointerMove = (e: PointerEvent) => {\n if (reduced || !tiltRef.current) return\n const rect = tiltRef.current.getBoundingClientRect()\n px.set((e.clientX - rect.left) / rect.width)\n py.set((e.clientY - rect.top) / rect.height)\n hover.set(1)\n }\n\n const reset = () => {\n px.set(0.5)\n py.set(0.5)\n hover.set(0)\n }\n\n // Press the paper down when the postmark lands\n const [scope, animateScope] = useAnimate()\n const prevRef = useRef(postmarked)\n useEffect(() => {\n if (postmarked && !prevRef.current && !reduced && scope.current) {\n animateScope(scope.current, { scale: [1, 0.955, 1.01, 1] }, { duration: 0.45, ease: EASE_IN_OUT, times: [0, 0.3, 0.7, 1] })\n }\n prevRef.current = postmarked\n }, [postmarked, reduced, animateScope, scope])\n\n const toggle = () => {\n if (!clickToPostmark) return\n const next = !postmarked\n if (postmarkedProp === undefined) setInner(next)\n onPostmark?.(next)\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n toggle()\n }\n }\n\n const stampT: Transition = reduced\n ? { duration: 0 }\n : {\n default: { duration: 0.34, ease: EASE_OUT },\n opacity: { duration: 0.9, times: [0, 0.3, 1], ease: \"easeOut\" },\n }\n\n const panel: CSSProperties =\n variant === \"classic\"\n ? { border: `1px solid color-mix(in oklab, ${accent} 45%, ${paper})`, padding: 5 }\n : variant === \"airmail\"\n ? { backgroundColor: paper, padding: 6, boxShadow: `inset 0 0 0 1px color-mix(in oklab, #1c1917 12%, transparent)` }\n : { padding: 0 }\n\n const paperBg =\n variant === \"airmail\"\n ? // Hard-edged airmail stripes (a pattern, no color blending)\n `repeating-linear-gradient(-45deg, #d7263d 0 9px, transparent 9px 14px, #1f4fbf 14px 23px, transparent 23px 28px), ${paper}`\n : paper\n\n return (\n
\n \n
\n \n \n
\n\n
\n
\n \n \n {value}\n \n
\n
\n {title &&

{title}

}\n
\n {country}\n {caption && {caption}}\n
\n
\n
\n\n {glare && !reduced && (\n \n \n \n )}\n
\n \n
\n\n \n {postmarked && (\n \n \n \n )}\n \n \n
\n )\n}\n\nexport interface StampSheetProps {\n /** Stamps in the fan, left to right. Each accepts every StampCard prop. */\n stamps: StampCardProps[]\n /** Stamp width in px, applied unless a stamp sets its own `size`. Default: 150 */\n size?: number\n /** Distance between stamp centers when spread on hover, px. Default: size * 0.8 */\n spread?: number\n /** Rotation between neighbouring stamps at rest, degrees. Default: 7 */\n fan?: number\n className?: string\n}\n\n/** A fanned stack of stamps that spreads out on hover. */\nexport function StampSheet({ stamps, size = 150, spread, fan = 7, className }: StampSheetProps) {\n const reduced = useReducedMotion()\n const [open, setOpen] = useState(false)\n const gap = spread ?? size * 0.8\n const { width, height } = stampDims(size, 8)\n const center = (stamps.length - 1) / 2\n const transition: Transition = reduced ? { duration: 0 } : { type: \"spring\", stiffness: 420, damping: 34 }\n\n return (\n setOpen(true)}\n onPointerLeave={() => setOpen(false)}\n onFocus={() => setOpen(true)}\n onBlur={() => setOpen(false)}\n >\n {stamps.map((stamp, i) => {\n const o = i - center\n return (\n \n \n \n )\n })}\n \n )\n}\n", "type": "registry:component" } ], "docs": "Docs, live playground and every prop: https://trytweenly.vercel.app/docs/components/stamp-card", "type": "registry:component" }