粒子文字变形

制作一个单文件 HTML 的粒子文字变形效果。 页面提供一个输入区域，用户可以输入两段文字（例如"Hello"和"World"）。文字通过 Canvas 离屏渲染后进行像素采样，将每个采样点转化为一个粒子，形成粒子文字。 核心交互：页面同时展示两段粒子文字的第一段。当用户点击画布（或点击"变形"按钮）时，第一段文字的粒子群平滑变形为第二段文字的形状。再次点击则变形回第一段。整个过程是可逆的循环切换。 变形动画要求： - 粒子从源文字位置到目标文字位置的运动轨迹不能是简单的直线，需要有弧度或随机扰动，产生"粒子飞散再重组"的视觉效果 - 如果两段文字的粒子数量不同，多余的粒子需要有优雅的淡入/淡出处理 - 变形过程中粒子可以有颜色渐变过渡 - 整体动画时长约 1-2 秒，要流畅自然 视觉要求： - 深色背景，粒子本身发光，有科技感/数字艺术感 - 粒子大小可以有微小的随机差异，增加层次感 - 静止状态下粒子可以有轻微的呼吸/浮动效果，不要完全静止 - 页面整体布局简洁大气，输入区域不要喧宾夺主 技术提示： - 使用离屏 Canvas 渲染文字，通过 `getImageData` 采样像素点生成粒子坐标 - 粒子运动可以用缓动函数（easing）或弹性动画（spring） - 注意粒子数量与性能的平衡，采样间隔建议 3-6px 请输出完整的 HTML。