Components
Loading preview...
Mousemove effect to reveal text content at the bottom of the card.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/text-reveal-card"use client";
import React from "react";
import {
TextRevealCard,
TextRevealCardDescription,
TextRevealCardTitle,
} from "@/components/ui/text-reveal-card";
export function TextRevealCardPreview() {
return (
<div className="flex items-center justify-center bg-[#0E0E10] h-[40rem] rounded-2xl w-full">
<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>
);
}