Cursor Spotlight

Soft spotlight following the pointer—subtle, gated, never neon.

Soft ambient followSoft spotlight following the pointer—subtle, gated, never neon.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: Technology
Style: Dark
Tech stack: CSS
Animation: Cursor
Difficulty: Beginner
License: Personal
Access: Free
Creator: Noah Bennett
Views: 314

Cursor
CSS
JavaScript

Copy. Paste. Create.

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

Build a cursor spotlight ambient effect: radial-gradient following pointer at low opacity. Disable on coarse pointers and reduced motion. Use CSS variables --spot-x/y updated via rAF throttling. Do not block clicks (pointer-events: none on the layer).

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(26 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();