Astra

Chroma Grid

A grid of grayscale photo cards where a spotlight follows the cursor and brings back color.

Chroma Grid, a Astra component

Use Chroma Grid 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/ChromaGrid-TS-TW
How to install Astra components

Related components

  • Magic Bento

    A bento grid of feature cards with live artwork, edge light that follows the cursor and a click wave.

  • Spotlight Card

    Card lit by a soft spotlight that follows the pointer, catches its edge and reaches nearby cards.

  • Border Glow

    Glowing mesh-gradient border that follows cursor direction and intensifies near edges.