Ribbons
ribbons弹簧追随鼠标的飘带 WebGL 效果 · ogl Polyline 多条折线弹性拖尾 + 可选沿带渐隐/正弦波动(ogl·token·reduced-motion)
用法
基础用法
放在 relative 容器里即可，默认吃 chart token 三色飘带、弹性追随鼠标。
移动鼠标，飘带会弹性追随
tsx
<div className="relative h-56 overflow-hidden rounded-xl">
<Ribbons />
</div>尾部渐隐 + 波动特效
enableFade 沿带长渐隐尾部，enableShaderEffect 让飘带正弦抖动。
移动鼠标，飘带会弹性追随
tsx
<Ribbons enableFade enableShaderEffect effectAmplitude={2} />粗带慢追随（壁纸级）
加粗 + 高阻尼 + 长拖尾 + 低速倍率，做慵懒的背景氛围。
移动鼠标，飘带会弹性追随
tsx
<Ribbons
baseThickness={50}
baseFriction={0.94}
maxAge={900}
speedMultiplier={0.4}
/>自定义颜色 · 多条散开
colors 每个 CSS 颜色生成一条飘带；offsetFactor 越大散得越开。
移动鼠标，飘带会弹性追随
tsx
<Ribbons
colors={[
"var(--color-chart-1)",
"oklch(0.72 0.22 30)",
"oklch(0.78 0.18 60)",
"var(--color-chart-3)",
]}
offsetFactor={0.1}
baseThickness={24}
/>何时用
需要一组「弹性飘带跟随鼠标飞舞」的交互背景（hero、登录页、品牌动效）。同为鼠标跟随特效，要离散溅彩颗粒选 SplashCursor，要点亮像素格选 PixelTrail；Ribbons 是连续的丝带拖尾，飘逸感最强。
导入
ts
import { Ribbons } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| colors | string[] | ["var(--color-chart-1)","--chart-2","--chart-3"] | 飘带颜色数组，每色一条飘带；token 须带 --color- 前缀 |
| baseSpring | number | 0.03 | 弹簧刚度基准，越大追随越紧（每条叠加随机量制造错落） |
| baseFriction | number | 0.9 | 阻尼摩擦基准（0–1），越大越黏滞、过冲越少 |
| baseThickness | number | 30 | 飘带基础粗细（px） |
| offsetFactor | number | 0.05 | 多条飘带横向偏移因子，越大散得越开 |
| maxAge | number | 500 | 拖尾衰减寿命（ms），越大尾巴越长；0 或 Infinity 退回固定 0.9 lerp |
| pointCount | number | 50 | 每条飘带采样点数（决定折线平滑度） |
| speedMultiplier | number | 0.6 | 拖尾追赶速度倍率，配合 maxAge 控尾巴软硬 |
| enableFade | boolean | false | 沿飘带长度方向渐隐（尾部透明） |
| enableShaderEffect | boolean | false | shader 波动特效（沿法线正弦抖动） |
| effectAmplitude | number | 2 | shader 波动振幅，仅 enableShaderEffect=true 生效 |
| className | string | — | 透传到容器（或 reduced-motion fallback div） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| fallback | ReactNode | reduced-motion / 无 WebGL 时的静态替代（默认 chart token 渐变 div） |
禁忌 / 坑
colors里的 token 必须带--color-前缀，裸var(--primary)shader 不解析。见 [[hulian-token-color-var-needs-color-prefix]]。- WebGL/ogl 组件，仅客户端渲染；StrictMode 双挂载 canvas context 复用风险见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]。
- 飘带追随的是全容器内的鼠标，父级需
relative+overflow-hidden；本组件不拦截下层交互。
相关
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
移动鼠标，飘带会弹性追随
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 285)" }}>
<Ribbons
baseThickness={30}
baseFriction={0.9}
maxAge={500}
enableFade={false}
enableShaderEffect={false}
/>
</div>