Astra

Pixel Card

A card that fills with twinkling pixels on hover, rippling out from the center or the cursor.

Pixel Card, a Astra component

Use Pixel 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/PixelCard-TS-TW
How to install Astra components

Related components

  • Profile Card

    A framed profile card that tilts toward the cursor, with holographic foil shining through a tiled pattern.

  • Tilted Card

    A 3D card that tilts toward the cursor, with glare, a soft shadow, floating layers and a flip side.

  • Accordion Gallery

    Panels expand on hover or focus, revealing parallax imagery and captions.