Components
Loading preview...
A beautiful and interactive card deck carousel for React and Tailwind CSS. Users can swipe or click through a stacked deck of cards where the top card smoothly falls away to reveal the next one. Each card change triggers a clean, animated text blur-reveal effect.
npx shadcn@latest add https://21st.dev/r/y.lamfadelpro/blur-reveal-deckimport { DeckCarousel } from "../components/ui/blur-reveal-deck";
const ITEMS = [
{
title: "Blur-reveal text",
text: "Words fade from blurred to sharp, one after another.",
},
{
title: "Falling cards",
text: "The top card drops away before the next one surfaces.",
},
{
title: "Swipe or click",
text: "Drag on touch, or use the arrows and dots to navigate.",
},
{
title: "Scroll-triggered",
text: "Animations wait until the deck enters the viewport.",
},
];
export default function Demo() {
return (
<div
style={{
boxSizing: "border-box",
width: "100%",
minHeight: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "2rem 1.5rem",
background: "#f8fafc",
}}
>
<div style={{ width: "100%", maxWidth: "36rem", height: "450px" }}>
<DeckCarousel items={ITEMS} />
</div>
</div>
);
}