Library Effects

光标聚光灯

精细指针下的局部聚光，粗指针与减弱动效时自动关闭。

指针光域精细指针下的局部聚光，粗指针与减弱动效时自动关闭。将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

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