{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hero", "title": "Hero", "author": "AlgorizeTech", "description": "Ask the user to pick one of 16 hero variants: https://avaraui.com/view/hero. This item holds 8 of them as looks of one component (bounce, typing, slider, pet-shop, doctor, facility, vortex, orbit). Skip the question if the user already named one. A prop-driven hero section supporting revolving 3D orbit ring, spring word bounce, character typewriter, 3D split marquee slider, pet-shop, doctor, and facility CAD grid variants.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://avaraui.com/r/animated-typography.json", "https://avaraui.com/r/bento-cascade-hero.json", "https://avaraui.com/r/breathe-hero.json", "https://avaraui.com/r/solar-snapshot-hero.json", "utils" ], "files": [ { "path": "src/components/custom/blocks/HeroBlock.tsx", "content": "\"use client\";\n\nimport React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { AnimatedTypographyBlock, type PrefixPosition } from \"./AnimatedTypographyBlock\";\nimport { BentoCascadeHero, type BentoCascadeCardItem } from \"./BentoCascadeHeroBlock\";\nimport { BreatheHero } from \"./BreatheHeroBlock\";\nimport { SolarSnapshotHero } from \"./SolarSnapshotHeroBlock\";\nimport { ArrowRight, ArrowUpRight, Check, Copy, Sparkles, Terminal, Star, Code, Mail, FileText, Heart, ShieldCheck, ShoppingBag, Package } from \"lucide-react\";\n\n/* ═══════════════════════════════════════════════\n SELF-CONTAINED SVG BRAND ICONS\n ═══════════════════════════════════════════════ */\n\nconst GitHubIcon = (props: React.SVGProps) => (\n \n \n \n);\n\n/* ═══════════════════════════════════════════════\n TYPES & INTERFACES\n ═══════════════════════════════════════════════ */\n\nexport interface OrbitHighlight {\n label: string;\n color?: string;\n}\n\nexport interface HeroBlockProps extends React.HTMLAttributes {\n /** Animation variant: \"bounce\", \"typing\", \"slider\", \"glow-arc\", \"pet-shop\", \"doctor\", \"facility\", \"geometric\", \"vortex\", \"radar\", \"orbit\", \"orbit-gallery\", \"orbit-ring\", \"bento-cascade\" */\n variant?:\n | \"bounce\"\n | \"typing\"\n | \"slider\"\n | \"glow-arc\"\n | \"pet-shop\"\n | \"doctor\"\n | \"facility\"\n | \"geometric\"\n | \"vortex\"\n | \"radar\"\n | \"cyclone\"\n | \"orbit\"\n | \"orbit-gallery\"\n | \"orbit-ring\"\n | \"orbit-hero\"\n | \"bento-cascade\"\n | \"cascade\"\n | \"breathe\"\n | \"hero-breathe\"\n | \"curved-cards\"\n | \"arch\"\n | \"solar-snapshot\"\n | \"sun-cursor\"\n | \"solar\";\n /** Optional badge text displayed inside the top pill badge */\n badgeText?: string;\n /** Badge link URL */\n badgeHref?: string;\n /** Optional monospace eyebrow text above the main title (used in \"vortex\" variant) */\n eyebrow?: string;\n /** Main static title text prefix */\n titlePrefix?: string;\n /** Main static title text (used in \"orbit\" variant, falls back to titlePrefix) */\n title?: string;\n /** Words to animate in the bounce, typing, or flip effect */\n typingWords?: string[];\n /** Main static title text suffix */\n titleSuffix?: string;\n /** Accent line of headline (used in \"orbit\" variant, falls back to titleSuffix) */\n titleAccent?: string;\n /**\n * Whether the title text before the animated word holds still (\"fixed\")\n * or re-centres as the word changes width (\"fluid\"). Defaults to \"fluid\"\n * for the typing variant and \"fixed\" for bounce.\n */\n prefixPosition?: PrefixPosition;\n /** Subtitle / description paragraph */\n subtitle?: string;\n /** CLI copy command */\n cliCommand?: string;\n /**\n * The element used for links. Defaults to a plain `a`, so this component works\n * in any React app with no adaptation. In Next.js, pass `next/link` to keep\n * client-side navigation and prefetching: `linkComponent={Link}`.\n */\n linkComponent?: React.ElementType;\n /** Primary action button label */\n primaryActionLabel?: string;\n /** Primary action button URL */\n primaryActionHref?: string;\n /** Secondary action button label */\n secondaryActionLabel?: string;\n /** Secondary action button URL */\n secondaryActionHref?: string;\n /** Array of image URLs for the continuous right-to-left thumbnail slider (used in \"slider\" variant) */\n sliderImages?: string[];\n /** Main featured image URL for the right column (used in \"slider\" variant) */\n mainImage?: string;\n /** Array of category pill tags (used in \"pet-shop\" variant) */\n categories?: string[];\n /** Rating text (used in \"pet-shop\" variant, e.g. \"4.9 ★ Rated\") */\n ratingText?: string;\n /** Feature pill badge text (used in \"pet-shop\" variant) */\n featurePillText?: string;\n /** Array of top badge strings (used in \"pet-shop\" variant) */\n badgeTags?: string[];\n /** Main featured pet image URL (used in \"pet-shop\" variant) */\n petImage?: string;\n /** Secondary pet avatar image URL (used in \"pet-shop\" variant) */\n secondaryPetImage?: string;\n /** Key statistics / metrics shown at the bottom (used in \"vortex\" variant) */\n metrics?: Array<{ value: string; label: string }>;\n /** Radar/cyclone HUD card title (used in \"vortex\" variant) */\n hudTitle?: string;\n /** Radar/cyclone HUD timestamp/status (used in \"vortex\" variant) */\n hudTime?: string;\n /** Radar/cyclone HUD telemetry items (used in \"vortex\" variant) */\n hudMetrics?: Array<{ label: string; value: string }>;\n /** Speed of the rotating vortex in radians per frame (default: 0.014) */\n rotationSpeed?: number;\n /** Custom accent color (CSS color or tailwind var) */\n color?: string;\n /** Array of image URLs for the revolving circular photo ring (used in \"orbit\" variant) or bento cascade variant */\n images?: string[];\n /** Array of custom card objects for the bento cascade variant */\n cards?: BentoCascadeCardItem[];\n /** Optional custom image rendering component (e.g. Next.js next/image) */\n imageComponent?: React.ElementType;\n /** Seconds for one full orbit revolution (used in \"orbit\" variant, default: 36) */\n duration?: number;\n /** Dotted bullet highlights under actions (used in \"orbit\" variant) */\n highlights?: OrbitHighlight[];\n}\n\ntype Rgb = [number, number, number];\n\nconst LIGHT_SURFACE_LUM = 1;\nconst DARK_SURFACE_LUM = 0.003;\nconst MIN_CONTRAST = 3;\n\nconst parseColor = (input: string): Rgb | null => {\n const hex = input.trim().replace(/^#/, \"\");\n if (/^[a-f\\d]{3}$/i.test(hex)) {\n const [r, g, b] = hex.split(\"\");\n return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16)];\n }\n if (/^[a-f\\d]{6}$/i.test(hex)) {\n return [\n parseInt(hex.slice(0, 2), 16),\n parseInt(hex.slice(2, 4), 16),\n parseInt(hex.slice(4, 6), 16),\n ];\n }\n const m = input.match(/^rgba?\\(\\s*([\\d.]+)[\\s,]+([\\d.]+)[\\s,]+([\\d.]+)/i);\n return m ? [+m[1], +m[2], +m[3]] : null;\n};\n\nconst relLuminance = ([r, g, b]: Rgb) => {\n const f = (v: number) => {\n const c = v / 255;\n return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n };\n return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);\n};\n\nconst contrast = (a: number, b: number) =>\n (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);\n\nconst ensureContrast = (rgb: Rgb, surfaceLum: number, target: 0 | 255): Rgb => {\n let out = rgb;\n for (let i = 0; i < 16; i++) {\n if (contrast(relLuminance(out), surfaceLum) >= MIN_CONTRAST) break;\n out = out.map((v) => Math.round(v + (target - v) * 0.12)) as Rgb;\n }\n return out;\n};\n\nconst toCss = ([r, g, b]: Rgb) => `rgb(${r}, ${g}, ${b})`;\n\nconst getAccentForeground = (rgb: Rgb | null): string => {\n if (!rgb) return \"var(--primary-foreground)\";\n return relLuminance(rgb) > 0.45 ? \"#09090b\" : \"#ffffff\";\n};\n\n/* ═══════════════════════════════════════════════\n DEFAULT DEVELOPER-FIRST RENDER & CODE IMAGES\n ═══════════════════════════════════════════════ */\n\nconst DEFAULT_SLIDER_IMAGES = [\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790148864/photo-1618005182384-a83a8bd57fbe-1790148865111.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790158810/photo-1634017839464-5c339ebe3cb4-1790158812203.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790158809/photo-1618005198919-d3d4b5a92ead-1790158812198.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790158809/photo-1633356122544-f134324a6cee-1790158812203.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790158809/photo-1620641788421-7a1c342ea42e-1790158812200.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790158811/photo-1635070041078-e363dbe005cb-1790158812204.jpg\",\n];\n\nconst DEFAULT_MAIN_IMAGE =\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1200,c_limit/v1790150482/photo-1524504388940-b1c1722653e1-1790150482279.jpg\";\n\nconst DEFAULT_ORBIT_IMAGES = [\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790146210/photo-1506744038136-46273834b3fb-1790146212208.jpg\", // Yosemite\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790145141/photo-1448375240586-882707db888b-1790145143491.jpg\", // Sunlit forest path\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\", // Mountain fog\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790146211/photo-1441974231531-c6227db76b6e-1790146212212.jpg\", // Forest sunbeam\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790146210/photo-1472214103451-9374bd1c798e-1790146212205.jpg\", // Green valley\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790146210/photo-1501785888041-af3ef285b470-1790146212207.jpg\", // Mountain lake\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790146209/photo-1469474968028-56623f02e42e-1790146212205.jpg\", // Wilderness\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790145140/photo-1426604966848-d7adac402bff-1790145143490.jpg\", // Peak at sunset\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790148863/photo-1447752875215-b2761acb3c5d-1790148865109.jpg\", // Autumn stream\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790146210/photo-1507525428034-b723cf961d3e-1790146212208.jpg\", // Tropical coast\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790158813/photo-1433086966358-54859d0ed716-1790158812209.jpg\", // Waterfall\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790145141/photo-1464822759023-fed622ff2c3b-1790145143491.jpg\", // Alps\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790145142/photo-1500530855697-b586d89ba3ee-1790145143493.jpg\", // Golden lake\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790148863/photo-1473448912268-2022ce9509d8-1790148865110.jpg\", // Pine forest\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_600,c_limit/v1790158814/photo-1518495973542-4542c06a5843-1790158812213.jpg\", // Sunlit trees\n];\n\nconst DEFAULT_ORBIT_HIGHLIGHTS: OrbitHighlight[] = [\n { label: \"15 hand-picked scenes\" },\n { label: \"Full-circle rotation\", color: \"#10b981\" },\n { label: \"Holds still on hover\", color: \"#f59e0b\" },\n];\n\n/* ═══════════════════════════════════════════════\n MOTION (CSS keyframes, no animation library)\n ═══════════════════════════════════════════════ */\n\n/** A tween given only a duration eases out: cubic-bezier(0, 0, 0.58, 1). */\nconst EASE_OUT = \"cubic-bezier(0, 0, 0.58, 1)\";\n/** The blueprint grid's lines and shape glide between hover zones. */\nconst GLIDE = { duration: 900, easing: \"cubic-bezier(0.16, 1, 0.3, 1)\" };\n\nconst HERO_CSS = `\n@keyframes hero-rise-30 { from { opacity: 0; transform: translateY(30px); } }\n@keyframes hero-rise-20 { from { opacity: 0; transform: translateY(20px); } }\n@keyframes hero-grow { from { opacity: 0; transform: scale(0.95); } }\n`;\n\n/** Where the blueprint's four grid lines and the shape sit for each hover zone. */\ntype ShapeZone = \"idle\" | \"left\" | \"right\" | \"center\";\nconst shapeTargets = (zone: ShapeZone): Record[] => {\n const pick = (right: string, left: string, rest: string) => (zone === \"right\" ? right : zone === \"left\" ? left : rest);\n return [\n { top: pick(\"26%\", \"30%\", \"28%\") }, // top line\n { top: pick(\"74%\", \"70%\", \"72%\") }, // bottom line\n { left: pick(\"23%\", \"29%\", \"26%\") }, // left line\n { left: pick(\"77%\", \"71%\", \"74%\") }, // right line\n // the shape, bounded by all four\n { left: pick(\"23%\", \"29%\", \"26%\"), width: pick(\"54%\", \"42%\", \"48%\"), top: pick(\"26%\", \"30%\", \"28%\"), height: pick(\"48%\", \"40%\", \"44%\") },\n ];\n};\n\n/* ═══════════════════════════════════════════════\n VORTEX RADAR CYCLONE DEFAULTS & EXACT RADAR CANVAS\n ═══════════════════════════════════════════════ */\n\nconst DEFAULT_VORTEX_METRICS = [\n { value: \"134M\", label: \"PARCELS COVERED\" },\n { value: \"412K\", label: \"SCORES A DAY\" },\n { value: \"180ms\", label: \"P95 RESPONSE\" },\n];\n\nconst DEFAULT_HUD_METRICS = [\n { label: \"SUSTAINED\", value: \"129 kt\" },\n { label: \"CENTRAL\", value: \"959 mb\" },\n { label: \"EYE\", value: \"50 km\" },\n { label: \"TRACK\", value: \"W 271°\" },\n { label: \"SWATH Ø\", value: \"16 km\" },\n];\n\n// Exact dot-for-dot coordinates extracted from the climate risk radar reference image (804 points)\nconst VORTEX_COORDS_B64 = \"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\";\n\nfunction decodeVortexCoords(b64: string): Array<[number, number]> {\n if (typeof window === \"undefined\") return [];\n try {\n const bin = atob(b64);\n const bytes = new Uint8Array(bin.length);\n for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);\n const int16 = new Int16Array(bytes.buffer);\n const result: Array<[number, number]> = [];\n for (let i = 0; i < int16.length; i += 2) {\n result.push([int16[i] / 10, int16[i + 1] / 10]);\n }\n return result;\n } catch {\n return [];\n }\n}\n\nfunction VortexCanvas({\n speed = 0.010,\n className,\n}: {\n speed?: number;\n className?: string;\n}) {\n const canvasRef = useRef(null);\n const angleRef = useRef(0);\n const gridRef = useRef>([]);\n const scaleRef = useRef(1);\n\n // Pre-rasterized 2D spatial hitmap of the cyclone shape (804 points), spanning 560x560 to cover all 360deg rotations:\n const hitmapData = React.useMemo(() => {\n const pts = decodeVortexCoords(VORTEX_COORDS_B64);\n const CELL_SIZE = 2.5;\n const ORIGIN_X = 280;\n const ORIGIN_Y = 280;\n const GRID_W = Math.ceil(560 / CELL_SIZE);\n const GRID_H = Math.ceil(560 / CELL_SIZE);\n const hitmap = new Uint8Array(GRID_W * GRID_H);\n const R_HIT = 4.2;\n const rCells = Math.ceil(R_HIT / CELL_SIZE);\n\n for (let i = 0; i < pts.length; i++) {\n const [px, py] = pts[i];\n const cx = Math.round((px + ORIGIN_X) / CELL_SIZE);\n const cy = Math.round((py + ORIGIN_Y) / CELL_SIZE);\n for (let dy = -rCells; dy <= rCells; dy++) {\n for (let dx = -rCells; dx <= rCells; dx++) {\n if (dx * dx + dy * dy <= rCells * rCells) {\n const gx = cx + dx;\n const gy = cy + dy;\n if (gx >= 0 && gx < GRID_W && gy >= 0 && gy < GRID_H) {\n hitmap[gy * GRID_W + gx] = 1;\n }\n }\n }\n }\n }\n\n return { hitmap, CELL_SIZE, ORIGIN_X, ORIGIN_Y, GRID_W, GRID_H };\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n let animId: number;\n let isReducedMotion = false;\n if (typeof window !== \"undefined\") {\n isReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n }\n\n const updateCanvasSize = () => {\n if (!canvas) return;\n const parent = canvas.parentElement;\n const rect = parent ? parent.getBoundingClientRect() : canvas.getBoundingClientRect();\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const width = Math.max(rect.width, 300);\n const height = Math.max(rect.height, 300);\n\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = width + \"px\";\n canvas.style.height = height + \"px\";\n\n // Scale cyclone to fit comfortably within radar frame (eye at center, arms sweeping outward)\n const scale = Math.min(width, height) / 460;\n scaleRef.current = scale;\n\n // Fill entire radar frame right up to all 4 borders (top, bottom, left, right):\n const halfW = (width / 2) / scale;\n const halfH = (height / 2) / scale;\n const step = 6.4;\n\n const xStart = -Math.ceil(halfW / step) * step;\n const xEnd = Math.ceil(halfW / step) * step;\n const yStart = -Math.ceil(halfH / step) * step;\n const yEnd = Math.ceil(halfH / step) * step;\n\n const dots: Array<{ x: number; y: number; r: number }> = [];\n for (let y = yStart; y <= yEnd; y += step) {\n for (let x = xStart; x <= xEnd; x += step) {\n dots.push({\n x: Number(x.toFixed(1)),\n y: Number(y.toFixed(1)),\n r: Number(Math.hypot(x, y).toFixed(1)),\n });\n }\n }\n gridRef.current = dots;\n };\n\n updateCanvasSize();\n\n const resizeObserver = new ResizeObserver(() => {\n updateCanvasSize();\n });\n if (canvas.parentElement) {\n resizeObserver.observe(canvas.parentElement);\n }\n\n const render = () => {\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const w = canvas.width / dpr;\n const h = canvas.height / dpr;\n const cx = w / 2;\n const cy = h / 2;\n\n const scale = scaleRef.current || Math.min(w, h) / 460;\n const dotRadiusDim = Math.max(1.0, 1.25 * scale);\n const dotRadiusLit = Math.max(1.85, 2.15 * scale);\n\n const staticGrid = gridRef.current;\n if (staticGrid.length === 0) {\n animId = requestAnimationFrame(render);\n return;\n }\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.save();\n ctx.scale(dpr, dpr);\n ctx.translate(cx, cy);\n ctx.scale(scale, scale);\n\n // Pass 1: Render ALL stationary grid dots in faint, translucent white\n // IMPORTANT: Dots NEVER change physical positions! They remain fixed in their matrix.\n ctx.fillStyle = \"rgba(255, 255, 255, 0.14)\";\n ctx.beginPath();\n for (let i = 0; i < staticGrid.length; i++) {\n const d = staticGrid[i];\n ctx.moveTo(d.x + dotRadiusDim, d.y);\n ctx.arc(d.x, d.y, dotRadiusDim, 0, Math.PI * 2);\n }\n ctx.fill();\n\n // Pass 2: Render illuminated white dots where the cyclone vortex sweeps over them\n // Coherent rotation preserves the EXACT shape from the reference image without shearing.\n // Clockwise rotation unwinds counter-clockwise spiral arms so they propagate outward from the eye.\n // Outward radial pulse wave: Radiates concentric ripples of luminous intensity from center out.\n const { hitmap, CELL_SIZE, ORIGIN_X, ORIGIN_Y, GRID_W, GRID_H } = hitmapData;\n const angle = angleRef.current;\n const cos = Math.cos(angle);\n const sin = Math.sin(angle);\n\n ctx.fillStyle = \"#ffffff\";\n ctx.beginPath();\n for (let i = 0; i < staticGrid.length; i++) {\n const d = staticGrid[i];\n\n // Clockwise sampling unwinds spiral arms outward from center:\n const rx = d.x * cos - d.y * sin;\n const ry = d.x * sin + d.y * cos;\n\n const gx = Math.round((rx + ORIGIN_X) / CELL_SIZE);\n const gy = Math.round((ry + ORIGIN_Y) / CELL_SIZE);\n const isLit =\n gx >= 0 && gx < GRID_W && gy >= 0 && gy < GRID_H && hitmap[gy * GRID_W + gx] === 1;\n\n if (isLit) {\n // Outward radial wave pulse: travels continuously from center eye to outer edge\n const radialWave = Math.sin(d.r * 0.05 - angle * 3.5);\n const rLit = dotRadiusLit * (0.95 + 0.12 * Math.max(0, radialWave));\n ctx.moveTo(d.x + rLit, d.y);\n ctx.arc(d.x, d.y, rLit, 0, Math.PI * 2);\n }\n }\n ctx.fill();\n\n ctx.restore();\n\n if (!isReducedMotion) {\n angleRef.current += speed;\n animId = requestAnimationFrame(render);\n }\n };\n\n render();\n\n return () => {\n if (animId) cancelAnimationFrame(animId);\n resizeObserver.disconnect();\n };\n }, [hitmapData, speed]);\n\n return (\n \n );\n}\n\n\n\n/* ═══════════════════════════════════════════════\n MAIN HERO BLOCK COMPONENT\n ═══════════════════════════════════════════════ */\n\nexport const HeroBlock = forwardRef(\n (\n {\n variant = \"bounce\",\n linkComponent: Link = \"a\",\n badgeText = \"Next-Gen React Components\",\n badgeHref = \"#\",\n eyebrow,\n titlePrefix = \"Build \",\n title,\n typingWords = [\n \"Interfaces\",\n \"Components\",\n \"Experiences\",\n \"Animations\",\n \"Dashboards\",\n ],\n titleSuffix = \"\",\n titleAccent,\n prefixPosition,\n subtitle = \"A meticulous library of React components & interactive blocks, engineered for seamless performance with Tailwind CSS, TypeScript, GSAP, and Motion.\",\n cliCommand = \"npx shadcn@latest add @avara-ui/button\",\n primaryActionLabel = \"Browse Components\",\n primaryActionHref = \"#\",\n secondaryActionLabel = \"Star on GitHub\",\n secondaryActionHref = \"#\",\n sliderImages = DEFAULT_SLIDER_IMAGES,\n mainImage = DEFAULT_MAIN_IMAGE,\n petImage,\n secondaryPetImage,\n categories = [\"Dry Food\", \"Toys\", \"Grooming\", \"Wellness\", \"Subscription\"],\n ratingText = \"4.9 ★ Rated\",\n featurePillText = \"24/7 Vet Care\",\n badgeTags = [\"Certified Organic & Vet Approved\", \"4.9 Star Rated\"],\n metrics,\n hudTitle,\n hudTime,\n hudMetrics,\n rotationSpeed,\n color,\n images,\n cards,\n imageComponent,\n duration = 36,\n highlights,\n className,\n style,\n onMouseMove,\n onMouseEnter,\n onMouseLeave,\n ...props\n },\n ref,\n ) => {\n const [copied, setCopied] = useState(false);\n // Shape hover zone state (used when variant === \"facility\" || variant === \"geometric\")\n const [shapeHoverZone, setShapeHoverZone] = useState(\"idle\");\n\n // Blueprint grid (used when variant === \"facility\" || \"geometric\"): the\n // lines and the shape render at their zone's place; on a zone change each\n // glides there from wherever it is on screen, the full 0.9s every time.\n const shapeRefs = useRef<(HTMLDivElement | null)[]>([]);\n const shapeAnims = useRef<(Animation | null)[]>([]);\n const shapePlaced = useRef[] | null>(null);\n const isBlueprint = variant === \"facility\" || variant === \"geometric\";\n useLayoutEffect(() => {\n if (!isBlueprint) {\n shapePlaced.current = null;\n return;\n }\n const targets = shapeTargets(shapeHoverZone);\n const previous = shapePlaced.current;\n shapePlaced.current = targets;\n if (!previous) return;\n targets.forEach((to, i) => {\n const el = shapeRefs.current[i];\n const before = previous[i];\n if (!el || Object.keys(to).every((key) => to[key] === before[key])) return;\n const running = shapeAnims.current[i];\n let from = before;\n if (running && running.playState === \"running\") {\n const cs = getComputedStyle(el);\n from = Object.fromEntries(Object.keys(to).map((key) => [key, cs.getPropertyValue(key)]));\n running.cancel();\n }\n shapeAnims.current[i] = typeof el.animate === \"function\" ? el.animate([from, to], GLIDE) : null;\n });\n }, [shapeHoverZone, isBlueprint]);\n\n const handleCopy = () => {\n if (typeof window !== \"undefined\" && navigator.clipboard) {\n navigator.clipboard.writeText(cliCommand);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n };\n\n const getAccentColor = (col?: string) => {\n if (!col || col === \"primary\" || col === \"default\") return undefined;\n const presets: Record = {\n lavender: \"#9b8afb\",\n indigo: \"#6366f1\",\n rose: \"#f43f5e\",\n emerald: \"#10b981\",\n zinc: \"#18181b\",\n };\n return presets[col] || col;\n };\n\n const resolvedColor = getAccentColor(color);\n const accentRgb = resolvedColor ? parseColor(resolvedColor) : null;\n\n const customStyle = {\n \"--hero-accent-text\": accentRgb\n ? `light-dark(${toCss(\n ensureContrast(accentRgb, LIGHT_SURFACE_LUM, 0),\n )}, ${toCss(ensureContrast(accentRgb, DARK_SURFACE_LUM, 255))})`\n : \"var(--primary)\",\n ...(resolvedColor ? { \"--primary\": resolvedColor } : {}),\n ...(accentRgb\n ? {\n \"--primary-foreground\": getAccentForeground(accentRgb),\n }\n : {}),\n } as React.CSSProperties;\n\n /* ═══════════════════════════════════════════════\n VARIANT: BENTO CASCADE INFINITE MOTION HERO\n ═══════════════════════════════════════════════ */\n if (variant === \"bento-cascade\" || variant === \"cascade\") {\n const bentoImages =\n images && images.length > 0\n ? images\n : sliderImages && sliderImages !== DEFAULT_SLIDER_IMAGES\n ? sliderImages\n : undefined;\n\n return (\n \n );\n }\n\n /* ═════════════════════════════════════════\n VARIANT: BREATHE CURVED ARCH MOTION HERO\n ═════════════════════════════════════════ */\n if (\n variant === \"breathe\" ||\n variant === \"hero-breathe\" ||\n variant === \"curved-cards\" ||\n variant === \"arch\"\n ) {\n const breatheImages =\n images && images.length > 0\n ? images\n : sliderImages && sliderImages !== DEFAULT_SLIDER_IMAGES\n ? sliderImages\n : undefined;\n\n const breatheBadgeText =\n badgeText === \"Next-Gen React Components\"\n ? \"Interactive Motion Architecture\"\n : badgeText;\n const breatheBadgeHref =\n !badgeHref || badgeHref === \"/docs\" || badgeHref === \"#\"\n ? \"#explore\"\n : badgeHref;\n const breatheSecLabel =\n secondaryActionLabel === \"Explore Blocks\"\n ? \"View Showroom\"\n : secondaryActionLabel;\n const breatheSecHref =\n secondaryActionHref === \"#features\" || secondaryActionHref === \"#\"\n ? \"#showroom\"\n : secondaryActionHref;\n\n return (\n \n );\n }\n\n /* ═════════════════════════════════════════\n VARIANT: SOLAR SNAPSHOT SUN CURSOR HERO\n ═════════════════════════════════════════ */\n if (\n variant === \"solar-snapshot\" ||\n variant === \"sun-cursor\" ||\n variant === \"solar\"\n ) {\n return (\n \n );\n }\n\n /* ═══════════════════════════════════════════════\n VARIANT: ORBIT 3D PHOTO RING HERO\n ═══════════════════════════════════════════════ */\n if (variant === \"orbit\" || variant === \"orbit-gallery\" || variant === \"orbit-ring\" || variant === \"orbit-hero\") {\n const orbitBadgeText = badgeText === \"Next-Gen React Components\" ? \"Identity & animation studio\" : badgeText;\n const orbitBadgeHref = badgeHref === \"/docs\" ? \"#\" : badgeHref;\n const orbitTitle = title || (titlePrefix === \"Build \" ? \"Movement is what\" : titlePrefix) || \"Movement is what\";\n const orbitTitleAccent = titleAccent || (titleSuffix ? titleSuffix : \"people notice first.\");\n const orbitSubtitle =\n subtitle === \"A meticulous library of React components & interactive blocks, engineered for seamless performance with Tailwind CSS, TypeScript, GSAP, and Motion.\"\n ? \"We design brand identities and the animation that brings them to life — from early sketches to the live release.\"\n : subtitle;\n const orbitPrimaryLabel = primaryActionLabel === \"Browse Components\" ? \"Work with us\" : primaryActionLabel;\n const orbitPrimaryHref = primaryActionHref === \"/docs\" ? \"#\" : primaryActionHref;\n const orbitSecondaryLabel = secondaryActionLabel === \"Star on GitHub\" ? \"View projects\" : secondaryActionLabel;\n const orbitSecondaryHref = secondaryActionHref === \"https://github.com/AlgorizeTech\" ? \"#\" : secondaryActionHref;\n const orbitImages = images && images.length > 0 ? images : sliderImages && sliderImages !== DEFAULT_SLIDER_IMAGES ? sliderImages : DEFAULT_ORBIT_IMAGES;\n const orbitHighlights = highlights ?? DEFAULT_ORBIT_HIGHLIGHTS;\n const orbitDuration = duration || 36;\n const count = orbitImages.length;\n\n return (\n \n\n {/* The orbit: every card is rotated about the ring's centre, pushed out\n by the radius, then counter-rotated so it stays upright. The radius\n grows with the breakpoint. */}\n \n\n
\n
\n {/* ---- Copy and actions ---- */}\n
\n {orbitBadgeText && (\n \n
\n \n {orbitBadgeText}\n
\n \n )}\n\n

\n {orbitTitle}\n {orbitTitleAccent && (\n \n {orbitTitleAccent}\n \n )}\n

\n\n {orbitSubtitle && (\n
\n

{orbitSubtitle}

\n
\n )}\n\n
\n {orbitPrimaryLabel && (\n \n {orbitPrimaryLabel}\n \n \n )}\n\n {orbitSecondaryLabel && (\n \n {orbitSecondaryLabel}\n \n \n )}\n
\n\n {orbitHighlights.length > 0 && (\n
\n {orbitHighlights.map((h) => (\n
\n
\n {h.label}\n
\n ))}\n
\n )}\n
\n\n {/* ---- The ring ---- */}\n
\n \n
\n\n {orbitImages.map((src, i) => (\n \n \n \n
\n
\n ))}\n
\n
\n
\n \n \n );\n }\n\n /* ═══════════════════════════════════════════════\n VARIANT 4: MODERN PET SHOP & ANIMAL CARE HERO (MINIMAL, NO SHADOWS & NO PET ICONS)\n ═══════════════════════════════════════════════ */\n if (variant === \"pet-shop\" || variant === \"glow-arc\") {\n const petTitlePrefix =\n titlePrefix === \"Build \" ? \"All Pet Essentials\" : titlePrefix;\n const petTitleAccent =\n titleSuffix || \"Delivered To Your Door\";\n const petSubtitle =\n subtitle ===\n \"A meticulous library of React components & interactive blocks, engineered for seamless performance with Tailwind CSS, TypeScript, GSAP, and Motion.\"\n ? \"Discover nutritionist-crafted organic meals, orthopedic beds, durable interactive toys, and instant 24/7 vet consultations delivered to your door.\"\n : subtitle;\n\n const petPrimaryAction =\n primaryActionLabel === \"Browse Components\"\n ? \"Shop Dog Supplies\"\n : primaryActionLabel;\n\n const petSecondaryAction =\n secondaryActionLabel === \"Star on GitHub\"\n ? \"Shop Cat Care\"\n : secondaryActionLabel;\n\n const dogImage =\n petImage ||\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790150479/photo-1543466835-00a7907e9de1-1790150482273.jpg\";\n const catImage =\n secondaryPetImage ||\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790150481/photo-1514888286974-6c03e2ca1dba-1790150482276.jpg\";\n\n return (\n \n {/* Subtle Dynamic Theme Accent Glow Orbs */}\n
\n
\n\n
\n
\n \n {/* Image Column: Top on Mobile (order-1), Left on Desktop (lg:order-1) */}\n
\n
\n \n {/* Outer Concentric Border Accent Ring */}\n
\n \n {/* Central Large Circular Image Mask */}\n
\n \n
\n\n {/* Top-Left Floating Feature Pill */}\n
\n
\n
\n

{featurePillText}

\n

Verified Doctors

\n
\n
\n\n {/* Bottom-Right Cat Avatar Pill */}\n
\n
\n \"Cat\n
\n
\n

Cat Essentials

\n

Same Day Delivery

\n
\n
\n\n {/* Center Left Rating Pill */}\n
\n {ratingText}\n
\n\n
\n
\n\n {/* Content Column: Bottom on Mobile (order-2), Right on Desktop (lg:order-2) */}\n
\n \n {/* Category Pills Header */}\n
\n {badgeTags?.[0] && (\n
\n \n {badgeTags[0]}\n
\n )}\n {badgeTags?.[1] && (\n
\n \n {badgeTags[1]}\n
\n )}\n
\n\n {/* Main Heading */}\n

\n {petTitlePrefix}\n \n {petTitleAccent}\n \n

\n\n {/* Subtitle */}\n {petSubtitle && (\n

\n {petSubtitle}\n

\n )}\n\n {/* Quick Pet Category Select Pills */}\n {categories && categories.length > 0 && (\n
\n Popular:\n {categories.map((cat, i) => (\n \n {cat}\n \n ))}\n
\n )}\n\n {/* Action Buttons */}\n
\n \n \n {petPrimaryAction}\n \n \n\n \n {petSecondaryAction}\n \n \n
\n\n {/* Trust Footer Line */}\n
\n
\n \n Vet Verified Ingredients\n
\n
\n \n Free Shipping $35+\n
\n
\n\n
\n\n
\n
\n \n );\n }\n\n /* ═══════════════════════════════════════════════\n VARIANT 5: TRUSTED KITS & MEDICAL CARE HERO (EXACTLY MATCHES REFERENCE IMAGE)\n ═══════════════════════════════════════════════ */\n if (variant === \"doctor\") {\n const docTitlePrefix =\n titlePrefix === \"Build \" ? \"Trusted Kits\" : titlePrefix;\n const docTitleAccent =\n titleSuffix || \"Real Results\";\n const docSubtitle =\n subtitle ===\n \"A meticulous library of React components & interactive blocks, engineered for seamless performance with Tailwind CSS, TypeScript, GSAP, and Motion.\"\n ? \"Order medical-grade test kits, return by mail, and get fast, accurate, secure results online — anytime, anywhere, hassle-free.\"\n : subtitle;\n\n const docPrimaryAction =\n primaryActionLabel === \"Browse Components\"\n ? \"Order Kit\"\n : primaryActionLabel;\n\n const docSecondaryAction =\n secondaryActionLabel === \"Star on GitHub\"\n ? \"See How Its Work\"\n : secondaryActionLabel;\n\n const doctorMainImage =\n petImage ||\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790158809/photo-1622253692010-333f2da6031d-1790158812201.jpg\";\n\n const doctorSubImage =\n secondaryPetImage ||\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790150483/photo-1576091160399-112ba8d25d1d-1790150482281.jpg\";\n\n const labTestImage =\n mainImage === DEFAULT_MAIN_IMAGE\n ? \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790150483/photo-1584036561566-baf8f5f1b144-1790150482282.jpg\"\n : mainImage;\n\n const inlineBadgeImage =\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_200,c_limit/v1790150479/photo-1471864190281-a93a3070b6de-1790150482274.jpg\";\n\n const stat1Val = ratingText === \"4.9 ★ Rated\" ? \"100%\" : ratingText;\n const stat1Label = badgeTags?.[0] === \"Certified Organic & Vet Approved\" ? \"Safe & Private Results\" : badgeTags?.[0] || \"Safe & Private Results\";\n const stat2Val = featurePillText === \"24/7 Vet Care\" ? \"98%\" : featurePillText;\n const stat2Label = badgeTags?.[1] === \"4.9 Star Rated\" ? \"Satisfaction rate\" : badgeTags?.[1] || \"Satisfaction rate\";\n\n return (\n \n \n
\n \n {/* LEFT COLUMN: Title, Subtitle, CTA & Stats */}\n
\n \n {/* Heading Section */}\n
\n

\n {docTitlePrefix}\n

\n
\n \n \n \n \n {docTitleAccent}\n \n
\n
\n\n {/* Subtitle with Left Border Line Accent */}\n {docSubtitle && (\n
\n

\n {docSubtitle}\n

\n
\n )}\n\n {/* Action Buttons Row (Full Width on mobile/sm, auto on desktop lg) */}\n
\n \n \n {docPrimaryAction}\n \n\n \n {docSecondaryAction}\n \n
\n\n {/* Stats Footer Row */}\n
\n
\n

\n {stat1Val}\n

\n
\n \n {stat1Label}\n
\n
\n\n
\n

\n {stat2Val}\n

\n
\n \n {stat2Label}\n
\n
\n
\n\n
\n\n {/* RIGHT COLUMN: Dark Container with Images Grid & Floating Cards */}\n
\n \n {/* Dark Accent Panel (a deep shade of the accent) */}\n
\n\n {/* Main Images Layout Grid */}\n
\n \n {/* Doctor Consultation Portrait Card */}\n \n
\n \n
\n
\n\n {/* Right Stacked Images inside Dark Panel */}\n
\n \n {/* Top Right Patient Care Portrait Image */}\n \n \n
\n\n {/* Bottom Right Lab Kit Test Image */}\n \n \n
\n

\n Lab-Trusted.
Doorstep Delivered.\n

\n
\n
\n\n
\n\n
\n\n {/* Bottom Floating Delivery Card */}\n \n
\n
\n \n
\n
\n \n
\n
\n\n
\n
\n

\n Fast & Reliable Delivery\n

\n
\n {/* User Profile Avatar Stack (5 images with 3px gap) */}\n
\n {[\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_100,c_limit/v1790150483/photo-1534528741775-53994a69daeb-1790150482280.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_100,c_limit/v1790150480/photo-1507003211169-0a1dd7228f2d-1790150482276.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_100,c_limit/v1790150478/photo-1544005313-94ddf0286df2-1790150482273.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_100,c_limit/v1790150480/photo-1506794778202-cad84cf45f1d-1790150482275.jpg\",\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_100,c_limit/v1790150481/photo-1517841905240-472988babdf9-1790150482277.jpg\",\n ].map((imgSrc, i) => (\n \n ))}\n
\n
\n
\n\n
\n\n
\n \n );\n }\n\n /* ═══════════════════════════════════════════════\n VARIANT 3: CLEAN SOLID WHITE/DARK PARENT WITH SOLID ACCENT FLIP WORD (NO GRADIENT)\n ═══════════════════════════════════════════════ */\n if (variant === \"slider\") {\n const sliderBadgeText =\n badgeText === \"Next-Gen React Components\"\n ? \"Full-Stack Software Engineer\"\n : badgeText;\n const sliderTitlePrefix =\n titlePrefix === \"Build \" ? \"Building & Engineering\" : titlePrefix;\n const sliderTitleAccent =\n titleSuffix ||\n (titlePrefix === \"Build \"\n ? \"Full-Stack Digital Products\"\n : \"Interactive Experiences\");\n const sliderSubtitle =\n subtitle ===\n \"A meticulous library of React components & interactive blocks, engineered for seamless performance with Tailwind CSS, TypeScript, GSAP, and Motion.\"\n ? \"Full-stack software engineer dedicated to building scalable web applications, modern SaaS platforms, and high-performance digital experiences.\"\n : subtitle;\n const sliderPrimaryActionLabel =\n primaryActionLabel === \"Browse Components\"\n ? \"Explore Projects\"\n : primaryActionLabel;\n const sliderSecondaryActionLabel =\n secondaryActionLabel === \"Star on GitHub\"\n ? \"Contact Me\"\n : secondaryActionLabel;\n const sliderSecondaryActionHref =\n secondaryActionHref === \"https://github.com/AlgorizeTech\"\n ? \"#contact\"\n : secondaryActionHref;\n\n\n const devLabels = [\n \"3D Web App\",\n \"WebGL Experience\",\n \"Three.js Scene\",\n \"3D Product UI\",\n \"Interactive 3D\",\n \"Spatial Web\",\n ];\n\n return (\n \n {/* Keyframe style for continuous marquee slider */}\n \n\n {/* Grid Background Overlay */}\n
\n\n
\n
\n \n {/* Left Section (Span 12 on mobile/md, Span 7 on lg) */}\n
\n \n {/* Main Content Box */}\n
\n \n {sliderBadgeText && (\n \n
\n \n {sliderBadgeText}\n
\n \n )}\n\n {/* Clean Static 2-Line Developer Heading */}\n

\n {sliderTitlePrefix}\n \n {sliderTitleAccent}\n \n

\n\n {sliderSubtitle && (\n

\n {sliderSubtitle}\n

\n )}\n\n {/* Actions & Copy Line */}\n
\n {sliderPrimaryActionLabel && (\n \n {sliderPrimaryActionLabel}\n \n \n )}\n\n {sliderSecondaryActionLabel && (\n \n {sliderSecondaryActionLabel.toLowerCase().includes(\"github\") ? (\n \n ) : sliderSecondaryActionLabel.toLowerCase().includes(\"resume\") || sliderSecondaryActionLabel.toLowerCase().includes(\"cv\") ? (\n \n ) : (\n \n )}\n {sliderSecondaryActionLabel}\n \n )}\n
\n
\n\n {/* Bottom Section: Continuous Marquee Developer Code Slider */}\n
\n
\n {[...sliderImages, ...sliderImages].map((img, idx) => (\n \n \n
\n \n {devLabels[idx % devLabels.length]}\n \n
\n
\n ))}\n
\n
\n\n
\n\n {/* Right Section (Span 12 on mobile/md, Span 5 on lg) */}\n
\n
\n \n {/* Main Developer Visual Image */}\n \n\n {/* Gradient Overlay for Text Contrast */}\n
\n\n {/* Developer Floating Badge Top Left */}\n
\n
\n \n
\n
\n

100% Type-Safe

\n

TypeScript & Tailwind CSS

\n
\n
\n\n {/* Developer Floating Badge Bottom Right */}\n
\n
\n
\n

Developer Experience

\n

Copy-Paste Ready

\n
\n
\n\n
\n
\n\n
\n
\n \n );\n }\n\n /* ═══════════════════════════════════════════════\n VARIANT 6: PRECISION FACILITY & CAD BLUEPRINT GRID HERO (INTERACTIVE MORPHING SHAPE)\n ═══════════════════════════════════════════════ */\n if (variant === \"facility\" || variant === \"geometric\") {\n const isDefaultFacilityTitle =\n !titlePrefix ||\n titlePrefix === \"Build \" ||\n titlePrefix.includes(\"Precision facility\");\n\n const facilityTitleLines: string[] = isDefaultFacilityTitle\n ? [\n \"Precision facility\",\n \"services. Certified. For\",\n \"environments that can't fail.\",\n ]\n : (titlePrefix + (titleSuffix ? ` ${titleSuffix}` : \"\")).includes(\"\\n\")\n ? (titlePrefix + (titleSuffix ? ` ${titleSuffix}` : \"\")).split(\"\\n\")\n : [\n \"Precision facility\",\n \"services. Certified. For\",\n \"environments that can't fail.\",\n ];\n\n const facSubtitle =\n subtitle ===\n \"A meticulous library of React components & interactive blocks, engineered for seamless performance with Tailwind CSS, TypeScript, GSAP, and Motion.\"\n ? \"Certified, data-driven facility services across mission-critical environments.\"\n : subtitle;\n\n const facPrimaryAction =\n primaryActionLabel === \"Browse Components\"\n ? \"Request a facility audit\"\n : primaryActionLabel;\n\n // Where the grid lines and the shape rest for the current hover zone;\n // the glide between zones is `GLIDE`, run by the layout effect above.\n const shape = shapeTargets(shapeHoverZone) as React.CSSProperties[];\n\n return (\n \n
\n {/* LEFT COLUMN: Heading at top, Subtitle + CTA button at bottom */}\n
\n {/* Heading: Always structured in exact 3 lines */}\n
\n

\n {facilityTitleLines.map((line, idx) => (\n \n {line}\n \n ))}\n

\n
\n\n {/* Subtitle & CTA button */}\n
\n
\n {facSubtitle && (\n

\n {facSubtitle}\n

\n )}\n\n {facPrimaryAction && (\n \n \n {facPrimaryAction}\n \n \n \n \n \n )}\n
\n
\n
\n\n {/* RIGHT COLUMN: Interactive Box Grid with Morphing Polygon locked to Border */}\n setShapeHoverZone(\"idle\")}\n >\n {/* Interactive Hover Trigger Zones across 3 columns (No background color change) */}\n
\n {/* Left Column (Left Box): Hovering here slightly shrinks the shape and its border */}\n setShapeHoverZone(\"left\")}\n title=\"Hover left box to contract\"\n />\n {/* Center Column (Center Box): Hovering here returns shape and border to resting state */}\n setShapeHoverZone(\"center\")}\n title=\"Resting state\"\n />\n {/* Right Column (Right Box): Hovering here slightly expands shape width and height */}\n setShapeHoverZone(\"right\")}\n title=\"Hover right box to expand\"\n />\n
\n\n {/* Grid Lines — each sits at its hover zone's place (see `shapeTargets`) */}\n {/* Top horizontal grid line - moves symmetrically with shape top */}\n {\n shapeRefs.current[0] = el;\n }}\n className=\"absolute left-0 right-0 h-px bg-primary/20 dark:bg-primary/30 transition-colors duration-300 z-10 pointer-events-none\"\n style={shape[0]}\n />\n {/* Bottom horizontal grid line - moves symmetrically with shape bottom */}\n {\n shapeRefs.current[1] = el;\n }}\n className=\"absolute left-0 right-0 h-px bg-primary/20 dark:bg-primary/30 transition-colors duration-300 z-10 pointer-events-none\"\n style={shape[1]}\n />\n\n {/* Moving Left Vertical Grid Line - attached to shape left, moves in 4-way symmetry */}\n {\n shapeRefs.current[2] = el;\n }}\n className=\"absolute top-0 bottom-0 w-px bg-primary/20 dark:bg-primary/30 transition-colors duration-300 z-10 pointer-events-none\"\n style={shape[2]}\n />\n\n {/* Moving Right Vertical Grid Line - attached to shape right, moves in 4-way symmetry */}\n {\n shapeRefs.current[3] = el;\n }}\n className=\"absolute top-0 bottom-0 w-px bg-primary/20 dark:bg-primary/30 transition-colors duration-300 z-10 pointer-events-none\"\n style={shape[3]}\n />\n\n {/* Animated Central Morphing Shape - strictly bounded between all 4 moving grid lines */}\n {\n shapeRefs.current[4] = el;\n }}\n className=\"absolute z-10 pointer-events-none\"\n style={shape[4]}\n >\n {/* Geometric chamfered polygon */}\n \n\n {/* Top-Right Control Anchor Square - exactly on (xRight, top) */}\n
\n\n {/* Bottom-Left Control Anchor Square - exactly on (24%, bottom) */}\n
\n
\n
\n
\n \n );\n }\n\n /* ═══════════════════════════════════════════════\n VARIANT 7: ATMOSPHERIC CYCLONE / RADAR VORTEX HERO (MATCHES CLIMATE RISK REFERENCE)\n ═══════════════════════════════════════════════ */\n if (variant === \"vortex\" || variant === \"radar\" || variant === \"cyclone\") {\n const vortexEyebrow = eyebrow || \"CLIMATE RISK, PER PARCEL\";\n const vortexTitle =\n titlePrefix === \"Build \"\n ? \"One street,\\none storm,\\ntwo prices\"\n : titlePrefix + (titleSuffix ? ` ${titleSuffix}` : \"\");\n const vortexSubtitle =\n subtitle ===\n \"A meticulous library of React components & interactive blocks, engineered for seamless performance with Tailwind CSS, TypeScript, GSAP, and Motion.\"\n ? \"Flood, wildfire and wind priced for one\\naddress, not the postcode around it\"\n : subtitle;\n const vortexPrimaryAction =\n primaryActionLabel === \"Browse Components\"\n ? \"Score an address\"\n : primaryActionLabel;\n const activeMetrics = metrics || DEFAULT_VORTEX_METRICS;\n const vortexHudTitle = hudTitle || \"GUST FIELD\";\n const vortexHudTime = hudTime || \"T+36:25\";\n const activeHudMetrics = hudMetrics || DEFAULT_HUD_METRICS;\n const vortexBg = resolvedColor || \"#0052cc\";\n\n return (\n \n
\n {/* LEFT COLUMN: Monospace Eyebrow, Main 3-line Headline, Subtitle, CTA Button & Bottom 3 Metrics */}\n
\n
\n {/* Eyebrow */}\n {vortexEyebrow && (\n

\n {vortexEyebrow}\n

\n )}\n\n {/* Main Headline */}\n

\n {vortexTitle}\n

\n\n {/* Subtitle */}\n {vortexSubtitle && (\n

\n {vortexSubtitle}\n

\n )}\n\n {/* Actions */}\n
\n \n {vortexPrimaryAction}\n \n\n {secondaryActionLabel && (\n \n {secondaryActionLabel}\n \n )}\n
\n
\n\n {/* Bottom 3 Metrics Grid */}\n
\n {activeMetrics.map((item, idx) => (\n
\n

\n {item.value}\n

\n

\n {item.label}\n

\n
\n ))}\n
\n
\n\n {/* RIGHT COLUMN: Rotating Cyclone Vortex Radar & Corner Reticle & Telemetry HUD */}\n
\n {/* Radar Screen Frame */}\n
\n {/* Top-Left HUD Targeting Crosshair Reticle */}\n
\n \n \n \n \n \n \n \n \n
\n\n {/* Rotating Vortex Canvas */}\n
\n \n
\n\n {/* Bottom-Right Telemetry HUD Card */}\n
\n
\n
\n \n {vortexHudTitle}\n
\n \n {vortexHudTime}\n \n
\n
\n {activeHudMetrics.map((item, idx) => (\n
\n \n {item.label}\n \n \n {item.value}\n \n
\n ))}\n
\n
\n
\n
\n
\n \n );\n }\n\n /* ═══════════════════════════════════════════════\n VARIANTS 1 & 2: BOUNCE & TYPING (CENTERED HERO)\n ═══════════════════════════════════════════════ */\n return (\n \n \n {/* Radial Background Glow */}\n \n {/* Grid Mask Background */}\n
\n\n
\n
\n {/* Top Pill Badge */}\n {badgeText && (\n \n
\n \n \n {badgeText}\n \n
\n \n )}\n\n {/* Dynamic Animated Title Word */}\n

\n \n {titlePrefix}{\" \"}\n \n Interactive\n \n \n\n \n\n {titleSuffix && {titleSuffix}}\n

\n\n {/* Subtitle Paragraph */}\n {subtitle && (\n

\n {subtitle}\n

\n )}\n\n {/* CLI Command Box */}\n {cliCommand && (\n
\n \n \n \n {cliCommand}\n \n
\n {copied ? (\n \n ) : (\n \n )}\n
\n \n
\n )}\n\n {/* Actions */}\n
\n {primaryActionLabel && (\n \n {primaryActionLabel}\n \n \n )}\n\n {secondaryActionLabel && (\n \n {secondaryActionLabel}\n \n \n )}\n
\n
\n
\n \n );\n },\n);\n\nHeroBlock.displayName = \"HeroBlock\";\nexport { BentoCascadeHero, type BentoCascadeCardItem } from \"./BentoCascadeHeroBlock\";\nexport { BreatheHero, type BreatheCardItem, type BreatheHeroProps } from \"./BreatheHeroBlock\";\nexport default HeroBlock;\n", "type": "registry:component", "target": "components/custom/blocks/HeroBlock.tsx" } ], "docs": "Named export: HeroBlock. Everything is a prop — `variant` switches between 'orbit', 'bounce', 'typing', 'slider', 'pet-shop', 'doctor', and 'facility', with interactive animations, theme color support, and responsive layouts.", "categories": [ "marketing" ], "type": "registry:component" }