React Bits

Fluid Glass

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

Fluid Glass, a React Bits 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 React Bits 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.