入った辺から
四角く満ちる。
ボタンにカーソルが入った辺からフィルが方向性を持って広がり、抜けた辺へ引いていく。クリックすればその位置から矩形リップルが弾ける。円ではなく矩形で、硬質な幾何の手触り。
方向性ワイプ wipe
— HOVER / CLICK入った辺から矩形が満ち、抜けた辺へ引く（既定モード）。
モザイク伝播 grid
— data-rr-mode="grid"小さな正方形群がカーソル起点から距離順に弾けて満ちる。data-rr-mode="grid" を付けるだけ。
使い方
— USAGE
01
2 ファイルをコピー
style.css / script.js を移植先へ。外部依存ゼロ。
02
属性を付けるだけ
ボタンに class="rect-btn" data-rect-ripple、ラベルを <span class="rr-label"> で包む。JS がフィル要素を自動挿入し配線する。
03
2 つのフィルモード
data-rr-mode="wipe"（既定）＝入口の辺から満ち引き。"grid"＝正方形群がカーソル起点に距離順で弾けるモザイク。どちらもクリックで矩形リップル。
カスタマイズ可能な CSS 変数
--rr-fillホバーフィルの色#0a0a0a--rr-textフィル時のラベル色#fff--rr-rippleクリックリップルの色rgba(255,45,85,.5)--rr-durフィル / リップルの時間540ms--rr-easeイージングcubic-bezier(.6,0,.2,1)