欢迎使用 SX-Creval 系统的核心交互组件。这是一个基于电影级物理渲染技术（WebGL）打造的网页特效引擎。通过这个模块，您可以让一张普通的透明图片，瞬间变成由成千上万个发光粒子组成的、可以与鼠标产生真实物理互动的视觉奇观。
本文档旨在指导网站编辑人员和前端开发者如何配置与使用“炫酷发光粒子特效”模块。该模块由 WebGL (PixiJS) 强力驱动，专为 SX-Creval 外贸企业站打造，能够为品牌 Logo、产品轮廓或世界地图提供极具科技感和震撼力的视觉交互体验。为了让没有任何代码基础的编辑人员也能调配出顶级效果，我们将复杂的物理和视觉代码，转化为了后台几个简单的参数模块。
第一部分：后台参数配置说明 (面向网站编辑)
在您添加了“炫酷发光粒子特效”模块后，您会看到后台被划分为 5 个设置区域。请按照以下说明进行调配：
1. 内容与排版设置 (决定它长什么样、放在哪)
这是模块的骨架，决定了粒子与文字的排版关系。
- 模块应用场景 (排版模式)：
- 全屏：粒子占据整个屏幕的视觉中心。最适合放在网页第一屏展示品牌 Logo，或者全屏的世界地图。
- 左文案-右粒子 / 右文案-左粒子：画面一分为二。一边是您的标题和介绍文案，另一边是粒子特效。适合用于产品优势介绍或技术特色展示。
- 标题与描述 / 按钮组：如果您选择了左右排版，在这里填写您的营销文案和行动呼吁按钮即可。
2. 基础与交互设置 (决定原图如何变成粒子)
这里是控制粒子图形的基础形态。
- 上传形状图片 (极其重要)：系统只认 PNG 或 WEBP 格式，而且必须是透明背景（也就是抠掉背景的图）。千万不要传带有白色或黑色底的 JPG 图片，也不支持 SVG，传错了系统会强行拦截无法保存。
- Logo 画面占比大小：如果觉得粒子拼出来的图案在屏幕里太小了，就把默认的 0.45 调大（比如 0.6 或 0.8）；觉得太大就调小（比如 0.3）。
- 交互模式 (大招之一)：
- 始终为粒子形态：网页一打开，它就是一堆粒子，直接可以玩。
- 悬停无缝显影：网页打开时，它看起来就是一张普通的高清图片，客户根本不知道有特效。当客户鼠标放上去的一瞬间，图片会突然“炸开”变成可以拨弄的粒子。这是一种极度高级的隐藏彩蛋玩法。
- 使用原生色彩 / 备用发光颜色：勾选原生色彩，粒子会保留您原图的五颜六色；如果不勾选，所有粒子会统一变成您在下面填写的“备用发光颜色”（比如您可以填一个代表贵公司的科技蓝 #00ffcc）。
- 进场动画效果 & 速度：当客户滚动网页第一次看到这个区域时，粒子是怎么组装起来的。选“星光汇聚”就是从四面八方飞过来拼好；选“宇宙大爆炸”就是从中间猛地炸开再收拢。数字越大，飞得越快。
3. 视觉与渲染设置 (决定画面的“贵气”与“质感”)
这里决定了粒子看起来是像“粗糙的马赛克”还是像“昂贵的流沙”。
- [核心] 粒子实体大小：控制每一个小点点的核心大小。推荐保持在 1.0 - 2.0 之间。数值越小，组成的图案越细腻，越有高级的细沙感。
- [发光] 光晕扩散倍数：这是提亮画面的关键！如果您觉得画面不够亮，不要去加大实体大小，而是把这个光晕倍数调高（推荐 3.0 - 6.0）。这会让每个粒子散发出像霓虹灯一样的光晕。
- HDR霓虹色彩提亮：这是一个智能开关。如果您的原图颜色灰暗沉闷，开启它，系统会自动算出原图颜色的高饱和度版本，让它瞬间变成赛博朋克风的发光体。
- 像素采样密度 (性能生命线)：这是最重要的参数！它决定了系统要生成多少个粒子。
- 标准值为 4：画质与性能的最佳平衡。
- 数值越小（比如 3）：粒子极其密集，画质逆天，但可能会导致配置较差的电脑卡顿。
- 数值越大（比如 5 或 6）：粒子变稀疏，呈现像素风，非常流畅。如果发现网页滚动卡顿，请务必调高这个数字。
4. 静止生命力设置 (让网页在静止时也能“呼吸”)
当不碰鼠标时，粒子自己也会有生命力。
- 原地漂浮幅度：让图案有一种在水底微弱流动的错觉。0 是死死定住不动，0.5 是在原地轻微扭动。
- 星光微闪强度 & 频率：控制粒子的忽明忽暗。调高后，整个图形会像科幻片里的全息投影一样，产生轻微的电流闪烁和呼吸感。
5. 物理与动态设置 (决定鼠标摸上去的“手感”)
- 鼠标影响半径 & 排斥推力：决定您的鼠标有多大的“磁场”。半径越大、推力越大，鼠标一靠近，粒子就会被远远地粗暴推开。
- 归位弹簧力 & 摩擦阻尼：决定被推开的粒子怎么弹回来。阻尼设为 0.7，回弹非常干脆且带有 Q 弹感；阻尼设为 0.9，粒子就像在浓稠的液体里一样，慢悠悠地游回来。
- 开启物理运动模糊：强烈推荐开启。粒子在高速飞散时，会拉出残影光束，极大地提升爆发力！
- 开启全息 3D 视差：开启后，客户的鼠标在屏幕上下左右移动时，整个粒子矩阵会跟着发生 3D 空间的倾斜，空间立体感直接拉满。
第二部分：如何发挥这个功能的真正威力？(创意与实战)
理解了上面的参数，您就掌握了 SX-Creval 系统的视觉魔法。这个功能的威力在于，它不仅能处理 Logo，它能处理任何透明底图。以下为您提供几种直接可以落地的创意玩法：
创意 1：向客户展示“硬核且精密”的技术实力
- 使用场景：旗舰产品的详情介绍页。
- 创意配置：
- 找一张您公司最核心产品的抠图 PNG（比如一个轴承、一个精密的机械阀门、一块复杂的电路板、一台自动化设备）。
- 交互模式选择：悬停无缝显影。
- 视觉设置：开启 HDR霓虹提亮，光晕倍数调到 4.0。
- 物理设置：排斥力调小，摩擦阻尼调到 0.9。
- 产生的威力：客户滑动到这里时，看到的是一张高清的产品图。当他们出于好奇将鼠标移到产品上时，这台坚硬的工业设备会瞬间像流沙一样化为几万个闪烁的精密粒子，鼠标离开后又缓慢流淌重组为设备。
创意 2：建立全球化的叙事
- 使用场景：网站的“关于我们”或“全球网络”版块。
- 创意配置：
- 上传一张世界地图的透明 PNG 图（最好是镂空的）。
- 排版模式选择：全屏或左文右粒子。
- 关闭“使用原生色彩”，备用发光颜色填入充满科技感的荧光绿或雷达蓝。
- 静止设置：大幅调高“星光微闪强度”，制造呼吸感。
- 产生的威力：整个世界地图会变成一个类似军工级雷达的动态全息投影，配合 3D 视差倾斜，给海外采购商一种贵公司“规模宏大、数字化管理、业务遍布全球”的跨国大厂视觉冲击。
创意 3：把口号变成互动的视觉艺术 (流体字体排版)
- 使用场景：网站首页的标语区，或者企业愿景模块。
- 创意配置：
- 让设计师把公司最核心的英文口号（比如 "PRECISION ENGINEERING"）排版好，存为一张透明 PNG。
- 进场动画选择：星光汇聚。
- 视觉设置：粒子实体大小调到最小的 1.0，密集度调到 3 或 4。
- 产生的威力：摒弃传统的无聊文本！当网页加载时，无数高亮光尘在屏幕中心高速组装成这句口号。客户的鼠标可以像划过水面一样划过这句标语，文字会被拨开形成波纹，这是一种属于奢侈品级别的高端互动体验。
第三部分：底层架构说明
该模块的设计不仅追求极致的视觉效果，更在性能消耗与代码架构上做了深度的平衡：
- 基于 Wagtail 的防崩溃数据校验：
为了保证前端 WebGL 解析不会因为错误的图片通道而导致内存溢出或黑屏，我们在后端规范了图片格式，精确拦截非 PNG/WEBP 格式，并将报错红色提示精准挂载到后台的图片上传字段下方，实现了数据源头的绝对干净。（这是为了避免因上传超大的JPG导致性能受损） - Alpine.js 的生命周期与内存管理：
前端使用 Alpine.js 的 x-data 构建沙箱作用域，接收 Django 模板传递的配置。利用 @destroy.window="cleanup"，确保在 HTMX 页面无刷新跳转或组件销毁时，严格执行 PixiJS 的 app.destroy()，释放 WebGL 上下文，彻底杜绝内存泄漏。 - 基于 IntersectionObserver 的休眠机制：
极度消耗 GPU 资源的粒子 Ticker 循环并不是一直运行的。我们设置了 threshold: 0.55 的视口交叉观察器。只有当这个模块超过 55% 暴露出现在浏览器可视区域时，计算引擎才会启动；一旦滑出屏幕，引擎立即挂起，将显卡资源交还给操作系统的其他进程。 - 移动端的自适应降级补偿策略：
引擎内置了针对移动设备 (innerWidth <= 768) 的自动降级逻辑。- 自动关闭高消耗的鼠标 3D 矩阵视差变换，防止干扰手机端正常的上下滑动。
- 自动对主体 imageScale 进行高达 1.5 倍的缩放补偿，防止 Logo 在竖屏下过小。
- 自动等比例缩小物理排斥半径，防止手机端较小的屏幕容纳不下飞散的粒子。整个适配过程无需运营人员在后台配置两套数据。
- 原生 Canvas 的 Shader 替代方案：
为了减少外部资源的 HTTP 请求，模块内没有引入额外的发光贴图，而是使用原生的 Canvas 2D API 实时绘制了一张 256x256 的 5 层渐变贴图。通过合理的透明度梯度计算与 PIXI 的 blendMode: 'add' 相结合，在极低的性能开销下实现了 HDR 级别的高亮泛光渲染。