{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "reveal-card-grid", "type": "registry:ui", "title": "Reveal Card Grid", "author": "Rishabh Bose ", "description": "Interactive feature card grid with dynamic circular ink reveals that expand from the pointer entry coordinates to display vivid marbled fluid textures.", "dependencies": [ "framer-motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "components/ui/reveal-card-grid.tsx", "content": "\"use client\";\n\nimport React, { useRef, useState, useId } from \"react\";\nimport {\n motion,\n useMotionValue,\n useTransform,\n animate,\n useReducedMotion,\n type AnimationPlaybackControls,\n} from \"framer-motion\";\nimport {\n Rocket,\n Zap,\n Palette,\n Globe,\n Layers,\n Link as LinkIcon,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ------------------------------------------------------------------ */\n/* Types & Accent Config */\n/* ------------------------------------------------------------------ */\n\nexport type AccentColor =\n | \"blue\"\n | \"purple\"\n | \"pink\"\n | \"green\"\n | \"orange\"\n | \"red\";\n\nexport interface RevealCardItem {\n id: string | number;\n title: string;\n description: string;\n icon: React.ComponentType<{ className?: string }>;\n accent: AccentColor;\n href?: string;\n onClick?: () => void;\n image?: string;\n}\n\nexport interface RevealCardGridProps {\n /** Array of feature card items (defaults to 6 items) */\n items?: RevealCardItem[];\n /** Optional section header title */\n title?: string;\n /** Optional section subtitle */\n subtitle?: string;\n className?: string;\n}\n\nexport interface RevealCardProps {\n item: RevealCardItem;\n className?: string;\n}\n\n// Complete static class strings to allow Tailwind compiler detection without dynamic truncation\nexport const ACCENT_STYLES: Record<\n AccentColor,\n {\n idleChipBg: string;\n idleIcon: string;\n hoverChipBg: string;\n hoverIcon: string;\n chipShadow: string;\n ring: string;\n stops: [string, string, string, string]; // [highlight, midtone, deepShadow, nearBlack]\n }\n> = {\n blue: {\n idleChipBg: \"bg-blue-500/10 dark:bg-blue-500/15\",\n idleIcon: \"text-blue-600/70 dark:text-blue-400/70\",\n hoverChipBg: \"bg-white text-blue-600 shadow-md shadow-blue-500/20\",\n hoverIcon: \"text-blue-600\",\n chipShadow: \"shadow-blue-500/20\",\n ring: \"focus-visible:ring-blue-500\",\n stops: [\"#38bdf8\", \"#2563eb\", \"#1e1b4b\", \"#020617\"],\n },\n purple: {\n idleChipBg: \"bg-purple-500/10 dark:bg-purple-500/15\",\n idleIcon: \"text-purple-600/70 dark:text-purple-400/70\",\n hoverChipBg: \"bg-white text-purple-600 shadow-md shadow-purple-500/20\",\n hoverIcon: \"text-purple-600\",\n chipShadow: \"shadow-purple-500/20\",\n ring: \"focus-visible:ring-purple-500\",\n stops: [\"#c084fc\", \"#9333ea\", \"#2e1065\", \"#090514\"],\n },\n pink: {\n idleChipBg: \"bg-pink-500/10 dark:bg-pink-500/15\",\n idleIcon: \"text-pink-600/70 dark:text-pink-400/70\",\n hoverChipBg: \"bg-white text-pink-600 shadow-md shadow-pink-500/20\",\n hoverIcon: \"text-pink-600\",\n chipShadow: \"shadow-pink-500/20\",\n ring: \"focus-visible:ring-pink-500\",\n stops: [\"#fb7185\", \"#e11d48\", \"#4c0519\", \"#0f0206\"],\n },\n green: {\n idleChipBg: \"bg-emerald-500/10 dark:bg-emerald-500/15\",\n idleIcon: \"text-emerald-600/70 dark:text-emerald-400/70\",\n hoverChipBg: \"bg-white text-emerald-600 shadow-md shadow-emerald-500/20\",\n hoverIcon: \"text-emerald-600\",\n chipShadow: \"shadow-emerald-500/20\",\n ring: \"focus-visible:ring-emerald-500\",\n stops: [\"#34d399\", \"#059669\", \"#064e3b\", \"#021a11\"],\n },\n orange: {\n idleChipBg: \"bg-amber-500/10 dark:bg-amber-500/15\",\n idleIcon: \"text-amber-600/70 dark:text-amber-400/70\",\n hoverChipBg: \"bg-white text-amber-600 shadow-md shadow-amber-500/20\",\n hoverIcon: \"text-amber-600\",\n chipShadow: \"shadow-amber-500/20\",\n ring: \"focus-visible:ring-amber-500\",\n stops: [\"#fbbf24\", \"#ea580c\", \"#431407\", \"#0c0402\"],\n },\n red: {\n idleChipBg: \"bg-rose-500/10 dark:bg-rose-500/15\",\n idleIcon: \"text-rose-600/70 dark:text-rose-400/70\",\n hoverChipBg: \"bg-white text-rose-600 shadow-md shadow-rose-500/20\",\n hoverIcon: \"text-rose-600\",\n chipShadow: \"shadow-rose-500/20\",\n ring: \"focus-visible:ring-rose-500\",\n stops: [\"#f87171\", \"#dc2626\", \"#450a0a\", \"#0a0101\"],\n },\n};\n\n/* ------------------------------------------------------------------ */\n/* Default 6 Items */\n/* ------------------------------------------------------------------ */\n\nexport const DEFAULT_REVEAL_ITEMS: RevealCardItem[] = [\n {\n id: \"instant-deploys\",\n title: \"Instant deploys\",\n description: \"Push to main and it's live worldwide before the kettle boils.\",\n icon: Rocket,\n accent: \"blue\",\n },\n {\n id: \"edge-functions\",\n title: \"Edge functions\",\n description:\n \"Run code a few milliseconds from every visitor, not an ocean away.\",\n icon: Zap,\n accent: \"purple\",\n },\n {\n id: \"design-tokens\",\n title: \"Design tokens\",\n description:\n \"One source of colour, type and spacing that every surface reads from.\",\n icon: Palette,\n accent: \"pink\",\n },\n {\n id: \"global-cdn\",\n title: \"Global CDN\",\n description:\n \"Assets cached in hundreds of cities and purged in under a second.\",\n icon: Globe,\n accent: \"green\",\n },\n {\n id: \"media-pipeline\",\n title: \"Media pipeline\",\n description:\n \"Images and video resized, compressed and served in the right format.\",\n icon: Layers,\n accent: \"orange\",\n },\n {\n id: \"preview-links\",\n title: \"Preview links\",\n description:\n \"Every branch gets its own URL, so reviews happen on the real thing.\",\n icon: LinkIcon,\n accent: \"red\",\n },\n];\n\n/* ------------------------------------------------------------------ */\n/* Subcomponent: Procedural Marbled Liquid Fluid Canvas */\n/* ------------------------------------------------------------------ */\n\nexport function MarbledFluidCanvas({\n accent,\n isHovered,\n}: {\n accent: AccentColor;\n isHovered: boolean;\n}) {\n const rawId = useId();\n const filterId = `marble-fluid-${accent}-${rawId.replace(/:/g, \"\")}`;\n const stops = ACCENT_STYLES[accent].stops;\n\n return (\n
\n \n \n \n \n \n \n \n\n \n {/* Deep Near-Black Fluid Base */}\n \n\n {/* Liquid swirls in mapped gradient stops */}\n \n \n \n \n \n \n \n
\n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Subcomponent: Reusable RevealCard */\n/* ------------------------------------------------------------------ */\n\nexport function RevealCard({ item, className }: RevealCardProps) {\n const cardRef = useRef(null);\n const [isHovered, setIsHovered] = useState(false);\n const controlsRef = useRef(null);\n const shouldReduceMotion = useReducedMotion();\n\n // Dynamic ink circle clip-path motion values\n const originX = useMotionValue(0);\n const originY = useMotionValue(0);\n const radius = useMotionValue(0);\n\n // Transform into CSS clip-path circle(R at X Y)\n const clipPath = useTransform(\n [originX, originY, radius],\n ([x, y, r]) => `circle(${r}px at ${x}px ${y}px)`\n );\n\n const style = ACCENT_STYLES[item.accent];\n const Icon = item.icon;\n\n /* ------------------------------------------------------------------ */\n /* Pointer Entrance & Exit Physics Logic */\n /* ------------------------------------------------------------------ */\n\n const handlePointerEnter = (e: React.PointerEvent) => {\n if (e.pointerType === \"touch\") return;\n const rect = cardRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n // Entry point coordinates relative to the card bounds\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n originX.set(x);\n originY.set(y);\n\n // Compute maximum distance to the farthest corner so the circle covers 100% of the surface\n const dx = Math.max(x, rect.width - x);\n const dy = Math.max(y, rect.height - y);\n const maxRadius = Math.hypot(dx, dy);\n\n // Stop ongoing animation and resume from current radius without jump\n controlsRef.current?.stop();\n setIsHovered(true);\n\n controlsRef.current = animate(radius, maxRadius, {\n duration: 0.65,\n ease: [0.22, 1, 0.36, 1],\n });\n };\n\n const handlePointerLeave = (e: React.PointerEvent) => {\n if (e.pointerType === \"touch\") return;\n const rect = cardRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n // Clamp exit pointer coordinates to card perimeter\n const exitX = Math.max(0, Math.min(rect.width, e.clientX - rect.left));\n const exitY = Math.max(0, Math.min(rect.height, e.clientY - rect.top));\n\n // Move circle origin to the exit point so ink visibly drains toward the cursor\n originX.set(exitX);\n originY.set(exitY);\n\n controlsRef.current?.stop();\n setIsHovered(false);\n\n // Animate radius smoothly back to 0\n controlsRef.current = animate(radius, 0, {\n duration: 0.5,\n ease: [0.22, 1, 0.36, 1],\n });\n };\n\n /* ------------------------------------------------------------------ */\n /* Keyboard Accessibility (Focus / Blur from Card Center) */\n /* ------------------------------------------------------------------ */\n\n const handleFocus = () => {\n const rect = cardRef.current?.getBoundingClientRect();\n if (!rect) return;\n const cx = rect.width / 2;\n const cy = rect.height / 2;\n originX.set(cx);\n originY.set(cy);\n const maxRadius = Math.hypot(cx, cy);\n\n controlsRef.current?.stop();\n setIsHovered(true);\n controlsRef.current = animate(radius, maxRadius, {\n duration: 0.65,\n ease: [0.22, 1, 0.36, 1],\n });\n };\n\n const handleBlur = () => {\n const rect = cardRef.current?.getBoundingClientRect();\n if (!rect) return;\n const cx = rect.width / 2;\n const cy = rect.height / 2;\n originX.set(cx);\n originY.set(cy);\n\n controlsRef.current?.stop();\n setIsHovered(false);\n controlsRef.current = animate(radius, 0, {\n duration: 0.5,\n ease: [0.22, 1, 0.36, 1],\n });\n };\n\n /* ------------------------------------------------------------------ */\n /* Touch Screen Tap Handling */\n /* ------------------------------------------------------------------ */\n\n const handlePointerDown = (e: React.PointerEvent) => {\n if (e.pointerType !== \"touch\") return;\n const rect = cardRef.current?.getBoundingClientRect();\n if (!rect) return;\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n originX.set(x);\n originY.set(y);\n const maxRadius = Math.hypot(\n Math.max(x, rect.width - x),\n Math.max(y, rect.height - y)\n );\n\n controlsRef.current?.stop();\n if (!isHovered) {\n setIsHovered(true);\n controlsRef.current = animate(radius, maxRadius, {\n duration: 0.6,\n ease: [0.22, 1, 0.36, 1],\n });\n } else {\n setIsHovered(false);\n controlsRef.current = animate(radius, 0, {\n duration: 0.45,\n ease: [0.22, 1, 0.36, 1],\n });\n }\n };\n\n return (\n \n {/* Absolutely positioned marbled fluid artwork layer masked by circular clip-path */}\n \n {item.image ? (\n \n ) : (\n \n )}\n\n {/* Bottom dark gradient overlay ensuring 100% white text contrast */}\n
\n \n\n {/* Top-left: Circular Icon Chip */}\n
\n \n \n
\n
\n\n {/* Bottom-left: Title and Description */}\n
\n \n {item.title}\n \n \n {item.description}\n

\n
\n \n );\n}\n\n/* ------------------------------------------------------------------ */\n/* Main Component: RevealCardGrid */\n/* ------------------------------------------------------------------ */\n\nexport function RevealCardGrid({\n items = DEFAULT_REVEAL_ITEMS,\n title,\n subtitle,\n className,\n}: RevealCardGridProps) {\n return (\n \n {/* Optional Section Header */}\n {(title || subtitle) && (\n
\n {title && (\n

\n {title}\n

\n )}\n {subtitle && (\n

\n {subtitle}\n

\n )}\n
\n )}\n\n {/* Semantic Grid Container: 1 col mobile, 2 col tablet, 3 col desktop */}\n
    \n {items.map((item) => (\n \n ))}\n
\n \n );\n}\n\nexport default RevealCardGrid;\n", "type": "registry:ui", "target": "components/ui/reveal-card-grid.tsx" }, { "path": "lib/utils.ts", "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport async function copyToClipboard(text: string): Promise {\n if (typeof window === \"undefined\") return false;\n\n try {\n if (navigator.clipboard && window.isSecureContext) {\n await navigator.clipboard.writeText(text);\n return true;\n }\n\n const textArea = document.createElement(\"textarea\");\n textArea.value = text;\n textArea.style.position = \"fixed\";\n textArea.style.left = \"-999999px\";\n textArea.style.top = \"-999999px\";\n document.body.appendChild(textArea);\n textArea.focus();\n textArea.select();\n const succeeded = document.execCommand(\"copy\");\n textArea.remove();\n return succeeded;\n } catch {\n return false;\n }\n}\n", "type": "registry:lib", "target": "lib/utils.ts" } ] }