マイクロインタラクション

マイクロインタラクションに分類されるWeb表現技法11件。マグネティックボタン、3Dティルトカード、リップル波紋ボタン、アニメ下線リンクなど。ライブデモとコピーできるコード付き。

カーソルの位置に応じてボタンが磁石のように引き寄せられ、内部要素も視差で追従します。ヒーローのCTAやナビに使うと注目を集められます。

マウス位置を回転角に変換し、CSSのperspectiveでカードが立体的に傾き光沢が走ります。商品カードやプロフィールカードの演出に最適です。

クリック位置を起点に波紋が全面へ広がるマテリアルデザイン風の押下フィードバック。あらゆるボタンに汎用的に組み込めます。

純CSSの疑似要素だけで作る4種のホバー下線（左伸び・中央展開・スワップ・枠線）。ナビゲーションやテキストリンクの質感を高めます。

3本線がtransformで滑らかに×へ変形するメニュートグル。aria-expandedも同期し、モバイルナビの開閉ボタンにそのまま使えます。

クリックでハートが弾み、放射状に色とりどりの粒子が飛び散る「いいね」ボタン。SNSやレビューのリアクションUIに使えます。

太陽が月に変わり、空が夜になって星が現れるアニメ付きスイッチ。ほぼ純CSSで動き、ダークモード切替などの設定UIに向きます。

ホバーでプレビュー、クリックで確定し、矢印キー操作にも対応した5段階の星評価。レビュー投稿やアンケートの入力UIに使えます。

文字をランダムに揺らしながら正しい単語へ収束させるレトロな演出。requestAnimationFrameで実装し、ヒーロー見出しのアイキャッチに最適です。

押すとボタンが完了状態へ変化し、canvasで紙吹雪が物理落下する達成感の演出。購入完了やフォーム送信成功のフィードバックに使えます。

ドットの格子がカーソルの磁場で引き寄せ・反発し、近づくほど大きく波打って歪みます。待機中は仮想カーソルが巡回して常に動き、pointermoveで本物に追従。ヒーロー背景やインタラクティブな装飾に使えます。