Product Page Demo

Shapes That
Breathe &
React.

右側的有機球體是用 Vertex Shader 即時扭曲的網格,滑鼠移動越快,表面噪聲振幅越大 — 純運算沒有任何貼圖。

Vertex Displacement Shader Magnetic Buttons Clip-path Text Reveal Infinite Marquee Vertex Displacement Shader Magnetic Buttons Clip-path Text Reveal Infinite Marquee
Technique breakdown

跟上一個範例不同的三個技巧

01

Simplex Noise 頂點位移

球體每個頂點沿法線方向依 3D simplex noise 位移,noise 隨時間與滑鼠速度變化,做出「呼吸」般的有機動態。

02

磁性按鈕

滑鼠靠近按鈕一定範圍時,按鈕會被「吸」向游標;離開範圍會用彈簧曲線彈回原位,是很多高階作品集網站的招牌互動。

03

Clip-path 文字顯現

標題每一行文字用 overflow:hidden 包住,內層文字從下往上滑入,模擬百葉窗式的專業標題進場動畫。

兩種截然不同的視覺語言,同一套技巧庫。

查看原始碼 →