Carousel

Cards

About

Fact Carousel This component displays a series of "facts" or snippets of information in an elegant, auto-playing, and interactive carousel. It features a subtle, animated aurora-like gradient background, smooth content transitions using Framer Motion, and clear navigation controls.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Carousel to your project and fits it to your theme.

Code

How Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FactCarousel, Fact } from "@/components/ui/carousel";

/**
 * Sample data for the carousel.
 * Each object provides content for one slide.
 */
const factsData: Fact[] = [
  {
    title: "Key facts today",
    description:
      "Consensys launched its Ethereum Layer 2 solution, Linea, distributing 9.36 billion LINEA tokens, with 85% for ecosystem growth.",
    cta: {
      label: "Analyze the impact",
      onClick: () => alert("Analyzing Consensys..."),
    },
  },
  {
    title: "Market Update",
    description:
      "Decentralized exchanges have surpassed a cumulative trading volume of $4 trillion, marking a significant milestone for DeFi adoption.",
    cta: {
      label: "View Market Data",
      onClick: () => alert("Redirecting to market data..."),
    },
  },
  {
    title: "Tech Innovation",
    description:
      "A new zero-knowledge proof algorithm has been developed that reduces verification times by over 60%, paving the way for more scalable dApps.",
    cta: {
      label: "Read Whitepaper",
      onClick: () => alert("Downloading whitepaper..."),
    },
  },
];

/**
 * A demo component to showcase the FactCarousel.
 */
export default function FactCarouselDemo() {
  return (
    <div className="flex items-center justify-center w-full h-full p-4 bg-background">
      <FactCarousel facts={factsData} autoplayInterval={8000} />
    </div>
  );
}