Components
Loading preview...
A mousemove effect that reveals text content by dragging the cursor across the card. As seen on Diagram's website.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/diagram-card"use client";
import React from "react";
import {
TextRevealCard,
TextRevealCardTitle,
TextRevealCardDescription,
} from "../components/ui/diagram-card";
export default function DiagramCardDemo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-[#0E0E10] p-8">
<TextRevealCard
text="You know the business"
revealText="I know the chemistry"
>
<TextRevealCardTitle>
Sometimes, you just need to see it.
</TextRevealCardTitle>
<TextRevealCardDescription>
This is a text reveal card. Hover over the card to reveal the hidden
text.
</TextRevealCardDescription>
</TextRevealCard>
</div>
);
}