Liquid Cursor Gradient

液态光标渐变

大幅模糊的色块背景，其中一块用弹簧跟随光标。

NEW · Creative ComponentsLiquid cursor gradients to enhance your UI

交互方式

在区域内移动指针，浅色光斑平滑跟上。另外两块色斑缓慢漂动。

使用示例

import { LiquidCursorGradient } from "@/components/ui/liquid-cursor-gradient"

export function Demo() {
  return (
    <LiquidCursorGradient style={{ height: 460 }}>
      <p>Liquid cursor gradients</p>
    </LiquidCursorGradient>
  )
}

参数

参数	类型 / 默认值	说明
`colors`	`[string, string, string]`["#9C8EB8", "#D4CBE5", "#E4DDF0"]	两块漂动色斑和跟随光标色斑的颜色。
`orbs`	`[{ color: string; size?: string }, { color: string; size?: string }]`	覆盖前两块色斑的颜色和尺寸。
`cursorSize`	`number`400	跟随光标的色斑直径（px）。
`blur`	`number`80	覆盖层模糊半径（px）。
`tint`	`string`"rgba(0,0,0,.1)"	模糊层底色。
`noise`	`number`0.2	颗粒层不透明度，0 到 1。
`children`	`ReactNode`	显示在效果前方的内容。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxmotiontailwind-merge

components/ui/liquid-cursor-gradient.css
components/ui/liquid-cursor-gradient.tsx
lib/utils.ts

来源

https://github.com/palakonweb/Rewamp-UI — src/components/ui/LiquidCursorGradientShowcase.jsx（仓库未声明许可证，按原实现保留）