Astra

Decay Card

An image card that tears and melts as the pointer moves, then pulls itself back together.

Decay Card, a Astra component

Use Decay Card in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/DecayCard-TS-TW
How to install Astra components

Related components

  • Card Swap

    A 3D stack of cards that sends the front card to the back on a timer, or when you fling it.

  • Elastic Slider

    A slider that grows under your cursor and stretches like rubber when pulled past either end, then springs back.

  • Fluid Glass

    A 3D glass object that refracts your headline, image or video, follows the cursor and melts between shapes.