Glyph 背景

由字符组成的场：平时只有漂移的光斑把字母和数字照亮，指针经过会唤醒一条光轨，点击则让图形从落点向外扩散。

安装

背景是项目里的一个文件，用 shadcn CLI 添加，然后按需要改颜色与速度。

终端

bunx shadcn@latest add @animate-ui/backgrounds-glyph

用法

把背景放进一个定位容器，内容渲染在上层；容器需要自己处理溢出。

glyph.tsx

import { GlyphBackground } from '@/components/animate-ui/backgrounds/glyph';

export function Hero() {
  return (
    <section className="relative h-[560px] overflow-hidden bg-[#121212]">
      <GlyphBackground className="absolute inset-0 text-white" />
    </section>
  );
}

动效

背景是等宽字体的随机字母与数字网格，没有光时不可见，偶尔有个字符自行变化。
静止时由字符组成的柔光以约 30px/s 向左下漂移，移动中不断重组；减少动效下停止漂移。

所有背景都会在离开视口与标签页隐藏时暂停；减少动效时保留静止构图，不播放位移与循环。

API

属性	类型	默认值
glowColor	`string`	`—`
shapeColor	`string`	`—`
fontSize	`number`	`10`
interactive	`boolean`	`true`
…props	`React.ComponentProps<'div'>`	`—`

背景接受容器 div 的全部属性，className 用来控制位置与尺寸；内容作为children 渲染在背景之上。