Ripple Distortion

Pointer-driven water displacement that warps content and leaves a decaying wake.

Use Ripple 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/RippleDistortion-TS-TW

Related components

• Animated Content

  Wrapper that reveals its content on scroll with slides, blur, 3D tilts, soft wipes and staggered children.

• Cubes

  A grid of outlined 3D cubes that turn to face the cursor, spin when swept and ripple on click.

• Fade Content

  Wrapper that fades content in on scroll, plain or out of focus, from washed-out gray, or through grain, mist and pixel blocks.