Glow Cursor

Soft radial glow that tracks the pointer across a dark canvas.

Soft radial glow that tracks the pointer across a dark canvas.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Effects
Category: Interaction
Style: Minimal
Tech stack: CSS
Animation: Cursor
Difficulty: Beginner
License: Personal
Access: Free
Views: 606

Cursor
Glow
CSS
JavaScript

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Build a glow cursor spotlight on a dark canvas with CSS variables and pointermove. Respect reduced motion.

Code

<!-- HTML -->
<canvas id="c"></canvas><p class="hint">Move</p>

/* CSS */
canvas{position:absolute;inset:0;width:100%;height:100%} .hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;margin:0;font:500 12px/1 system-ui;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35)}

// JS
var c=document.getElementById("c"),x=c.getContext("2d"),pts=[],w,h;function R(){w=c.width=c.clientWidth;h=c.height=c.clientHeight}function d(){x.fillStyle="rgba(5,5,5,.2)";x.fillRect(0,0,w,h);for(var i=0;i<pts.length;i++){var p=pts[i];p.life*=.92;x.beginPath();x.fillStyle="hsl(272 85% 62%)";x.globalAlpha=p.life;x.arc(p.x,p.y,p.r*p.life,0,Math.PI*2);x.fill()}pts=pts.filter(function(p){return p.life>.02});x.globalAlpha=1;requestAnimationFrame(d)}window.addEventListener("pointermove",function(e){var r=c.getBoundingClientRect();pts.push({x:e.clientX-r.left,y:e.clientY-r.top,r:8+Math.random()*10,life:1})});window.addEventListener("resize",R);R();d();