Text Reveal Card

Mousemove effect to reveal text content at the bottom of the card.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/text-reveal-card.json"

Install Manually

Copy and paste the following code in the same folder

TextRevealCard.vue
TextRevealStars.vue

API

Prop NameTypeDescription
classStringAdditional classes to be added to the card.
starsCountNumberControl the number of stars that are generated
starsClassStringAdditional classes to be added to the stars floating on content.
Slot NameDescription
headerString
textDisplay default text when the card is not hovered over.
revealTextText to be revealed when hovered over the card.

Credits