# Wave Lines — Animated React Background

> A bundle of thin SVG sine lines, each with its own wavelength and speed, sliding past one another so the ribbon keeps braiding and unbraiding.

- Category: [Backgrounds](https://pixelpapa.com/components/backgrounds.md)
- Tags: background, waves, svg, lines, sine
- Dependencies: none (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/backgrounds/bg-wave-lines

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/bg-wave-lines
```

The file is written to `components/pixelpapa/bg-wave-lines.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/backgrounds/bg-wave-lines.

## AI prompt

```text
Add the "Wave Lines" component from PixelPapa UI to this project.

What it is: A bundle of thin SVG sine lines, each with its own wavelength and speed, sliding past one another so the ribbon keeps braiding and unbraiding.
Category: Backgrounds. Depends on: no extra packages.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/bg-wave-lines
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/bg-wave-lines.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/bg-wave-lines.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/bg-wave-lines" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More backgrounds

- [Animated Grid Lines](https://pixelpapa.com/components/backgrounds/bg-animated-grid-lines.md) (Pro): A perspective floor of grid lines that scrolls toward the viewer forever, with light pulses racing down a few of the lines.
- [Aurora Background](https://pixelpapa.com/components/backgrounds/aurora-background.md): Slow drifting colour ribbons behind your content, built from blurred gradients with no canvas.
- [Beams Light Rays](https://pixelpapa.com/components/backgrounds/bg-beams-light-rays.md) (Pro): Soft light rays fan out from above and sway a few degrees while breathing in brightness, with dust motes drifting through them.
- [Dot Grid Spotlight](https://pixelpapa.com/components/backgrounds/bg-dot-grid-spotlight.md) (Pro): A quiet dot grid where a soft light trails the cursor and swells the dots it passes over; it wanders on its own when idle.
- [Flow Field](https://pixelpapa.com/components/backgrounds/bg-flow-field.md) (Pro): Hundreds of canvas particles ride a slowly shifting vector field and leave fading silk trails in your theme colours.
- [Gradient Mesh Blobs](https://pixelpapa.com/components/backgrounds/bg-gradient-mesh-blobs.md): Five saturated blobs wander on separate looping paths and melt into a mesh gradient, while one extra blob follows the cursor on a spring.