Ripple field

流动线条

由多组正弦波叠加形成的柔和线条背景。

交互方式

线条缓慢起伏，可作为卡片或页面的背景。

使用示例

import { RippleField } from "@/components/ui/ripple-field"

export function Demo() {
  return <RippleField width={560} height={280} lines={16} style={{ width: "100%", height: 280 }} />
}

参数

参数	类型 / 默认值	说明
`stroke`	`string`"#2f7bd4"	线条颜色。
`lines`	`number`12	线条数量，范围 2 到 100。
`width`	`number`264	SVG 坐标系宽度。
`height`	`number`300	SVG 坐标系高度。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

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

clsxtailwind-merge

components/ui/ripple-field.tsx
lib/utils.ts