FloatingLines
floating-linesAnimates layered sinusoidal line bundles with color interpolation and pointer bending.
Usage
Basic usage
Three sets of floating wire harness backgrounds, the lines produce radial bending and traction when the mouse is close; the default color is chart token.
<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
<FloatingLines />
<div className="relative z-10 flex h-full items-center justify-center text-white/80">
FloatingLines
</div>
</div>Intensive and slow (wallpaper level)
Increase the size of lineCount to make the wiring harness denser, and adjust the size of animationSpeed to slow down, suitable for hero background overlay copywriting.
Hulian component library
Enterprise-grade · High quality · Native-ready
<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
<FloatingLines lineCount={10} animationSpeed={0.6} lineDistance={4} />
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-1">
<p className="text-lg font-semibold text-white">Hulian Component Library</p>
<p className="text-xs text-white/60">Enterprise level · High quality · Native adaptation </p>
</div>
</div>Custom ribbon · Off interaction
colors Custom gradient ribbon; interactive=false Turn off pointer pulling to make a pure background.
<FloatingLines
colors={[
"var(--color-chart-3)",
"oklch(0.72 0.22 30)",
"var(--color-chart-1)",
]}
interactive={false}
animationSpeed={1.4}
/>When to Use
Use it when you need a light, low-obtrusion, flowing background with text on top (hero, landing page, marketing block). For dot matrix/grid geometric shading, use DotPattern / GridPattern; for liquid metal ridges, use Ferrofluid; for pointer focus, use Spotlight. The wiring harness of this component is thin and friendly to the readability of foreground text.
Import
import { FloatingLines } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | --color-chart-1/2/4 | Line gradient color band, interpolation from beginning to end along the line, up to the first 5 segments; any CSS color |
| lineCount | number | 6 | The number of lines in each of the three groups of waves, the more, the denser and the greater the cost, it is recommended 3–12 |
| lineDistance | number | 5 | Transverse phase spacing of adjacent lines (sense of dense stacking) |
| animationSpeed | number | 1 | Animation speed magnification, 0=still |
| interactive | boolean | true | When the pointer approaches, the line bends and pulls radially; reduced-motion / no WebGL automatically fails |
| bendRadius | number | 5 | Pointer bending affects the radius coefficient, the larger the range, the smaller the focus |
| bendStrength | number | -0.5 | Pointer bending strength (with sign, negative value reverse pull) |
| className | string | — | Forward the root container, the root includes absolute inset-0 z-0 |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / no WebGL static pocket content (such as watermark copy) |
Usage Guidelines
- OGL/WebGL client-side rendering: placed within the
"use client"boundary; SSR / no WebGL renders only the fallback. - The root includes
absolute inset-0 z-0, which needs to be put into therelativecontainer; the foreground content needsrelative z-10to be placed on the wire harness. lineCountis the number of each group (three groups in total), the actual number of lines is about 3 times, please pay attention to the performance when increasing.bendStrengthThe default negative value is intentional reverse traction, and the correction value direction will be reversed.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<FloatingLines
lineCount={6}
lineDistance={5}
animationSpeed={1}
interactive={true}
/>
</div>