カーソル追従ブロブ（Cursor Blob Follow）はどんな効果ですか？

グラデーションのブロブが慣性をもってカーソルを追いかけるエフェクト。requestAnimationFrame + lerpで滑らかに遅延追従。クリエイティブLP向け。ブランドサイト・ポートフォリオ・LPのファーストビューなど、世界観を演出したい場面に向く演出です。

Cursor Blob FollowはCSSだけで実装できますか？

見た目はCSSで作れますが、動きの制御にJavaScriptを併用します。本ページではHTML・CSS・JavaScriptのコードをまとめて掲載しています。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Cursor Blob Follow — JS Effect with AI Prompt

CODE

HTML

<div class="demo-stage cbf-stage"><div class="cbf-blob"></div><span class="cbf-label">MOVE AROUND</span></div>

CSS

.cbf-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:300px; overflow:hidden; cursor:crosshair; }
.cbf-blob { position:absolute; top:0; left:0; width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#e91b89,#7b37a8); pointer-events:none; will-change:transform; mix-blend-mode:screen; }
.cbf-label { color:rgba(255,255,255,.5); font-family:'Oswald',sans-serif; letter-spacing:.2em; font-size:.85rem; pointer-events:none; }

(function(){
  var stage = document.querySelector('.cbf-stage'), blob = stage && stage.querySelector('.cbf-blob');
  if(!blob) return;
  var tx = 0, ty = 0, x = 0, y = 0;
  stage.addEventListener('mousemove', function(e){
    var r = stage.getBoundingClientRect();
    tx = e.clientX - r.left; ty = e.clientY - r.top;
  });
  (function loop(){
    x += (tx - x) * 0.12; y += (ty - y) * 0.12;
    blob.style.transform = 'translate(' + (x - 30) + 'px,' + (y - 30) + 'px)';
    requestAnimationFrame(loop);
  })();
})();

AI PROMPT

Claude Cursor v0

PROMPT

グラデーションのブロブが慣性をもってカーソルを追いかけるエフェクトを作って。mousemoveで目標座標 tx/ty を更新し、requestAnimationFrameのループ内で現在座標を x += (tx-x)*0.12 のlerpで近づけて transform:translate で反映。係数0.12で「遅れて追う」慣性が出る。blobは linear-gradient + mix-blend-mode:screen で発光感。クリエイティブLP・ポートフォリオに。

カーソル追従ブロブ（Cursor Blob Follow）とは

グラデーションのブロブが慣性をもってカーソルを追いかけるエフェクト。requestAnimationFrame + lerpで滑らかに遅延追従。クリエイティブLP向け。この効果は主にJavaScriptでDOMを操作し、要素の位置やスタイルを動的に書き換えて実現します。

使いどころ

ブランドサイト・ポートフォリオ・LPのファーストビューなど、世界観を演出したい場面に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

JavaScriptで座標やタイミングを計算しながら要素のstyleを書き換えます。更新はrequestAnimationFrameでブラウザの描画タイミングに同期させ、位置の変更はtransformで行うとレイアウト再計算を避けられて軽くなります。動きを減らす設定（prefers-reduced-motion）の利用者へは演出を控えめにする配慮も大切です。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。