{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bento-cascade-hero", "title": "Bento Cascade Hero", "author": "AlgorizeTech", "description": "Ask the user to pick one of 16 hero variants: https://avaraui.com/view/hero. This is the Bento cascade hero. Skip the question if the user already named one. An infinite vertical bento marquee hero section that loops seamlessly on the browser compositor. Staggered multi-column cards, rich media tiles, soft edge fade masks, and responsive motion with zero visible reset jumps.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://avaraui.com/r/avatar-stack.json", "https://avaraui.com/r/button.json", "utils" ], "files": [ { "path": "src/components/custom/blocks/BentoCascadeHeroBlock.tsx", "content": "\"use client\";\n\nimport React, { forwardRef, useMemo, useRef } from \"react\";\nimport { ArrowUpRight, Star } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { accentTokens } from \"@/lib/accent\";\nimport {\n Avatar,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupTooltip,\n AvatarImage,\n type StackAvatar,\n} from \"./AvatarStackBlock\";\nimport Button from \"./Button\";\n\n/* ═══════════════════════════════════════════════\n TYPES & INTERFACES\n ═══════════════════════════════════════════════ */\n\nexport interface BentoCascadeCardItem {\n id?: string | number;\n image: string;\n title?: string;\n subtitle?: string;\n tag?: string;\n href?: string;\n}\n\nexport interface BentoCascadeHeroProps\n extends React.HTMLAttributes {\n avatars?: (string | StackAvatar)[];\n reviewsCount?: string;\n rating?: number;\n title?: string;\n titleAccent?: string;\n subtitle?: string;\n primaryActionLabel?: string;\n primaryActionHref?: string;\n secondaryActionLabel?: string;\n secondaryActionHref?: string;\n supportTitle?: string;\n supportSubtitle?: string;\n ratingTitle?: string;\n ratingSubtitle?: string;\n cards?: BentoCascadeCardItem[];\n images?: string[];\n speed?: number; // seconds for one complete loop cycle\n pauseOnHover?: boolean;\n accent?: string;\n color?: string;\n radius?: string | number;\n linkComponent?: React.ElementType;\n imageComponent?: React.ElementType;\n}\n\n/* ═══════════════════════════════════════════════\n DEFAULT AVATARS\n ═══════════════════════════════════════════════ */\n\nexport const DEFAULT_AVATARS: StackAvatar[] = [\n {\n src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,c_limit/v1790145139/pexels-photo-1036623-1790145143487.jpg\",\n alt: \"Elena Vance\",\n name: \"Elena Vance\",\n role: \"Expedition Leader\",\n },\n {\n src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,c_limit/v1790145142/pexels-photo-2043590-1790145143488.jpg\",\n alt: \"Marcus Chen\",\n name: \"Marcus Chen\",\n role: \"Alpine Guide\",\n },\n {\n src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,c_limit/v1790145139/pexels-photo-1587009-1790145143488.jpg\",\n alt: \"Sarah Jenkins\",\n name: \"Sarah Jenkins\",\n role: \"Trail Specialist\",\n },\n {\n src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,c_limit/v1790082180/pexels-photo-1520760-1790082180553.jpg\",\n alt: \"David Miller\",\n name: \"David Miller\",\n role: \"Nature Photographer\",\n },\n];\n\n/* ═══════════════════════════════════════════════\n DEFAULT CLOUDINARY NATURE CARDS\n ═══════════════════════════════════════════════ */\n\nexport const DEFAULT_BENTO_CARDS: BentoCascadeCardItem[] = [\n {\n image:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1000,c_limit/v1790146210/photo-1506744038136-46273834b3fb-1790146212208.jpg\",\n title: \"Yosemite Sanctuary\",\n subtitle: \"Glacial valley and mirror lake reflections\",\n tag: \"Sanctuary\",\n },\n {\n image:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790145141/photo-1448375240586-882707db888b-1790145143491.jpg\",\n title: \"Evergreen Canopy\",\n subtitle: \"Sunlit morning mist in the pine grove\",\n tag: \"Woodlands\",\n },\n {\n image:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\",\n title: \"Misty Mountain Ridge\",\n subtitle: \"Low-hanging cloud bank at dawn\",\n tag: \"Highlands\",\n },\n {\n image:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790146211/photo-1441974231531-c6227db76b6e-1790146212212.jpg\",\n title: \"Redwood Sunbeam Trail\",\n subtitle: \"Ancient forest canopy illuminated by morning light\",\n tag: \"Forest\",\n },\n {\n image:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1000,c_limit/v1790146210/photo-1501785888041-af3ef285b470-1790146212207.jpg\",\n title: \"Emerald Alpine Lake\",\n subtitle: \"Crystal turquoise meltwater enclosed by ridges\",\n tag: \"Alpine\",\n },\n {\n image:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790146210/photo-1472214103451-9374bd1c798e-1790146212205.jpg\",\n title: \"Verdant Foothills\",\n subtitle: \"Rolling green pastures and open horizons\",\n tag: \"Meadows\",\n },\n {\n image:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790158813/photo-1433086966358-54859d0ed716-1790158812209.jpg\",\n title: \"Cascading Gorge\",\n subtitle: \"Lush suspension bridge over roaring waterfalls\",\n tag: \"Wilderness\",\n },\n {\n image:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_800,c_limit/v1790145140/photo-1426604966848-d7adac402bff-1790145143490.jpg\",\n title: \"Sunset Peak\",\n subtitle: \"Evening golden hour reflections on rocky bluffs\",\n tag: \"Horizon\",\n },\n];\n\n/* ═══════════════════════════════════════════════\n BENTO CARD COMPONENT\n ═══════════════════════════════════════════════ */\n\ninterface BentoCardProps {\n card: BentoCascadeCardItem;\n className?: string;\n heightClass?: string;\n imageComponent?: React.ElementType;\n linkComponent?: React.ElementType;\n}\n\nfunction BentoCard({\n card,\n className,\n heightClass = \"h-[150px] sm:h-[200px]\",\n imageComponent: ImageComp,\n linkComponent: LinkComp,\n}: BentoCardProps) {\n const Comp = card.href ? LinkComp || \"a\" : \"div\";\n const linkProps = card.href ? { href: card.href } : {};\n\n return (\n \n {/* Background Cloudinary Nature Image with Smooth Zoom on Hover (zero container jump) */}\n {ImageComp ? (\n \n ) : (\n \n )}\n\n {/* Ambient Depth Scrim Gradients */}\n
\n
\n\n {/* Top Floating Bar: Tag Pill + Interactive Arrow */}\n
\n {card.tag ? (\n \n \n {card.tag}\n \n ) : (\n
\n )}\n\n
\n \n
\n
\n\n {/* Bottom Content Area: Title & Subtitle */}\n
\n {card.title && (\n

\n {card.title}\n

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

\n {card.subtitle}\n

\n )}\n
\n\n {/* Top-edge subtle inner highlight line */}\n
\n \n );\n}\n\n/* ═══════════════════════════════════════════════\n MAIN COMPONENT: BentoCascadeHero\n ═══════════════════════════════════════════════ */\n\nexport const BentoCascadeHero = forwardRef(\n (\n {\n avatars = DEFAULT_AVATARS,\n reviewsCount = \"Based on 12K+ Explorers\",\n rating = 5,\n title = \"Explore wild nature & plan\",\n titleAccent = \"your next escape\",\n subtitle = \"Discover handpicked alpine sanctuaries, secluded glacial lakes, and ancient redwood trails tailored for unforgettable outdoor journeys.\",\n primaryActionLabel = \"Start exploring\",\n primaryActionHref = \"#explore\",\n secondaryActionLabel = \"View journeys\",\n secondaryActionHref = \"#destinations\",\n supportTitle = \"Expedition Support\",\n supportSubtitle = \"24/7 ranger guidance\",\n ratingTitle = \"Traveller Choice\",\n ratingSubtitle = \"Rated 4.9 by adventurers\",\n cards,\n images,\n speed = 30,\n pauseOnHover = true,\n accent,\n color,\n radius,\n linkComponent: LinkComp,\n imageComponent,\n className,\n style,\n ...props\n },\n ref\n ) => {\n const Comp = LinkComp || \"a\";\n const stageRef = useRef(null);\n\n // Map avatars to StackAvatar objects for Avara UI's AvatarStack component\n const stackAvatars: StackAvatar[] = useMemo(() => {\n if (!avatars || avatars.length === 0) return DEFAULT_AVATARS;\n return avatars.map((av, i) => {\n if (typeof av === \"string\") {\n return {\n src: av,\n alt: `Explorer ${i + 1}`,\n name: `Explorer ${i + 1}`,\n role: \"Verified Explorer\",\n };\n }\n return av;\n });\n }, [avatars]);\n\n // Resolve 8 cards with Cloudinary nature images & titles\n const resolvedCards = useMemo(() => {\n if (cards && cards.length >= 8) return cards;\n if (cards && cards.length > 0) {\n return Array.from({ length: 8 }, (_, i) => cards[i % cards.length]);\n }\n if (images && images.length > 0) {\n return Array.from({ length: 8 }, (_, i) => ({\n image: images[i % images.length],\n title: DEFAULT_BENTO_CARDS[i % DEFAULT_BENTO_CARDS.length]?.title,\n subtitle:\n DEFAULT_BENTO_CARDS[i % DEFAULT_BENTO_CARDS.length]?.subtitle,\n tag: DEFAULT_BENTO_CARDS[i % DEFAULT_BENTO_CARDS.length]?.tag,\n }));\n }\n return DEFAULT_BENTO_CARDS;\n }, [cards, images]);\n\n const handleMouseEnter = () => {\n if (!pauseOnHover || !stageRef.current) return;\n try {\n const anims = stageRef.current.getAnimations({ subtree: true });\n anims.forEach((anim) => anim.pause());\n } catch {\n // Handled via CSS fallback\n }\n };\n\n const handleMouseLeave = () => {\n if (!pauseOnHover || !stageRef.current) return;\n try {\n const anims = stageRef.current.getAnimations({ subtree: true });\n anims.forEach((anim) => anim.play());\n } catch {\n // Handled via CSS fallback\n }\n };\n\n const customStyle: React.CSSProperties = {\n ...accentTokens(accent || color),\n ...(radius !== undefined\n ? {\n \"--radius\": typeof radius === \"number\" ? `${radius}px` : radius,\n }\n : {}),\n ...style,\n };\n\n // The repeating 8-card bento cascade cycle\n const BentoCycle = () => (\n
\n {/* Row 1: Wide Card across 2 columns */}\n \n\n {/* Row 2: 2 Columns - Left has 2 stacked cards, Right has 1 tall card */}\n
\n {/* Left Column (2 Stacked Cards) */}\n
\n \n \n
\n\n {/* Right Column (1 Tall Card) */}\n \n
\n\n {/* Row 3: Next Wide Card */}\n \n\n {/* Row 4: Flipped Pattern - Left has 1 tall card, Right has 2 stacked cards */}\n
\n {/* Left Column (1 Tall Card) */}\n \n\n {/* Right Column (2 Stacked Cards) */}\n
\n \n \n
\n
\n
\n );\n\n return (\n \n {/* Ambient background glow */}\n
\n\n {/* Scoped CSS Keyframes for Infinite Smooth Bento Cascade Marquee */}\n \n\n
\n
\n {/* ═════════════════════════════════════════\n LEFT COLUMN: NATURE HERO CONTENT\n ═════════════════════════════════════════ */}\n
\n {/* Top Row: 1st Preview AvatarGroup (Shift on hover with spring physics) + Stars + Reviews */}\n
\n {/* Avara UI AvatarGroup (1st Preview - Shift on hover with spring physics) */}\n \n {stackAvatars.map((av, index) => (\n \n \n \n {(av.name ?? av.alt ?? \"U\").slice(0, 2)}\n \n \n {av.name ?? av.alt}\n \n \n ))}\n {/* Action + Button - always permanently circular rounded-full, never affected by global radius */}\n \n +\n
\n \n\n {/* Stars & Review Count */}\n
\n
\n {[...Array(rating)].map((_, i) => (\n \n ))}\n
\n \n {reviewsCount}\n \n
\n
\n\n {/* Main Headline - Strictly 2 lines on desktop, smoothly responsive on mobile */}\n

\n {title}\n \n {titleAccent}\n \n

\n\n {/* Subtitle with stylish left accent vertical line */}\n
\n

\n {subtitle}\n

\n
\n\n {/* Action Buttons using Avara UI's Button component from the Pricing & Action CTA preview */}\n
\n {primaryActionLabel && (\n \n \n {primaryActionLabel}\n \n \n )}\n\n {secondaryActionLabel && (\n \n \n }\n className=\"w-full xs:w-auto rounded-[var(--radius-xl,calc(var(--radius,0.625rem)+4px))] px-5 sm:px-6 py-3 sm:py-3.5 text-sm sm:text-base font-medium border-border/70 hover:border-primary/50 cursor-pointer justify-center\"\n >\n {secondaryActionLabel}\n \n \n )}\n
\n\n {/* Bottom Feature Badges: Support & Rating */}\n
\n {/* Feature 1: Support */}\n
\n
\n \n \n \n \n \n \n
\n
\n

\n {supportTitle}\n

\n

\n {supportSubtitle}\n

\n
\n
\n\n {/* Feature 2: Rating */}\n
\n
\n \n \n \n
\n
\n

\n {ratingTitle}\n

\n

\n {ratingSubtitle}\n

\n
\n
\n
\n
\n\n {/* ═════════════════════════════════════════\n RIGHT COLUMN: BENTO CASCADE STAGE (CLOUDINARY NATURE CARDS)\n ═════════════════════════════════════════ */}\n
\n {/* Outer Stage with Fade Masks & Hover Pause */}\n \n {/* Soft top & bottom gradient fade masks */}\n
\n
\n\n {/* Continuous Infinite Bento Cascade Track */}\n
\n {/* First Pass */}\n \n {/* Duplicate Pass for Seamless 100% Zero-Reset Loop */}\n \n
\n
\n
\n
\n
\n \n );\n }\n);\n\nBentoCascadeHero.displayName = \"BentoCascadeHero\";\n\nexport default BentoCascadeHero;\n", "type": "registry:component", "target": "components/custom/blocks/BentoCascadeHeroBlock.tsx" }, { "path": "src/lib/accent.ts", "content": "import type { CSSProperties } from \"react\";\n\n/**\n * Bridging the docs colour picker into a preview.\n *\n * Most blocks are already written against the `--primary` token (`bg-primary`,\n * `ring-primary/30`, `text-primary-foreground`…). Rather than teaching each one a\n * bespoke `color` prop, a demo can repoint that token for its own subtree and\n * every one of those classes follows along.\n */\n\n/** The swatches the picker offers, as concrete CSS colours. */\nconst PRESET_HEX: Record = {\n lavender: \"#9b8afb\",\n indigo: \"#6366f1\",\n rose: \"#f43f5e\",\n emerald: \"#10b981\",\n zinc: \"#18181b\",\n};\n\n/** True when the picker sits on \"Default\" — the page theme should win. */\nexport function isDefaultAccent(color?: string): boolean {\n return !color || color === \"primary\" || color === \"default\";\n}\n\n/**\n * Turns a picker value into a CSS colour, or null for \"Default\" — meaning\n * nothing should be overridden, so the theme (and the sidebar customizer)\n * keeps control.\n */\nexport function resolveAccent(color?: string): string | null {\n if (isDefaultAccent(color)) return null;\n return PRESET_HEX[color as string] ?? (color as string);\n}\n\n/**\n * The picker value in a form every block accepts. Blocks know the older swatch\n * names but not \"lavender\" — and since that is also a CSS named colour\n * (#e6e6fa), a block that passes unknown names straight through would paint\n * the wrong shade, while others fall back to a different palette. Demos that\n * hand the picker value to such a block run it through this first. Every\n * other value is returned untouched.\n */\nexport function toBlockColor(color: string): string;\nexport function toBlockColor(color: string | undefined): string | undefined;\nexport function toBlockColor(color?: string): string | undefined {\n return color === \"lavender\" ? PRESET_HEX.lavender : color;\n}\n\nfunction parseHex(input: string): [number, number, number] | 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 return null;\n}\n\n/** Legible foreground for content sitting on a filled `color` swatch. */\nexport function accentForeground(color: string): string {\n const rgb = parseHex(color);\n if (!rgb) return \"#ffffff\";\n const channel = (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 const luminance =\n 0.2126 * channel(rgb[0]) +\n 0.7152 * channel(rgb[1]) +\n 0.0722 * channel(rgb[2]);\n return luminance > 0.45 ? \"#09090b\" : \"#ffffff\";\n}\n\n/** The theme tokens a picked accent repoints, as `--name` → value. */\nexport function accentTokens(color?: string): Record {\n const resolved = resolveAccent(color);\n if (!resolved) return {};\n return {\n \"--primary\": resolved,\n \"--primary-foreground\": accentForeground(resolved),\n \"--ring\": resolved,\n };\n}\n\n/**\n * Inline style repointing `--primary` at the picked accent for one subtree.\n * `--primary-foreground` is derived alongside it, otherwise a light pick leaves\n * `text-primary-foreground` content unreadable on its own fill. Returns `{}` on\n * \"Default\" so the page theme still wins.\n */\nexport function accentStyle(color?: string): CSSProperties {\n return accentTokens(color) as CSSProperties;\n}\n", "type": "registry:component", "target": "lib/accent.ts" } ], "docs": "Named export: BentoCascadeHero (also available as variant='bento-cascade' in HeroBlock). Pass `title`, `titleAccent`, `subtitle`, `badgeText`, `primaryActionLabel`, `secondaryActionLabel`, `cards`, `images`, `speed`, and `pauseOnHover`.", "categories": [ "marketing", "layout", "scroll" ], "type": "registry:component" }