{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"zipper-reveal","type":"registry:component","title":"Zipper reveal","description":"Unzip the pouch to reveal the code inside.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/zipper-reveal.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport {\n animate,\n useMotionValue,\n useMotionValueEvent,\n useSpring,\n useTransform,\n motion,\n type AnimationPlaybackControls,\n} from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\n// Everything is drawn in a 360 x 280 viewBox that scales with the card.\nconst W = 360;\nconst H = 280;\nconst CX = W / 2;\n// The slider's travel. Closed it parks just under the top edge; fully open\n// it stops where its 42 tall tab still clears the bottom edge.\nconst P_MIN = 26;\nconst P_MAX = H - 44;\n// Teeth part at the top of the slider, 10 above its pivot.\nconst SLIDER_TOP = 10;\n// Half the widest gap, and how far above the slider the gap takes to open\n// fully. A longer run gives the soft V a real zipper makes.\nconst MAX_HALF = 110;\nconst OPEN_RUN = 130;\n// The first 48 of travel only loosens the top, so a tiny pull doesn't\n// flare the whole pouch open.\nconst RAMP = 48;\nconst TOOTH_PITCH = 7;\n// The zip ends at the bottom stop, just under the fully open slider.\nconst ZIP_END = P_MAX + 8;\nconst TOOTH_COUNT = Math.floor((ZIP_END - 3) / TOOTH_PITCH);\nconst TAPE = 7;\nconst STEP = 0.1;\n// Copying only makes sense once the button is fully in the gap.\nconst REVEAL_AT = 0.9;\nconst SETTLE = { type: \"spring\", stiffness: 500, damping: 50 } as const;\n\n// Physical materials, the same in both themes the way a real pouch is:\n// indigo canvas, a darker lining, brass hardware, cream thread, a\n// leather pull and a paper voucher with near-black ink.\nconst FABRIC = \"oklch(0.43 0.075 258)\";\nconst LINING = \"oklch(0.24 0.04 258)\";\nconst TAPE_FILL = \"oklch(0.27 0.045 258)\";\nconst THREAD = \"oklch(0.9 0.045 85)\";\nconst BRASS_LIGHT = \"oklch(0.9 0.09 92)\";\nconst BRASS_DARK = \"oklch(0.62 0.1 72)\";\nconst LEATHER = \"oklch(0.36 0.06 48)\";\nconst CARD = \"oklch(0.975 0.012 90)\";\nconst CARD_INK = \"oklch(0.24 0.01 260)\";\n\nconst clamp = (v: number, min: number, max: number) =>\n Math.min(Math.max(v, min), max);\n\n// Half-width of the gap at height y with the slider at p, and its slope.\nfunction gap(y: number, p: number) {\n const d = p - SLIDER_TOP - y;\n if (d <= 0) return { h: 0, slope: 0 };\n const r = clamp((p - P_MIN) / RAMP, 0, 1);\n const t = Math.min(d / OPEN_RUN, 1);\n return {\n h: MAX_HALF * r * (1 - (1 - t) ** 2),\n slope: t < 1 ? (MAX_HALF * r * 2 * (1 - t)) / OPEN_RUN : 0,\n };\n}\n\nfunction edge(p: number) {\n const points: [number, number][] = [];\n const end = p - SLIDER_TOP;\n for (let y = 0; y < end; y += 6) points.push([gap(y, p).h, y]);\n points.push([0, end]);\n return points;\n}\n\nfunction flapPath(p: number, side: 1 | -1) {\n const outer = side === -1 ? 0 : W;\n const pts = edge(p)\n .map(([h, y]) => `L${CX + side * h} ${y}`)\n .join(\"\");\n return `M${outer} 0${pts}L${CX} ${H}L${outer} ${H}Z`;\n}\n\nfunction tapePath(p: number, side: 1 | -1) {\n const pts = edge(p);\n const inner = pts.map(([h, y]) => `${CX + side * h} ${y}`);\n const outer = pts.map(([h, y]) => `${CX + side * (h + TAPE)} ${y}`).reverse();\n return `M${inner.join(\"L\")}L${CX} ${ZIP_END}L${CX + side * TAPE} ${ZIP_END}L${outer.join(\"L\")}Z`;\n}\n\n// Each tooth stays square to its tape, so as the tape leans away from the\n// seam the teeth tilt apart with it.\nfunction toothTransform(i: number, side: 1 | -1, p: number) {\n const y = 3 + i * TOOTH_PITCH + (side === 1 ? TOOTH_PITCH / 2 : 0);\n const { h, slope } = gap(y, p);\n const angle = (Math.atan(slope) * 180) / Math.PI;\n return `translate(${CX + side * h} ${y}) rotate(${side * angle})`;\n}\n\nfunction openness(p: number) {\n return (p - P_MIN) / (P_MAX - P_MIN);\n}\n\nfunction describe(p: number) {\n const pct = Math.round(openness(p) * 100);\n return pct === 0 ? \"Zipped\" : pct === 100 ? \"Open\" : `Open ${pct}%`;\n}\n\nexport function ZipperReveal({\n label = \"Voucher\",\n secret = \"LAB-7Q2X\",\n note = \"20% off\",\n className,\n}: {\n label?: string;\n secret?: string;\n note?: string;\n className?: string;\n}) {\n const reduceMotion = useReducedMotion();\n // SVG ids must be plain: React's ids carry colons or guillemets.\n const uid = `zip${useId().replace(/[^a-zA-Z0-9]/g, \"\")}`;\n const p = useMotionValue(P_MIN);\n const [revealed, setRevealed] = useState(false);\n const [copied, setCopied] = useState(false);\n const copyTimer = useRef>(undefined);\n const glide = useRef(undefined);\n const boxRef = useRef(null);\n const handleRef = useRef(null);\n const columnRef = useRef(null);\n const readoutRef = useRef(null);\n const flapL = useRef(null);\n const flapR = useRef(null);\n const tapeL = useRef(null);\n const tapeR = useRef(null);\n const teeth = useRef<(SVGRectElement | null)[]>([]);\n const slider = useRef(null);\n const tab = useRef(null);\n const drag = useRef<{\n id: number;\n startY: number;\n startP: number;\n lastY: number;\n lastT: number;\n v: number;\n } | null>(null);\n\n // The tab points at your finger while you pull, then swings back to\n // hanging straight: a spring with a little bounce, like a pendulum.\n const lean = useMotionValue(0);\n const swing = useSpring(lean, { stiffness: 260, damping: 12 });\n useMotionValueEvent(swing, \"change\", (a) =>\n tab.current?.setAttribute(\"transform\", `rotate(${a})`),\n );\n\n // The content comes into focus as the gap opens: sharp by 60%.\n const blur = useTransform(p, (v) => {\n const b = 4 * clamp(1 - openness(v) / 0.6, 0, 1);\n return b > 0.01 ? `blur(${b}px)` : \"none\";\n });\n\n useEffect(\n () => () => {\n clearTimeout(copyTimer.current);\n glide.current?.stop();\n },\n [],\n );\n\n useMotionValueEvent(p, \"change\", (v) => {\n flapL.current?.setAttribute(\"d\", flapPath(v, -1));\n flapR.current?.setAttribute(\"d\", flapPath(v, 1));\n tapeL.current?.setAttribute(\"d\", tapePath(v, -1));\n tapeR.current?.setAttribute(\"d\", tapePath(v, 1));\n for (let i = 0; i < TOOTH_COUNT; i++) {\n teeth.current[i * 2]?.setAttribute(\"transform\", toothTransform(i, -1, v));\n teeth.current[i * 2 + 1]?.setAttribute(\n \"transform\",\n toothTransform(i, 1, v),\n );\n }\n slider.current?.setAttribute(\"transform\", `translate(${CX} ${v})`);\n const text = describe(v);\n if (readoutRef.current) readoutRef.current.textContent = text;\n if (columnRef.current)\n columnRef.current.style.transform = `translateY(${(v / H) * 100}%)`;\n const handle = handleRef.current;\n if (handle) {\n handle.setAttribute(\n \"aria-valuenow\",\n String(Math.round(openness(v) * 100)),\n );\n handle.setAttribute(\"aria-valuetext\", text);\n }\n const open = openness(v) >= REVEAL_AT;\n if (open !== revealed) setRevealed(open);\n });\n\n const moveTo = (target: number) => {\n glide.current?.stop();\n const to = clamp(target, P_MIN, P_MAX);\n if (reduceMotion) p.set(to);\n else glide.current = animate(p, to, SETTLE);\n };\n\n const scale = () => W / (boxRef.current?.offsetWidth || W);\n\n const copy = async () => {\n try {\n await navigator.clipboard?.writeText(secret);\n setCopied(true);\n clearTimeout(copyTimer.current);\n copyTimer.current = setTimeout(() => setCopied(false), 1600);\n } catch {\n // Nothing to undo: the code stays on screen to copy by hand.\n }\n };\n\n return (\n
\n \n {/* Underneath: the lining, shadowed under the flaps, with a\n voucher tucked into the pouch. */}\n \n \n
\n \n {label}\n \n {note}\n
\n
\n {secret}\n
\n {/* Perforation, with the two notches a ticket punch leaves. */}\n
\n \n \n
\n \n \n \n Copy code\n \n \n Copied\n \n \n \n
\n \n\n \n \n {/* A plain canvas weave: faint light warp, faint dark weft. */}\n \n \n \n \n \n \n \n \n \n \n \n {/* The flaps, shading the lining where they lift off it. */}\n \n \n \n \n \n \n {/* Light falls from above: a soft sheen across the top. */}\n \n {/* Stitching around the three closed sides, in cream thread. */}\n \n {/* A woven maker's label sewn into the seam. */}\n \n \n \n UI LAB\n \n \n \n \n {Array.from({ length: TOOTH_COUNT }, (_, i) =>\n ([-1, 1] as const).map((side) => (\n {\n teeth.current[i * 2 + (side === 1 ? 1 : 0)] = el;\n }}\n // Each tooth reaches 1.5 past the seam, into the gap\n // between two teeth on the other side: that overlap is\n // what locks a zip.\n x={side === -1 ? -6.5 : -1.5}\n y={-2}\n width={8}\n height={4}\n rx={1.2}\n transform={toothTransform(i, side, P_MIN)}\n fill={`url(#${uid}b)`}\n />\n )),\n )}\n {/* The zip ends here. */}\n \n\n \n \n {/* A leather pull, riveted to the slider's bail. */}\n \n \n \n \n \n \n \n \n\n {/* A full-height column, so translating it by a percentage of its\n own height moves the handle in the card's units without\n measuring anything. */}\n \n {/* The hit target and keyboard handle, over the slider and tab. */}\n {\n if (e.button !== 0 || drag.current) return;\n glide.current?.stop();\n drag.current = {\n id: e.pointerId,\n startY: e.clientY,\n startP: p.get(),\n lastY: e.clientY,\n lastT: e.timeStamp,\n v: 0,\n };\n e.currentTarget.setPointerCapture(e.pointerId);\n }}\n onPointerMove={(e) => {\n const d = drag.current;\n if (!d || d.id !== e.pointerId) return;\n const k = scale();\n const dt = Math.max(e.timeStamp - d.lastT, 1) / 1000;\n // Smoothed, so one uneven sample can't decide the glide.\n d.v = d.v * 0.5 + (((e.clientY - d.lastY) * k) / dt) * 0.5;\n d.lastY = e.clientY;\n d.lastT = e.timeStamp;\n // The zip's end stops are hard, like the metal ones.\n p.set(clamp(d.startP + (e.clientY - d.startY) * k, P_MIN, P_MAX));\n if (reduceMotion) return;\n const box = boxRef.current!.getBoundingClientRect();\n const px = (e.clientX - box.left) * k - CX;\n const py = (e.clientY - box.top) * k - p.get();\n lean.set(\n clamp(\n (-Math.atan2(px, Math.max(py, 20)) * 180) / Math.PI,\n -35,\n 35,\n ),\n );\n }}\n onPointerUp={(e) => {\n const d = drag.current;\n if (!d || d.id !== e.pointerId) return;\n drag.current = null;\n lean.set(0);\n if (reduceMotion) return;\n // A zip has friction: a flick carries it on only a little,\n // and near either end it runs home.\n let target = clamp(p.get() + d.v * 0.06, P_MIN, P_MAX);\n if (target < P_MIN + 12) target = P_MIN;\n if (target > P_MAX - 12) target = P_MAX;\n glide.current = animate(p, target, { ...SETTLE, velocity: d.v });\n }}\n onPointerCancel={(e) => {\n if (drag.current?.id !== e.pointerId) return;\n drag.current = null;\n lean.set(0);\n }}\n onKeyDown={(e) => {\n const range = P_MAX - P_MIN;\n const current = p.get();\n const target = {\n ArrowDown: current + range * STEP,\n ArrowRight: current + range * STEP,\n ArrowUp: current - range * STEP,\n ArrowLeft: current - range * STEP,\n PageDown: current + range * STEP * 2.5,\n PageUp: current - range * STEP * 2.5,\n Home: P_MIN,\n End: P_MAX,\n }[e.key];\n if (target === undefined) return;\n e.preventDefault();\n moveTo(target);\n }}\n />\n \n \n\n
\n \n Zipped\n \n Drag the pull down\n
\n \n );\n}\n\nexport default function ZipperRevealDemo() {\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"}],"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/zipper-reveal"}