Astra

Fluid Glass

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

Fluid Glass, a Astra component

Use Fluid Glass 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/FluidGlass-TS-TW
How to install Astra components

Related components

  • Border Glow

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

  • Chroma Grid

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

  • Decay Card

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