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

カーソルに柔らかい光のグローが追従するエフェクト。ダークなヒーロー・ポートフォリオの没入感を高める。ブランドサイト・ポートフォリオ・LPのファーストビューなど、世界観を演出したい場面に向く演出です。

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

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

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

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

Cursor Glow Follow — CSS+JS Effect with AI Prompt

CODE

HTML

<div class="demo-stage cgf-stage"><span class="cgf-glow"></span><span class="cgf-label">MOVE YOUR CURSOR</span></div>

CSS

.cgf-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:300px; overflow:hidden; cursor:none; }
.cgf-glow { position:absolute; left:var(--gx,-300px); top:var(--gy,-300px); width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(233,27,137,.5), transparent 65%); transform:translate(-50%,-50%); pointer-events:none; transition:left .1s ease-out, top .1s ease-out; filter:blur(8px); }
.cgf-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('.cgf-stage'), glow = stage && stage.querySelector('.cgf-glow');
  if(!glow) return;
  stage.addEventListener('mousemove', function(e){
    var r = stage.getBoundingClientRect();
    glow.style.setProperty('--gx', (e.clientX - r.left) + 'px');
    glow.style.setProperty('--gy', (e.clientY - r.top) + 'px');
  });
})();

AI PROMPT

Claude Cursor v0

PROMPT

カーソルに柔らかい光のグローが追従するエフェクトを作って。グロー要素は radial-gradient(circle, rgba(233,27,137,.5), transparent 65%) + filter:blur(8px) で作り、position:absolute + transform:translate(-50%,-50%) で中心揃え。親のmousemoveで getBoundingClientRect から相対座標を取り、CSS変数 --gx/--gy に代入。left/top に transition:.1s を付けると少し遅れて滑らかに追従する。親に cursor:none。ダークなヒーローの没入感アップに。

カーソル追従グロー（Cursor Glow Follow）とは

カーソルに柔らかい光のグローが追従するエフェクト。ダークなヒーロー・ポートフォリオの没入感を高める。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。

使いどころ

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

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

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