"use client"; import React, { useRef, useEffect, useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import Image from "next/image"; import gsap from "gsap"; import { Button } from "@/components/ui/button"; export interface CardItem { src?: string; alt?: string; } export interface CardCarouselHeroProps { category?: string; title?: string; subtitle?: string; cards?: CardItem[]; } export function CardCarouselHero({ category = "Innovation Meets Simplicity", title = "Build Exceptional Interfaces", subtitle = "Use our component library powered by Shadcn UI & Tailwind CSS to craft beautiful, fast, and accessible UIs.", cards = [], }: CardCarouselHeroProps) { const totalCards = cards.length || 5; const placeholders = Array.from({ length: totalCards }).map(() => ({ src: undefined, alt: "", })); const data = cards.length > 0 ? cards : placeholders; const cardRefs = useRef([]); const [activeIndex, setActiveIndex] = useState(0); const animateCards = () => { const middleIndex = Math.floor(data.length / 2); gsap.set(cardRefs.current, { x: 0, scale: 0.5, opacity: 0, transformOrigin: "center bottom", }); const tl = gsap.timeline({ defaults: { duration: 0.6, ease: "power3.out" }, }); tl.to(cardRefs.current[middleIndex], { x: 0, scale: 1, opacity: 1 }); for (let offset = 1; offset <= middleIndex; offset++) { const leftIndex = middleIndex - offset; const rightIndex = middleIndex + offset; const animations: gsap.TweenTarget[] = []; if (leftIndex >= 0) animations.push(cardRefs.current[leftIndex]); if (rightIndex < data.length) animations.push(cardRefs.current[rightIndex]); tl.to( animations, { x: (i, target) => { const idx = cardRefs.current.indexOf(target as HTMLDivElement); return (idx - middleIndex) * 120; }, scale: (i, target) => { const idx = cardRefs.current.indexOf(target as HTMLDivElement); return 1 - Math.abs(idx - middleIndex) * 0.1; }, opacity: 1, }, "+=0.1", ); } }; useEffect(() => { animateCards(); }, [activeIndex]); return (

{/* Category */} {/* Title */}

{title}

{/* Subtitle */}

{subtitle}

{/* Card Carousel */}

{data.map((card, idx) => { const middleIndex = Math.floor(data.length / 2); const distance = Math.abs(idx - middleIndex); return (

{ if (el) cardRefs.current[idx] = el; }} className="absolute" style={{ zIndex: data.length - distance }} > {card.src && ( {card.alt

)}

); })}

); }

Prop	Type	Default	Description
`title`	`string`	`"Discover Amazing Features"`	The main heading text
`description`	`string`	`"Explore our collection of powerful components..."`	The description text
`cards`	`array`	`[...]`	Array of card objects with title, description, and image
`buttons`	`array`	`[...]`	Array of button objects with label, href, and variant

Card Carousel Hero

Create Stunning Interfaces

Installation

Props

Create Stunning Interfaces