Topography 背景

像地形图一样缓慢呼吸的等高线：指针下方会隆起一座小山，点击则让波纹扩散出去。

安装

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

终端

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

用法

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

topography.tsx

import { TopographyBackground } from '@/components/animate-ui/backgrounds/topography';

export function Hero() {
  return (
    <section className="relative h-[480px] overflow-hidden">
      <TopographyBackground className="absolute inset-0 text-neutral-500" />
    </section>
  );
}

动效

地形由梯度噪声场绘制成等高线，每第五条为更粗更亮的索引线，噪声随时间以 speed 漂移，地貌持续重塑。
挂载时地形在 1.8s 内从平地升起，线条从中线向两侧展开；减少动效下直接显示静态地形。

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

API

属性	类型	默认值
lineColor	`string`	`—`
levels	`number`	`16`
speed	`number`	`1`
scale	`number`	`1`
peak	`number`	`1`
interactive	`boolean`	`true`
transition	`SpringOptions`	`{ stiffness: 120, damping: 20 }`
…props	`React.ComponentProps<'div'>`	`—`

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