Components
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.
Loading preview...
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>
);
}