# WaveBackground

> The WaveBackground component is a dynamic WebGL-powered background built using the OGL library. It generates smooth, flowing wave patterns that are ideal for enhancing Hero sections or full-screen layouts without distracting from the main content. The shader logic creates layered sine and cosine waves that move over time, giving the appearance of continuous motion similar to ocean waves or liquid flow. The component supports both dark and light themes, automatically adjusting its color palette to blend seamlessly with different UI designs. It is fully responsive, scales to the parent container, and leverages GPU rendering for high performance, making it a modern, visually appealing background solution for landing pages, dashboards, or product showcases.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: ogl
- Live preview: https://21st.dev/@ruixen.ui/components/wave-background

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/wave-background?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt