Magnetic UI / Showcase

物理感UIコンポーネント（Magnetic UI）

マウスに吸い寄せられるボタン、傾くカード、慣性スクロール。微細な物理演出で「触れる」感覚を生む。

LIVE 難易度 ★★ medium 想定工数 8h ¥60,000〜

Vanilla JS
GSAP（任意）
Lenis

Tilt Card 傾く立体カード

概要

物理的な「重さ」「慣性」「磁力」を感じるUI演出群。

マグネティックボタン ：マウス座標に追従、磁力で引き寄せられるようなボタン
3Dティルトカード ：マウス位置に応じてカードが立体的に傾く
慣性スクロール（Lenis） ：スクロールにスプリング感、ネイティブを超える体験
マウス追従カーソル ：ブラウザカーソルを置き換えた独自カーソル

技術要素

mousemove イベント + lerp で滑らかな追従
CSS Custom Properties (—mouse-x / —mouse-y) で軽量更新
Lenis （慣性スクロールライブラリ）
prefers-reduced-motion 配慮（全機能 OFF 可能）

実装難易度

★★（中級）

想定工数・費用感

工数：1日（8時間）
価格目安：¥60,000〜

サイト全体への展開、コンポーネント単位での選択導入も可能。