Blur Reveal Deck

Text 73

About

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.

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

Code

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

Usage.tsx

import { 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>
  );
}