Ripples 水波紋元件

基於 WebGL 的互動式水波紋背景

封裝好的 Vue 元件，支援滑鼠/觸控互動、自動水滴效果、可自訂參數

查看指令版本

互動展示

水波紋效果展示

滑鼠移動或點擊產生水波紋

參數調整

Resolution: 512

Drop Radius: 20

Perturbance: 0.03

Auto Drops Interval: 400ms

Interactive

Auto Drops

程式碼範例

<AnimationRipplesBackground
  image-url="/img/home/hero-gradient.svg"
  :resolution="512"
  :drop-radius="20"
  :perturbance="0.03"
  :interactive="true"
  :auto-drops="true"
  :auto-drops-interval="400"
  :auto-drops-strength="0.04"
>
  <h1>Content on top of ripples</h1>
</AnimationRipplesBackground>

Props 說明

Prop	Type	Default	說明
`imageUrl`	String	required	背景圖片 URL（必填）
`resolution`	Number	256	水波紋解析度（建議: 256, 512, 1024）
`dropRadius`	Number	20	水滴半徑
`perturbance`	Number	0.03	擾動強度（建議: 0.01 ~ 0.1）
`interactive`	Boolean	true	是否啟用滑鼠/觸控互動
`autoDrops`	Boolean	false	是否啟用自動水滴效果
`autoDropsInterval`	Number	400	自動水滴間隔（毫秒）