LineWaves
line-wavesRenders interactive multicolor wave lines from layered sine and noise fields.
Usage
Basic usage
Just put it into the relative overflow-hidden container. The component comes with absolute inset-0 z-0; the default color is chart token, and the light and shade are adaptive. The content floats on the ripple with relative z-10.
LineWaves
<div className="relative h-64 overflow-hidden rounded-xl bg-neutral-950">
<LineWaves />
<div className="relative z-10 flex h-full items-center justify-center">
<p className="text-2xl font-bold text-white/90">LineWaves</p>
</div>
</div>Highlight + Strong Distortion
Increase brightness to make the lines more solid and brighter (alpha varies with the brightness). The larger the warpIntensity, the more "turbulent" the ripples will be.
<LineWaves brightness={0.4} warpIntensity={1.6} speed={0.5} />Classic white line
Transmit all three color channels to the same value (such as #ffffff) and turn off the hue cycle (colorCycleSpeed=0) to restore the original single-color white line of react-bits.
<LineWaves
color1="#ffffff"
color2="#ffffff"
color3="#ffffff"
brightness={0.25}
colorCycleSpeed={0}
/>Horizontal direction · Close interaction
rotation=0 makes the ripples lay out horizontally; enableMouseInteraction={false} turns off the pointer disturbance and becomes pure automatic flow, suitable for purely decorative backgrounds.
<LineWaves
rotation={0}
enableMouseInteraction={false}
innerLineCount={24}
outerLineCount={40}
brightness={0.3}
/>When to Use
Use it when you need a layer of "flowing line texture" atmospheric background (Hero, login page, empty state background). For dot matrix/grid geometry, select DotPattern / GridPattern, for diagonal stripes, select StripedPattern, and for mouse focus, select Spotlight; this component is an organic undulating line field, with a stronger sense of movement and hue drift.
Import
import { LineWaves } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 0.3 | Animation speed factor; the larger, the faster the flow, 0 = static texture |
| innerLineCount | number | 32 | Center area line density; determines density gradient together with outerLineCount |
| outerLineCount | number | 36 | Line density in the edge area; different from inner, there will be a density transition from the upper and lower edges to the center |
| warpIntensity | number | 1 | Ripple distortion strength; higher values produce rougher waves, while 0 produces straight parallel lines |
| rotation | number | -45 | Overall texture rotation angle (degrees); -45° makes the ripples diagonal |
| edgeFadeWidth | number | 0 | The starting width of the upper and lower edge fades; increasing it will narrow the center line area |
| colorCycleSpeed | number | 1 | Color cycle speed; three-channel hue drifts over time, 0 = constant color |
| brightness | number | 0.2 | Overall brightness coefficient; because alpha=color length, it also affects transparency. Recommendation 0.1–0.6 |
| color1 | string | --color-chart-1 | The first channel color, CSS color string; the default is chart token light and dark adaptive |
| color2 | string | --color-chart-2 | Second channel color |
| color3 | string | --color-chart-4 | The third channel color; all three colors pass the same value (such as #ffffff) to restore the original white line |
| enableMouseInteraction | boolean | true | Turn on the local distortion extrapolation of the pointer; turn it off for pure automatic flow |
| mouseInfluence | number | 2 | Pointer influence strength; only effective when enableMouseInteraction=true |
| className | string | — | Additional class name for the root container or reduced-motion fallback div |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative content without WebGL; default oblique chart token gradient lines |
Usage Guidelines
- The component comes with
absolute inset-0 z-0, the parent container must be `relative` and the page content must be stacked with a higher z-index (such asrelative z-10), otherwise the lines will either be positioned incorrectly or cover the content [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]. - WebGL client component, before placing it into the RSC tree under Next App Router, note that it is
"use client"; the canvas is not rendered in the SSR stage, only fallback is used. - When passing
var(--color-…)fromcolor1/2/3, the color is parsed through the off-screen canvas at runtime. Naked `var(--primary)` without the `--color-` prefix will fail to parse (black/transparent) [[oklch-css-var-color-must-parse-via-offscreen-canvas]]. - Headless screenshots can capture blank or still frames when rAF animation is throttled. Verify the motion on a real device or with Playwright measurements; see [[recharts-headless-screenshot-blank-clippath-animation-starved]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
LineWaves · WebGL Background
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.02 265)" }}>
<LineWaves
speed={0.3}
warpIntensity={1}
rotation={-45}
brightness={0.2}
enableMouseInteraction={true}
/>
<div className="relative z-10">Content</div>
</div>