DecayCard

PreviousNext

Hover parallax effect that disintegrates the content of a card.

Docs
react-bitscomponent

Preview

Loading preview…
DecayCard/DecayCard.css
.content {
  position: relative;
}

.svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
}

.card-text {
  position: absolute;
  bottom: 1.2em;
  letter-spacing: -0.5px;
  font-weight: 900;
  left: 1em;
  font-size: 2.5rem;
  line-height: 1.5em;
}

.card-text::first-line {
  font-size: 4rem;
}

Installation

npx shadcn@latest add @react-bits/DecayCard-JS-CSS

Usage

import { DecayCardJSCSS } from "@/components/DecayCard-JS-CSS"
<DecayCardJSCSS />