Astra

Grid Distortion

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

Grid Distortion, a Astra 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 Astra 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.