光标聚光 · Cursor Spotlight
英文：Cursor Spotlight
动效与交互难度：入门 ★
🗣️一句话大白话
光标经过处“点亮”内容：暗色背景上，光标周围一圈变亮、其余保持暗。作品集、暗色展示页的氛围利器。聚光效果通常用一个大径向渐变（radial-gradient）跟随光标，或用混合模式做“擦亮”。告诉 AI“以光标为中心的径向亮区、半径 300px、其余压暗”。要点：亮度反差别太大（伤眼）、与内容层级配合（聚光处正好是主内容）；移动端禁用。
🎬真实场景
作品集封面、暗色品牌页、图片画廊、开场页
📮你可以这样说
「【图像模型版】暗色页面加聚光效果：以光标为中心、半径 300px 的圆形亮区，区域外压暗至 60%；光标移动时亮区平滑跟随。 【HTML/CSS/JS 版】[容器] 背景叠一个 radial-gradient(circle 300px at mouseX mouseY, rgba(255,255,255,0.15), transparent 60%)，rAF 更新坐标；或用 mix-blend-mode: screen 叠加。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：聚光=放大镜；聚光是“局部变亮/变清”，不做内容放大
- ▸反差过大伤眼，压暗别低于 50%
🚫什么时候别用
- ✗移动端（无 hover）
- ✗亮色为主的页面
🧩常见变体
径向亮区擦亮混合聚光+内容浮现
💡小贴士
- ✦亮区半径 200-400px 最自然；与 fade 内容配合使用更妙
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（中篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗