Threads
threadsRenders flowing luminous WebGL threads with configurable amplitude and interaction.
Usage
Basic usage
Threads is the absolute inset-0 background layer, placed in the relative + overflow-hidden container; the content layer is stacked on top with z-10. When not passing color, read --color-chart-1 and follow the topic.
Threads
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.10 0.015 265)" }}>
<Threads />
<div className="relative z-10 flex h-full items-center justify-center">
<p className="text-sm font-medium text-white/60">Threads</p>
</div>
</div>Custom color
color supports [r, g, b] array, hex, oklch, var(--token) etc. in any format.
color="#f97316"
<Threads color="#f97316" amplitude={0.8} distance={0.5} />Amplitude and line spacing
amplitude controls the wire swing, and distance increases the longitudinal spacing of each wire.
amplitude=2.5
<Threads color="var(--color-chart-3)" amplitude={2.5} distance={0.3} />Disable mouse interaction
enableMouseInteraction={false} The rear silk thread no longer changes with the pointer, suitable for purely decorative backgrounds.
enableMouseInteraction=false
<Threads enableMouseInteraction={false} />Hero Large card
Raise the container and overlay the title and sub-copy to form the first screen background.
Hulian component library
Enterprise level · High quality · Native adaptation to light and dark themes
<div className="relative h-80 overflow-hidden rounded-xl">
<Threads color={[0.18, 0.45, 0.88]} amplitude={1.4} distance={0.2} />
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-3 text-center">
<h2 className="text-2xl font-bold text-white">Hulian Component Library</h2>
<p className="max-w-sm text-sm text-white/60">Enterprise level · High quality · Native adaptive light and dark themes</p>
</div>
</div>When to Use
Use it for sparse, pointer-responsive threads on a transparent surface, such as a minimal header, footer, or hero accent. Silk creates a full fabric surface, while Iridescence creates a spectral surface. For a CSS-only alternative, use Aurora.
Import
import { Threads } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| color | [number, number, number] | string | --color-chart-1 | Thread color as a 0–1 RGB tuple or CSS color. When omitted, the component reads the chart token |
| amplitude | number | 1 | Wave amplitude; higher values produce stronger motion. Recommended range 0.3–3 |
| distance | number | 0 | The longitudinal spacing of each wire is scaled. Positive values expand and negative values compress. It is recommended to -1–2 |
| enableMouseInteraction | boolean | true | Mouse following: X affects time flow rate, Y affects amplitude, with 0.05 smooth interpolation |
| className | string | — | Additional class name for the canvas or fallback div |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Reduced-motion or non-WebGL replacement (defaults to several CSS gradient lines). Pass null to hide it completely. |
Usage Guidelines
- WebGL component, which must be rendered by the client;
coloraccepts both the[r,g,b]array of 0–1 and the CSS string (includingvar(--color-chart-3)/oklch/hex). - When ogl/WebGL is dual-mounted in StrictMode or cleanup, it is easy to step on the context reuse poison pit - when changing the source code, do not cleanup and adjust
loseContextand then reuse the same canvas (see [[webgl-canvas-loseContext-poisons-strictmode-remount]]); use fallback when there is no WebGL in headless, use a real browser for visual verification. - Transparent bottom, you need to put it in a container with a background color to see clearly; the parent container must be
relative+overflow-hidden.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
Threads
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.10 0.015 265)" }}>
<Threads
amplitude={1}
distance={0}
enableMouseInteraction={true}
/>
{/* Content overlaid on z-10 */}
<div className="relative z-10">…</div>
</div>