{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scratch-card-popup", "title": "Scratch Card Popup", "description": "A gamified scratch-to-win popup, drag to scratch a gold-foil canvas off a 3x3 icon grid, match three to win a reward tier with a confetti burst, copy the code, and track attempts left. Inline or corner-widget popup with manual, delay or scroll triggers.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/new-york/scratch-card-popup/scratch-card-popup.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nfunction cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ninterface Prize {\n title: string;\n description: string;\n code: string;\n}\n\ninterface ScratchTheme {\n name: string;\n title: string;\n subtitle: string;\n triggerText: string;\n primary: string;\n accent: string;\n prizes: Prize[];\n}\n\nconst THEMES: Record = {\n ecommerce: {\n name: \"E-Commerce\",\n title: \"Unlock Your Reward\",\n subtitle: \"Scratch the foil and match three identical items\",\n triggerText: \"Scratch & Win\",\n primary: \"linear-gradient(160deg, #dbeafe 0%, #bfdbfe 100%)\",\n accent: \"#0f172a\",\n prizes: [\n { title: \"Congratulations\", description: \"You unlocked 50% off\", code: \"GOLD50\" },\n { title: \"Nice!\", description: \"Free shipping unlocked\", code: \"SHIPFREE\" },\n { title: \"Lucky you\", description: \"Mystery gift added\", code: \"GIFT25\" },\n ],\n },\n campaign: {\n name: \"Campaign / Sale\",\n title: \"Scratch Before It's Gone\",\n subtitle: \"Limited-time drop, scratch now\",\n triggerText: \"Scratch for a Deal\",\n primary: \"linear-gradient(160deg, #fff1f0 0%, #fecdd3 100%)\",\n accent: \"#dc2626\",\n prizes: [\n { title: \"You got it!\", description: \"20% off your order\", code: \"SALE20\" },\n { title: \"Boom!\", description: \"30% off your order\", code: \"SALE30\" },\n { title: \"Jackpot\", description: \"40% off your order\", code: \"SALE40\" },\n ],\n },\n restaurant: {\n name: \"Restaurant / Cafe\",\n title: \"Today's Lucky Scratch\",\n subtitle: \"Scratch, reveal, treat yourself\",\n triggerText: \"Scratch for a Treat\",\n primary: \"linear-gradient(160deg, #fff7ed 0%, #fde8cf 100%)\",\n accent: \"#b45309\",\n prizes: [\n { title: \"Cheers!\", description: \"Free coffee on us\", code: \"CAFE-COFFEE\" },\n { title: \"Sweet!\", description: \"Free dessert with any meal\", code: \"CAFE-DESSERT\" },\n { title: \"Treat unlocked\", description: \"15% off your bill\", code: \"CAFE15\" },\n ],\n },\n saas: {\n name: \"SaaS / Freemium\",\n title: \"Scratch for a Plan Discount\",\n subtitle: \"One scratch per new account\",\n triggerText: \"Scratch & Save\",\n primary: \"linear-gradient(160deg, #eef2ff 0%, #e0e7ff 100%)\",\n accent: \"#4f46e5\",\n prizes: [\n { title: \"Nice start\", description: \"10% off your first plan\", code: \"SAAS10\" },\n { title: \"Great pick\", description: \"1 month free\", code: \"SAAS-MONTH\" },\n { title: \"Top tier\", description: \"30% off your first plan\", code: \"SAAS30\" },\n ],\n },\n event: {\n name: \"Event / Tickets\",\n title: \"Scratch for an Early Bird Deal\",\n subtitle: \"Before you check out\",\n triggerText: \"Scratch for a Bonus\",\n primary: \"linear-gradient(160deg, #ecfeff 0%, #cffafe 100%)\",\n accent: \"#0891b2\",\n prizes: [\n { title: \"Nice!\", description: \"5% off your ticket\", code: \"EVT5\" },\n { title: \"Sweet\", description: \"Free drink ticket\", code: \"EVT-DRINK\" },\n { title: \"VIP\", description: \"VIP seating upgrade\", code: \"EVT-VIP\" },\n ],\n },\n};\n\nconst svgDataUri = (svg: string) => `data:image/svg+xml,${encodeURIComponent(svg)}`;\nconst ICON_CROWN = svgDataUri(``);\nconst ICON_DIAMOND = svgDataUri(``);\nconst ICON_GIFT = svgDataUri(``);\nconst ICON_STAR = svgDataUri(``);\nconst ICON_HEXAGON = svgDataUri(``);\nconst ICON_COIN = svgDataUri(`$`);\nconst ICON_HEART = svgDataUri(``);\n\nconst DEFAULT_IMAGES = [ICON_CROWN, ICON_CROWN, ICON_CROWN, ICON_DIAMOND, ICON_GIFT, ICON_STAR, ICON_HEXAGON, ICON_COIN, ICON_HEART];\n\nfunction shuffle(arr: T[]): T[] {\n const copy = [...arr];\n for (let i = copy.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [copy[i], copy[j]] = [copy[j], copy[i]];\n }\n return copy;\n}\n\nfunction GiftIcon() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction ScratchConfetti({ colors, onDone }: { colors: string[]; onDone: () => void }) {\n const canvasRef = React.useRef(null);\n const onDoneRef = React.useRef(onDone);\n onDoneRef.current = onDone;\n\n React.useEffect(() => {\n const canvas = canvasRef.current;\n const parent = canvas?.parentElement;\n if (!canvas || !parent) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const w = parent.clientWidth || 300;\n const h = parent.clientHeight || 300;\n canvas.width = w * dpr;\n canvas.height = h * dpr;\n canvas.style.width = w + \"px\";\n canvas.style.height = h + \"px\";\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n interface P {\n x: number;\n y: number;\n vx: number;\n vy: number;\n rot: number;\n vRot: number;\n size: number;\n color: string;\n alpha: number;\n }\n\n const count = w < 420 ? 60 : 100;\n const particles: P[] = Array.from({ length: count }, () => {\n const angle = Math.random() * Math.PI * 2;\n const speed = 3 + Math.random() * 7;\n return {\n x: w / 2,\n y: h * 0.32,\n vx: Math.cos(angle) * speed,\n vy: Math.sin(angle) * speed - 2,\n rot: Math.random() * Math.PI * 2,\n vRot: (Math.random() - 0.5) * 0.3,\n size: 5 + Math.random() * 7,\n color: colors[Math.floor(Math.random() * colors.length)],\n alpha: 1,\n };\n });\n\n const duration = 2200;\n const start = performance.now();\n let rafId: number;\n\n const animate = (t: number) => {\n const elapsed = t - start;\n const cw = parent.clientWidth || w;\n const ch = parent.clientHeight || h;\n ctx.clearRect(0, 0, cw, ch);\n\n let anyAlive = false;\n for (const p of particles) {\n p.vy += 0.14;\n p.x += p.vx;\n p.y += p.vy;\n p.rot += p.vRot;\n if (elapsed > duration * 0.55) p.alpha -= 0.025;\n if (p.alpha > 0.01 && p.y < ch + 40) {\n anyAlive = true;\n ctx.save();\n ctx.globalAlpha = Math.max(0, p.alpha);\n ctx.fillStyle = p.color;\n ctx.translate(p.x, p.y);\n ctx.rotate(p.rot);\n ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);\n ctx.restore();\n }\n }\n\n if (elapsed < duration && anyAlive) rafId = requestAnimationFrame(animate);\n else onDoneRef.current();\n };\n\n rafId = requestAnimationFrame(animate);\n return () => cancelAnimationFrame(rafId);\n }, [colors]);\n\n return ;\n}\n\nconst BRUSH_SIZE = 60;\n\nfunction drawFoil(canvas: HTMLCanvasElement, size: number) {\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n canvas.width = size;\n canvas.height = size;\n\n const gradient = ctx.createLinearGradient(0, 0, size, size);\n gradient.addColorStop(0, \"#6b4409\");\n gradient.addColorStop(0.18, \"#a9761a\");\n gradient.addColorStop(0.4, \"#e7bb52\");\n gradient.addColorStop(0.5, \"#f2cd80\");\n gradient.addColorStop(0.6, \"#e2af42\");\n gradient.addColorStop(0.82, \"#9c6c14\");\n gradient.addColorStop(1, \"#5e3b07\");\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, size, size);\n\n ctx.save();\n ctx.globalCompositeOperation = \"overlay\";\n for (let i = 0; i < 260; i++) {\n const y = Math.random() * size;\n const len = size * (0.3 + Math.random() * 0.7);\n const x = Math.random() * size - len / 2;\n ctx.strokeStyle = `rgba(255,255,255,${Math.random() * 0.1})`;\n ctx.lineWidth = Math.random() * 1.1;\n ctx.beginPath();\n ctx.moveTo(x, y);\n ctx.lineTo(x + len, y + (Math.random() - 0.5) * 6);\n ctx.stroke();\n }\n ctx.restore();\n\n const vignette = ctx.createRadialGradient(size / 2, size / 2, size * 0.32, size / 2, size / 2, size * 0.72);\n vignette.addColorStop(0, \"rgba(0,0,0,0)\");\n vignette.addColorStop(1, \"rgba(50,30,4,0.28)\");\n ctx.fillStyle = vignette;\n ctx.fillRect(0, 0, size, size);\n\n const drawSpacedText = (text: string, cx: number, cy: number, font: string, trackingPx: number) => {\n ctx.font = font;\n const chars = text.split(\"\");\n const widths = chars.map((c) => ctx.measureText(c).width);\n const totalWidth = widths.reduce((a, b) => a + b, 0) + trackingPx * (chars.length - 1);\n let x = cx - totalWidth / 2;\n ctx.textAlign = \"left\";\n chars.forEach((c, i) => {\n ctx.fillText(c, x, cy);\n x += widths[i] + trackingPx;\n });\n };\n\n const scratchFont = `800 15px Arial, sans-serif`;\n const andFont = `italic 400 20px Georgia, serif`;\n const centerY = size / 2;\n const lineGap = 7;\n const lines = [\n { text: \"SCRATCH\", y: centerY - 20 - lineGap, font: scratchFont, tracking: 1.5 },\n { text: \"and\", y: centerY, font: andFont, tracking: 0 },\n { text: \"WIN!\", y: centerY + 20 + lineGap, font: scratchFont, tracking: 1.5 },\n ];\n ctx.textBaseline = \"middle\";\n lines.forEach(({ text, y, font, tracking }) => {\n ctx.fillStyle = \"rgba(40,25,2,0.35)\";\n drawSpacedText(text, size / 2 + 1, y + 1, font, tracking);\n });\n lines.forEach(({ text, y, font, tracking }) => {\n ctx.fillStyle = \"rgba(255,250,230,0.92)\";\n drawSpacedText(text, size / 2, y, font, tracking);\n });\n}\n\nexport interface ScratchCardPopupProps extends Omit, \"children\"> {\n theme?: \"ecommerce\" | \"campaign\" | \"restaurant\" | \"saas\" | \"event\";\n asPopup?: boolean;\n trigger?: \"manual\" | \"delay\" | \"scroll\";\n delaySeconds?: number;\n widgetPosition?: \"bottom-right\" | \"bottom-left\";\n freeAttempts?: number;\n}\n\nexport function ScratchCardPopup({\n theme = \"ecommerce\",\n asPopup = false,\n trigger = \"manual\",\n delaySeconds = 4,\n widgetPosition = \"bottom-right\",\n freeAttempts = 3,\n className,\n style,\n ...props\n}: ScratchCardPopupProps) {\n const uid = React.useId();\n const rootRef = React.useRef(null);\n const canvasRef = React.useRef(null);\n const isDrawing = React.useRef(false);\n const lastPoint = React.useRef<{ x: number; y: number } | null>(null);\n const copyTimerRef = React.useRef | undefined>(undefined);\n\n const [popupOpen, setPopupOpen] = React.useState(!asPopup);\n const [scrollTriggered, setScrollTriggered] = React.useState(false);\n const [roundId, setRoundId] = React.useState(0);\n const [isRevealed, setIsRevealed] = React.useState(false);\n const [scratchProgress, setScratchProgress] = React.useState(0);\n const [awardedPrize, setAwardedPrize] = React.useState(null);\n const [attemptsLeft, setAttemptsLeft] = React.useState(freeAttempts);\n const [rewards, setRewards] = React.useState([]);\n const [copiedCode, setCopiedCode] = React.useState(null);\n const [showConfetti, setShowConfetti] = React.useState(false);\n\n const activeTheme = THEMES[theme] || THEMES.ecommerce;\n const cardSize = asPopup ? 300 : 270;\n const cardRadius = 30;\n const itemRadius = 24;\n\n // Shuffled only after mount — shuffling during render would make the\n // server-rendered order (Math.random() has no seed) mismatch the client's,\n // triggering a hydration error.\n const [displayItems, setDisplayItems] = React.useState(DEFAULT_IMAGES);\n React.useEffect(() => {\n setDisplayItems(shuffle(DEFAULT_IMAGES));\n }, [roundId]);\n const matchedIndices = React.useMemo(() => {\n const counts: Record = {};\n const indices: Record = {};\n displayItems.forEach((src, idx) => {\n counts[src] = (counts[src] || 0) + 1;\n (indices[src] ||= []).push(idx);\n });\n for (const [key, count] of Object.entries(counts)) {\n if (count >= 3) return indices[key];\n }\n return null;\n }, [displayItems]);\n const isWon = isRevealed && matchedIndices !== null;\n\n React.useEffect(() => () => clearTimeout(copyTimerRef.current), []);\n React.useEffect(() => setPopupOpen(!asPopup), [asPopup]);\n\n React.useEffect(() => {\n if (!asPopup || trigger !== \"delay\") return;\n const t = setTimeout(() => setPopupOpen(true), delaySeconds * 1000);\n return () => clearTimeout(t);\n }, [asPopup, trigger, delaySeconds]);\n\n React.useEffect(() => {\n if (!asPopup || trigger !== \"scroll\" || !rootRef.current) return;\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting && !scrollTriggered) {\n setScrollTriggered(true);\n setPopupOpen(true);\n }\n },\n { threshold: 0.4 },\n );\n observer.observe(rootRef.current);\n return () => observer.disconnect();\n }, [asPopup, trigger, scrollTriggered]);\n\n React.useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas || isRevealed) return;\n drawFoil(canvas, cardSize);\n }, [isRevealed, roundId, cardSize]);\n\n const getPos = (e: React.MouseEvent | React.TouchEvent) => {\n const canvas = canvasRef.current;\n if (!canvas) return { x: 0, y: 0 };\n const rect = canvas.getBoundingClientRect();\n const isTouch = \"touches\" in e;\n const clientX = isTouch ? e.touches[0].clientX : (e as React.MouseEvent).clientX;\n const clientY = isTouch ? e.touches[0].clientY : (e as React.MouseEvent).clientY;\n return { x: clientX - rect.left, y: clientY - rect.top };\n };\n\n const getFilledPercentage = () => {\n const canvas = canvasRef.current;\n const ctx = canvas?.getContext(\"2d\");\n if (!canvas || !ctx) return 0;\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const data = imageData.data;\n let transparent = 0;\n const step = 32;\n for (let i = 3; i < data.length; i += 4 * step) {\n if (data[i] < 40) transparent++;\n }\n return Math.round((transparent / (data.length / 4 / step)) * 100);\n };\n\n const completeReveal = () => {\n if (isRevealed || attemptsLeft <= 0) return;\n setIsRevealed(true);\n setScratchProgress(100);\n if (matchedIndices === null) return;\n\n const lastCode = rewards[rewards.length - 1]?.code;\n const pool = activeTheme.prizes.length > 1 ? activeTheme.prizes.filter((p) => p.code !== lastCode) : activeTheme.prizes;\n const prize = pool[Math.floor(Math.random() * pool.length)];\n setRewards((r) => [...r, prize]);\n setAttemptsLeft((n) => n - 1);\n setAwardedPrize(prize);\n setShowConfetti(true);\n };\n\n const scratchAgain = () => {\n if (attemptsLeft <= 0) return;\n setIsRevealed(false);\n setScratchProgress(0);\n setAwardedPrize(null);\n setShowConfetti(false);\n setRoundId((id) => id + 1);\n };\n\n const handleStart = (e: React.MouseEvent | React.TouchEvent) => {\n if (attemptsLeft <= 0) return;\n isDrawing.current = true;\n lastPoint.current = getPos(e);\n };\n\n const handleMove = (e: React.MouseEvent | React.TouchEvent) => {\n if (!isDrawing.current || !lastPoint.current || attemptsLeft <= 0) return;\n const canvas = canvasRef.current;\n const ctx = canvas?.getContext(\"2d\");\n if (!canvas || !ctx) return;\n\n const current = getPos(e);\n const dist = Math.hypot(current.x - lastPoint.current.x, current.y - lastPoint.current.y);\n const angle = Math.atan2(current.x - lastPoint.current.x, current.y - lastPoint.current.y);\n\n ctx.globalCompositeOperation = \"destination-out\";\n for (let i = 0; i < dist; i += 2.5) {\n const x = lastPoint.current.x + Math.sin(angle) * i;\n const y = lastPoint.current.y + Math.cos(angle) * i;\n ctx.beginPath();\n ctx.arc(x, y, BRUSH_SIZE / 2, 0, Math.PI * 2);\n ctx.fill();\n }\n\n lastPoint.current = current;\n const percent = getFilledPercentage();\n setScratchProgress(percent);\n if (percent >= 42) completeReveal();\n };\n\n const handleEnd = () => {\n isDrawing.current = false;\n lastPoint.current = null;\n };\n\n const copyRewardCode = (code: string) => {\n navigator.clipboard.writeText(code).catch(() => {});\n setCopiedCode(code);\n clearTimeout(copyTimerRef.current);\n copyTimerRef.current = setTimeout(() => setCopiedCode((c) => (c === code ? null : c)), 1500);\n };\n\n const confettiColors = [activeTheme.accent, \"#f59e0b\", \"#22c55e\", \"#0f172a\", activeTheme.accent];\n\n const gameCard = (\n
\n
\n\n {showConfetti && (\n
\n setShowConfetti(false)} />\n
\n )}\n\n
\n

\n {activeTheme.title}\n

\n

\n {activeTheme.subtitle}\n

\n
\n {attemptsLeft > 0 ? `${attemptsLeft} scratch${attemptsLeft > 1 ? \"es\" : \"\"} left` : \"No scratches left\"}\n
\n
\n\n
\n
\n {displayItems.map((src, i) => {\n const isMatch = isWon && matchedIndices !== null && matchedIndices.includes(i);\n return (\n \n {/* eslint-disable-next-line @next/next/no-img-element */}\n \"\"\n
\n );\n })}\n
\n\n \n {!isRevealed && (\n \n )}\n \n
\n\n {!isRevealed && (\n
\n
\n \n
\n
\n Scratch progress\n {scratchProgress}%\n
\n
\n )}\n\n {!isRevealed && attemptsLeft > 0 && (\n \n )}\n\n \n {isRevealed && isWon && awardedPrize && (\n \n
\n {awardedPrize.title}\n
\n
\n {awardedPrize.description}\n
\n
\n
\n {awardedPrize.code}\n
\n \n
\n {attemptsLeft > 0 && (\n \n )}\n \n )}\n \n\n {rewards.length > 0 && (\n
\n
\n Your Rewards\n
\n
\n {rewards.map((r, i) => (\n
\n
\n
{r.description}
\n
\n {r.code}\n
\n
\n \n
\n ))}\n
\n
\n )}\n
\n );\n\n if (!asPopup) {\n return (\n
\n {gameCard}\n
\n );\n }\n\n return (\n
\n
\n setPopupOpen(true)}\n whileHover={{ scale: 1.04 }}\n whileTap={{ scale: 0.97 }}\n aria-label={activeTheme.triggerText}\n className=\"flex h-14 items-center gap-3 rounded-full border border-black/8 bg-white py-1.5 pr-5 pl-1.5 shadow-[0_8px_30px_rgba(0,0,0,0.18)]\"\n style={{ fontFamily: \"Inter, system-ui, sans-serif\" }}\n >\n \n \n \n \n {activeTheme.triggerText}\n \n \n
\n\n \n {popupOpen && (\n \n {\n if (e.key === \"Escape\") setPopupOpen(false);\n }}\n className=\"relative w-full max-w-[420px]\"\n style={{ maxHeight: \"90vh\" }}\n >\n {gameCard}\n setPopupOpen(false)}\n aria-label=\"Close\"\n className=\"absolute -top-3.5 -right-3.5 z-[100] flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white text-[17px] text-black shadow-[0_4px_16px_rgba(0,0,0,0.25)]\"\n >\n ×\n \n \n \n )}\n \n
\n );\n}\n", "type": "registry:component" } ], "type": "registry:component" }