矩阵背景

要解决什么问题

科幻或技术向的 React 站点常需要全屏动态背景，又不想引入重型动效库或视频资源。传统「数字雨」是字符下落，和固定网格、鼠标局部扰动不是同一类交互；若自己写 Canvas 动画，还要处理分辨率、触摸与性能衰减。

本技能提供一个自包含的 HexBackground.jsx：用 Canvas 铺满视口，在固定格点上渲染十六进制字符，字符在原位变形而非下落，并带鼠标/触摸涟漪——靠近指针的字符被推开并高亮，再经渐进衰减回到平静状态。

核心能力与用法

• 渲染模型：固定定位、覆盖全视口，z-index: 0，pointer-events: none，点击穿透到下层内容。
• 视觉：六色调色板（青、品红、金、绿、紫、橙）；字符集由 HEX_CHARS 控制。
• 交互：RIPPLE_RADIUS（默认 200px）内响应指针，产生外推与发光；衰减曲线让运动更顺滑。
• 集成：将组件拷入项目目录后 import 渲染即可，除 React 外无其它依赖。

组件顶部常量可直接改行为：CELL（格点像素，默认 44）、RIPPLE_RADIUS、HEX_CHARS、COLORS。

适用边界与注意点

• 仅适用于 React 项目；不是通用 HTML/CSS 片段或 Next 以外的框架无关方案（仍可作为客户端组件使用，需自行确认 SSR 下 Canvas 挂载时机）。
• 背景层不拦截事件，上层 UI 必须自行保证可点区域；若需要背景本身可交互，需改 pointer-events 并评估与页面逻辑的冲突。
• 格点密度与 CELL、视口尺寸相关，移动端可酌情调大 CELL 或缩小涟漪半径以控制绘制量。