A·Ho · 矩形リップル

ボタンにカーソルが入った辺からフィルが方向性を持って広がり、抜けた辺へ引いていく。クリックすればその位置から矩形リップルが弾ける。円ではなく矩形の、硬質な幾何フィードバック。

Live demo: ./index.html

概要

項目	内容
ジャンル	A · 幾何学・パターン
用途	Ho · ホバー / マイクロインタラクション
主な参考	Material Design, Vercel
依存	なし（Pure HTML + CSS + Vanilla JS）
推奨配置	CTA・ボタン・メニュー項目のフィードバック

スキルとして導入 / Install as a skill

このリポジトリは Claude Code / Codex CLI 共通の SKILL.md（オープン標準）を同梱しており、AI エージェントのスキルとして使えます。リポジトリ自体をスキルディレクトリへリンクするだけです。

This repo ships a cross-agent SKILL.md (open standard) usable by both Claude Code and Codex CLI. Just link the repo into the agent's skills directory.

# Claude Code
ln -s "$(pwd)" ~/.claude/skills/anim-rect-ripple
# Codex CLI
ln -s "$(pwd)" ~/.codex/skills/anim-rect-ripple

エージェントを再起動すると description に基づき自動でマッチします（スキル名: anim-rect-ripple）。 Restart the agent; it is matched automatically by the skill's description (skill name: anim-rect-ripple).

フィルモード（data-rr-mode）

値	動き
wipe（既定）	入った辺から矩形が方向性を持って満ち、抜けた辺へ引く
grid	ボタンを小さな正方形に分割し、カーソル起点から距離順に弾けるモザイク伝播で満ちる

どちらも pointerdown で矩形リップルが弾ける。

仕組み

wipe

1. JS が .rr-fill を挿入
2. pointerenter：最も近い辺を「入口」と判定 → その辺を transform-origin に scaleX/scaleY を 0→1（横入口は scaleX、縦入口は scaleY）
3. pointerleave：「出口」の辺を原点に scale 0 へ引く

grid

1. ボタン寸法と --rr-cell から列数・行数を決め、.rr-grid（CSS Grid）に .rr-cell を敷き詰める
2. pointerenter：各セル中心からカーソルまでの距離（ボタンを単位正方形とみなして正規化＝幅広/低背でも縦横が均等に伝播）を測り、transition-delay を距離比例にして scale(0→1.05) → 起点から伝播して満ちる（1.05 で継ぎ目を隠す）。低背でも縦の解像度が出るよう最低 3 行を確保
3. pointerleave：抜けた座標起点で同様に scale 0 へ
4. resize でセル数を再計算（hover 中は除く）

共通：クリックリップル pointerdown 座標に矩形 .rr-ripple を生成し scale(0→48)+フェード（animationend で除去）。

ラベルは .rr-label（z-index 上）でフィルの上に保ち、.is-filled で文字色をコントラスト色へ。

組み込み手順

1. 2 ファイルをコピー

style.css / script.js を移植先へ。外部依存ゼロ。

2. マークアップ

<!-- 既定（wipe） -->
<button class="rect-btn" data-rect-ripple>
  <span class="rr-label">VIEW WORK</span>
</button>

<!-- モザイク伝播（grid） -->
<button class="rect-btn" data-rect-ripple data-rr-mode="grid">
  <span class="rr-label">ABOUT</span>
</button>

<script src="./rect-ripple.js"></script>

• ラベルは必ず .rr-label で包む（フィルの上に出すため）
• data-rr-mode="grid" でモザイク。マス目の細かさは --rr-cell（既定 22px）
• 濃色ボタンは .rect-btn--solid のように variant を作り、--rr-* 変数を上書き

カスタマイズ可能な CSS 変数（.rect-btn 単位）

変数	役割	デフォルト
--rr-fill	ホバーフィルの色	#0a0a0a
--rr-text	フィル時のラベル色	#fff
--rr-ripple	クリックリップルの色	rgba(255,45,85,.5)
--rr-dur	フィル / リップルの時間	540ms
--rr-ease	イージング	cubic-bezier(.6,0,.2,1)
--rr-cell	grid モードのマス目サイズ	22px

よくある調整例

/* マゼンタのフィル */
.rect-btn{ --rr-fill:#ff2d55; --rr-text:#fff; }

/* 速くキレよく */
.rect-btn{ --rr-dur:280ms; --rr-ease:cubic-bezier(.85,0,.15,1); }

アクセシビリティ

prefers-reduced-motion: reduce のとき、フィルのトランジションを切り（瞬時）、クリックリップルは表示しない。

制約 / 既知の挙動

• フィル/リップルは .rect-btn{ overflow:hidden } で角を切る。角丸にする場合は border-radius を付ければリップルも追従
• リップルは scale(48) で 12px 起点 → 約 576px まで拡大。極端に大きいボタンでは @keyframes rr-rip の倍率を上げる
• タッチでは pointerenter も発火するため、タップでフィル＋リップルが同時に出る（想定挙動）

ライセンス

ANIMATION DESIGN STUDY の一部として公開（コピペ自由）。