React Bits

Grid Distortion

Image background that breaks into a grid of blocks under the cursor and settles back into place.

Grid Distortion, a React Bits component

Use Grid Distortion 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/GridDistortion-TS-TW
How to install React Bits components

Related components

  • Shape Grid

    A drifting grid of shapes that lights up under the cursor, with perspective tilt and rainbow trails.

  • Waves

    Dense flowing lines that sway like silk, bend around the cursor and spring back into place.

  • Dot Grid

    A springy dot grid that the cursor flicks and drags through like jelly, with click shockwaves.