前端代码：边框反光，SVG图标光影互动效果

通过多点光源与玻璃感面板，实时演绎可视化交互细节

以「一块永远在线的流光灯板」为灵感，这个前端模板将青柠绿、炽热橙、霓虹蓝与星云紫四种色域注入同一个玻璃拟态面板，通过 SVG Specular Lighting + 多点光源混合，呈现出具有体积感的金属反射效果。配合可拖拽的图标和实时控制台，无论是发布会 Demo、交互作品集还是新锐品牌官网，都能在几秒内让观众感知到你的视觉调性。

模板亮点

• 全局可视化控台：基于 Tweakpane 构建的「光影控制台」，支持调节主题、光源色值、Z 轴距离、高光强度等参数，实时看到效果。
• GSAP + Draggable 动态：拖动任意图标即可重定位光源，GSAP 会自动同步 SVG fePointLight，展示真实动线轨迹。
• 玻璃拟态面板：OKLCH 色彩混合、双层蒙版和模糊过滤器叠加，营造出有厚度的玻璃面与呼吸感描边。
• 轻量可移植：只需一份 index.html、style.css、script.js 即可运行，方便嵌入任何静态站点或 Web 展示页。

适用场景

这个模板非常适合需要高质感视觉的产品或品牌，包括：

• 科技类发布会 Demo、Web3/NFT 展示页、AI 工具登陆页；
• 设计工作室、交互作品集、视觉装置投影；
• 需要快速验证光影概念的品牌工作坊或电商营销页。

无论你是 UI/UX 设计师、交互艺术家、品牌营销顾问，还是正在筹备创业路演的团队，只要想把「光影」作为核心叙事，这个模板都能成为你的即插即用舞台。

快速开始

1. 克隆或下载本仓库；
2. 直接打开 index.html 即可看到互动效果；
3. 若需自定义图标或光源，修改 index.html 内的图标资源与 script.js 中的 config.lights 参数即可；
4. 如需接入自己的品牌文案或 CTA，可参考示例结构，替换为你的信息。

提醒：本 Demo 使用了 ES6 Module（GSAP 与 Tweakpane 通过 type="module" 引入），部署时请使用支持模块脚本的环境。

本地运行教程