# Updated: Gradient Waves

By Steven Van · 2026-10-13

The background now has light direction, presets and a light mode, and installs through the shadcn CLI in JavaScript or TypeScript.

Gradient Waves, the lit satin wave background in React Bits, now has a lighting pass. The waves are shaded with soft light and shadow, and they rise from calm water when the component loads.

## Cursor and click behaviour

A light follows the cursor across the waves, and a click rolls a swell in. The component's description reads "lit satin waves rolling in from a hazy horizon, with a light that follows the cursor and swells on click."

## New options

- Light direction

- Presets

- A light mode

- No dependencies

## Installation

The component is installed through the shadcn CLI, for example npx shadcn@latest add @react-bits/GradientWaves-TS-TW for the TypeScript and Tailwind version. It comes in JavaScript or TypeScript, with plain CSS or Tailwind. The full update is on the [Gradient Waves page](<https://reactbits.dev/backgrounds/gradient-waves>).

![React Bits](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.

[View React Bits →](<https://creatorstoolbox.com/resources/react-bits>)

Sources

[Original source](<https://reactbits.dev/backgrounds/gradient-waves>)

[Read Updated: Gradient Waves on Creators Toolbox](<https://creatorstoolbox.com/blog/react-bits-updated-gradient-waves>)

---
Canonical source: https://creatorstoolbox.com/blog/react-bits-updated-gradient-waves