图片点阵粒子背景

左右粒子独立流动，留白与光影变化衬出图片轮廓。

复刻提示词

以上传的图片为形态来源，用 HTML、CSS、JavaScript 实现图片点阵流动背景。只生成背景效果，不复刻网页、文案、导航或 Logo。默认浅色背景 #f8f8f6、深色粒子 #111，同时支持切换为近黑背景 #080808、白色粒子。

1. 固定点阵与颗粒尺寸
关键是“图像形态在固定点阵中流动”，不是随机飞散的小球，也不是整张图片摇晃。点心位置固定，使用一层圆点，没有静态底图、重复点层或拖尾。
将图片等比缩放居中到 736 × 491 的取样空间。读取像素一次，把归一化亮度 L = (0.2126R + 0.7152G + 0.0722B) / 255 × alpha 缓存成亮度场；原图不直接显示。
建立完整规则网格：桌面横向间距 6px、纵向 10px；绘制缩放 s = min(画布宽 / 820, 画布高 / 580)。在约 620px 宽预览中，点距约 4.5px、行距约 7.5px。粒子半径 r = 0.22 + 1.88 × L^0.8，再乘 s；强颗粒直径不超过约 3.2px，弱颗粒可以很小。横向密、纵向疏，保留清楚的条带和颗粒间隙。
使用原图高光生成更大、更强的点，暗部生成更小、更淡的点；浅色模式呈现反差点阵，不是直接反转整张位图。低于 7.5% 的亮度不显示；覆盖度 C = smoothstep((L − 0.075) / 0.125)，让形态边缘自然出现、消失，不把背景也填满。

2. 图像形态流动
每个固定点根据当前时间计算反向采样坐标，再对缓存亮度场做双线性插值。每帧只读取内存中的亮度，不重新读取 Canvas 像素或下载图片。点阵位置不变，变化的是粒子半径和透明度，让轮廓、暗亮区域在点阵上平滑移动。
左右分别建立独立流场，同一行共享位移和伸缩，邻近行变化连续。设总周期 18 秒，φ = 2π × 周期进度，n = (y − 245.5) / 491，左侧相位 b = 0.45、右侧 b = 2.15：
dx = 42sin(φ+b) + 18sin(2φ−9n+b) + 7sin(3φ+13n+2b)；
dy = 20sin(φ+1.7b) + 9sin(2φ+5n+b)；
k = 1 + 0.11sin(2φ−7n+b)。
以各半区中心 c（184 或 552）计算源坐标 sx = c + (x − c − dx) / k，sy = y − dy。超出图片边界的亮度为零。流场使形态左右移动、局部伸展收拢，纵向形态轻微起伏，但点心仍保持水平行列。左右不同步，不做镜像，也不逐帧随机。不要强迫所有颗粒持续向右飞，或用单粒子行程重置制造流动。
透明度在 C 的基础上乘 0.86 + 0.14sin(φ+8n+2b)，只做轻微光影调制，不同时闪烁。所有波使用整数倍频率，18 秒循环首尾连续。上述数值是可调重建参数，不是原效果源码的精确值。

3. 构图与渐隐
左右点阵各向外平移 28px，中间保留约 80px 无粒子区，向左右各渐变 44px；粒子不能穿过中央。
图片左右外缘同样渐隐：向外平移后的边界 x = ±396px 处完全透明，向内 72px 使用 smoothstep 过渡。中央和外缘遮罩都在绘制坐标中计算，不随图像采样流场移动，不突然切断手腕或指尖。
保留上传图片可识别的主体及原有空白，不增加光晕、3D 翻转、星空或爆炸效果。

4. 控制与性能
提供暂停、重播、进度条及右上角浅色／暗色切换。主题按钮可见尺寸 36px × 36px，图标 18px，向外扩展点击区域至 44px × 44px。切换只变配色，不重置流场、时间或播放状态。画布尺寸固定，不推动周围布局。
图片准备完成后自动播放；按真实时间驱动。移动端网格为 8px × 12px，半径补偿 1.1 倍，约 30fps，DPR 上限 2；不能因减帧而减慢动画。后台或滚出可见区域时冻结时间，销毁时停止帧循环和监听。
减少动态效果模式显示原图形态的静态点阵。图片加载、读取失败或无有效主体时给出提示。
交付一个可直接保存为 index.html 打开的完整示例，提供图片替换入口。验收：点心固定、颗粒圆且大小分明，横向条带错相流动、轮廓会伸展收拢，中央留白和两侧渐隐稳定；没有重影、跳点、闪烁或循环接缝。

动画源代码

会员解锁后可查看并复制完整 Web / Swift 源码。

<!-- # 保存为 index.html 后打开；示例图片已内嵌，替换下方 imageSrc 即可使用自己的图片。 -->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>图片点阵粒子背景</title>
<!-- The image is sampled once. Only the background particle effect is recreated.
     All particle motion runs locally; there are no server or AI requests.
     Use local, same-origin, or CORS-enabled imageSrc. Keep the image rights in mind.
     Fixed scanlines; image morphology changes dot sizes. Theme toggle preserves playback.
     Use luminance on a dark/transparent background. Light backgrounds also create dots. -->
<style>
* { box-sizing:border-box; }
body { margin:0; padding:20px; background:#f7f6f2; font-family:system-ui,sans-serif; }
button { font:inherit; }
main { max-width:900px; margin:auto; }
.motion-preview { border-radius:16px; overflow:hidden; margin:20px 0; }
.motion-controls { width: calc(100% - 48px); margin: 0 auto; padding-bottom: 16px; color: #a7a79b; }
.motion-control-row { display: flex; align-items: center; gap: 8px; }