Gradient Waves

Lit satin waves rolling in from a hazy horizon, with a light that follows the cursor and swells on click.

Use Gradient Waves 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/GradientWaves-TS-TW

Related components

• Gradient Blinds

  Satin gradient blinds lit by a spotlight that follows the cursor, swaying and turning toward the light.

• Sliced Waves

  Waves of colored light sliced into glowing bars, seen in depth with a focus that follows the cursor.

• Beams

  Glossy ribbons that ripple in the dark and catch the light, which follows your cursor.