ASCII 字符矩阵

ASCII 字符矩阵在渐变图层上渲染一个全画布字符网格，字符实时响应鼠标距离 — 随光标接近而点亮、偏移或衰减，形成动态的互动式文字纹理。

矩阵运行于独立的 canvas 图层上，合成覆盖于 WebGL 输出之上，可独立控制视觉效果，不影响底层渐变动画。

字符集

字符集	内容	风格
代码	滚动代码片段	技术感、开发者美学
标准	@%#*+=-:.	经典 ASCII 亮度映射
方块	██▓▒░	粗犷图形化方块阴影
精细	完整 70 字符亮度渐变序列	最大色调细节
极简	·■	超稀疏、几何感
二进制	01	数据 / 赛博朋克风格
自定义	你的文字	品牌名称、关键词、任意字符串

自定义字符集

在自定义输入框中输入任意文本 — 品牌名称、一句话、单个重复字符 — 字符矩阵会将其平铺至整个画布。配合较大字号，这是将文字嵌入为纹理的有效方式。

鼠标交互

参数	效果
半径	光标周围的交互区域大小
衰减	光标离开后字符恢复静止状态的速度
平滑	交互响应的缓动程度 — 数值越高，激活越柔和
重力	控制网格纵向滚动，正负值改变方向；0 停止滚动

显示控制

参数	效果
网格尺寸（Grid Size）	字符网格单元尺寸
字符间距（Char Spacing）	网格间距倍数，影响横向和纵向排列
字符大小（Char Size）	字号；使用系统等宽字体栈，没有字体选择器
颜色	字符的填充颜色
混合模式	字符图层与渐变的合成方式

混合模式

混合模式	效果
叠加	字符继承渐变色调 — 最自然的融合
滤色	字符只提亮 — 适合深色渐变
颜色减淡	提亮底层颜色
加色	叠加亮度
正常	字符颜色平铺于渐变之上，不混合

交互模式

模式	说明
热力衰减	字符随光标接触点亮，然后衰减 — 留下发光轨迹
动态背景	整个字符网格持续动画；光标交互改变字符密度

TIP

在落地页 Hero 区域，试试代码字符集 + 中等字号 + 叠加混合模式 + 20% 衰减 — 这会创造出一个生动的背景纹理，不会与前景文字产生视觉竞争。