ANIMATION · INDEX LIQUID CURSOR
DESIGN STUDY · ANIMATION

カーソルが
ゲルになる。

複数の追従ブロブを SVG の goo フィルタで融合。速く動かすと尾を引いて伸び、止まると一滴に丸くまとまる。リンクやボタンに乗ると吸い付いて膨らむ。マウス(fine ポインタ)で操作してください。

PROJECTS ABOUT

触れて確かめる

— HOVER TARGETS
magnetic gooey elastic lag blob follow

使い方

— USAGE
01

2 ファイル + 1 ブロック

style.css / script.js をコピーし、.liquid-cursor の SVG ブロック(goo フィルタ + ブロブ群)を body 末尾に置く。

02

融合のしくみ

複数の円が各自の遅延でマウスを追う。feGaussianBlur + feColorMatrix の goo フィルタが、近いと1つに、離れると伸びた塊に融合させる。

03

吸着

a / button / [data-lc-grow] に乗るとブロブが拡大。(pointer: fine) でのみ起動し、タッチ端末では既定カーソルのまま。

カスタマイズ可能な CSS 変数

--lc-colorブロブの色#ff2d55
--lc-blend合成モード(difference で反転カーソル風)normal

JS 定数(script.js 冒頭)

LERPS各ブロブの追従係数(先頭ほど密着・後続ほど遅延=尾を引く)[.4 … .12]
RADII各ブロブの基準半径[20 … 12]
GROWホバー時の拡大率1.9