Threads

threads

流动丝线背景 · WebGL/ogl Perlin 波动线随鼠标摆动 + 透明底叠加 + chart token + 静态 fallback

用法

基础用法

Threads 是 absolute inset-0 背景层，放在 relative + overflow-hidden 容器内；内容层用 z-10 叠在上方。不传 color 时读 --color-chart-1 跟随主题。

Threads

tsx

<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>

自定义颜色

color 支持 [r,g,b] 数组、hex、oklch、var(--token) 等任意格式。

color="#f97316"

tsx

<Threads color="#f97316" amplitude={0.8} distance={0.5} />

振幅与线间距

amplitude 控制丝线摆幅，distance 拉开各线纵向间距。

amplitude=2.5

tsx

<Threads color="var(--color-chart-3)" amplitude={2.5} distance={0.3} />

禁用鼠标交互

enableMouseInteraction={false} 后丝线不再随指针变化，适合纯装饰背景。

enableMouseInteraction=false

tsx

<Threads enableMouseInteraction={false} />

Hero 大卡

拉高容器，叠标题副文案即成首屏背景。

瑚琏组件库

企业级 · 高质量 · 原生适配明暗主题

tsx

<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">瑚琏组件库</h2>
    <p className="max-w-sm text-sm text-white/60">企业级 · 高质量 · 原生适配明暗主题</p>
  </div>
</div>

何时用

需要透明底上几条随鼠标摆动的流动丝线（极简科技感页眉/页脚/Hero 点缀）时用。基于 WebGL/ogl，透明底便于叠在任意背景之上；同为 WebGL 背景，Silk 是满铺丝绸面、Iridescence 是虹彩光谱面，本组件是稀疏丝线；不愿引入 WebGL 则用纯 CSS 的 Aurora。

导入

import { Threads } from "@hulianui/ui"

Props

名称	类型	默认	说明
color	`[number, number, number] \| string`	`--color-chart-1`	丝线颜色。RGB 数组每分量 0–1（react-bits 原版格式），或任意 CSS 颜色字符串（hex/oklch/rgb/var）。不传则读主题 token
amplitude	number	1	波动幅度，越大摆幅越剧烈，建议 0.3–3
distance	number	0	各丝线纵向间距缩放，正值拉开负值压缩，建议 -1–2
enableMouseInteraction	boolean	true	鼠标跟随：X 影响时间流速、Y 影响振幅，带 0.05 平滑插值
className	string	—	透传到 canvas（或 fallback div）

Slots

插槽	类型	说明
fallback	ReactNode	reduced-motion / 无 WebGL 时的静态替代（默认几条 CSS 渐变线）。传 `null` 可完全隐藏占位

禁忌 / 坑

WebGL 组件，须客户端渲染；color 既收 0–1 的 [r,g,b] 数组也收 CSS 字符串（含 var(--color-chart-3)/oklch/hex）。
ogl/WebGL 在 StrictMode 双挂载或 cleanup 时易踩 context 复用毒化坑——改源码时勿 cleanup 调 loseContext 后复用同一 canvas（参见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]）；headless 无 WebGL 时走 fallback，视觉验证用真实浏览器。
透明底，需自行放在有底色的容器内才看得清；父容器须 relative + overflow-hidden。

Playground

振幅（amplitude）线间距（distance）鼠标交互

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}
  />
  {/* 内容层叠在 z-10 */}
  <div className="relative z-10">…</div>
</div>

用法

基础用法

Threads 是 absolute inset-0 背景层，放在 relative + overflow-hidden 容器内；内容层用 z-10 叠在上方。不传 color 时读 --color-chart-1 跟随主题。

Threads

tsx

<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>

自定义颜色

color 支持 [r,g,b] 数组、hex、oklch、var(--token) 等任意格式。

color="#f97316"

tsx

<Threads color="#f97316" amplitude={0.8} distance={0.5} />

振幅与线间距

amplitude 控制丝线摆幅，distance 拉开各线纵向间距。

amplitude=2.5

tsx

<Threads color="var(--color-chart-3)" amplitude={2.5} distance={0.3} />

禁用鼠标交互

enableMouseInteraction={false} 后丝线不再随指针变化，适合纯装饰背景。

enableMouseInteraction=false

tsx

<Threads enableMouseInteraction={false} />

Hero 大卡

拉高容器，叠标题副文案即成首屏背景。

瑚琏组件库

企业级 · 高质量 · 原生适配明暗主题

tsx

<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">瑚琏组件库</h2>
    <p className="max-w-sm text-sm text-white/60">企业级 · 高质量 · 原生适配明暗主题</p>
  </div>
</div>

何时用

Props

名称	类型	默认	说明
color	`[number, number, number] \| string`	`--color-chart-1`	丝线颜色。RGB 数组每分量 0–1（react-bits 原版格式），或任意 CSS 颜色字符串（hex/oklch/rgb/var）。不传则读主题 token
amplitude	number	1	波动幅度，越大摆幅越剧烈，建议 0.3–3
distance	number	0	各丝线纵向间距缩放，正值拉开负值压缩，建议 -1–2
enableMouseInteraction	boolean	true	鼠标跟随：X 影响时间流速、Y 影响振幅，带 0.05 平滑插值
className	string	—	透传到 canvas（或 fallback div）

插槽

类型

说明

fallback

ReactNode

reduced-motion / 无 WebGL 时的静态替代（默认几条 CSS 渐变线）。传 null 可完全隐藏占位

禁忌 / 坑

WebGL 组件，须客户端渲染；color 既收 0–1 的 [r,g,b] 数组也收 CSS 字符串（含 var(--color-chart-3)/oklch/hex）。

ogl/WebGL 在 StrictMode 双挂载或 cleanup 时易踩 context 复用毒化坑——改源码时勿 cleanup 调 loseContext 后复用同一 canvas（参见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]）；headless 无 WebGL 时走 fallback，视觉验证用真实浏览器。

透明底，需自行放在有底色的容器内才看得清；父容器须 relative + overflow-hidden。

Playground

振幅（amplitude）线间距（distance）鼠标交互

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}
  />
  {/* 内容层叠在 z-10 */}
  <div className="relative z-10">…</div>
</div>

Threads

用法

基础用法

自定义颜色

振幅与线间距

禁用鼠标交互

Hero 大卡

瑚琏组件库

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

Threads

用法

基础用法

自定义颜色

振幅与线间距

禁用鼠标交互

Hero 大卡

瑚琏组件库

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground