React Bits

Ripple Distortion

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

Ripple Distortion, a React Bits component

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
How to install React Bits components

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.