背景
背景
为首屏与区块准备的动画背景。每一个都是项目里的一个文件,用 shadcn CLI 添加。
共 9 个背景。它们都是加入项目的文件,而不是需要时才渲染的包:可以自由改颜色、速度与密度。动画背景在离开屏幕或标签页隐藏时暂停,减少动效时显示静止帧,内容始终位于上层并可点击。
安装方式相同,只换名字:
bunx shadcn@latest add @animate-ui/backgrounds-bubble
Bubble五个经过模糊与颜色混合的气泡缓慢移动,可作为首屏或区块背景;开启 interactive 后第六个气泡跟随鼠标。Fireworks在容器底部持续发射烟花,火箭升空后炸成会下落、减速并淡出的粒子;点击可以在指针位置放一朵。Glyph由字符组成的场:平时只有漂移的光斑把字母和数字照亮,指针经过会唤醒一条光轨,点击则让图形从落点向外扩散。Gradient一块在容器背后缓慢往返的巨大渐变,用来给页面增加深度;它只作为背景材质,不参与前景排版。Gravity Stars在画布上漂移的星点,靠近指针时会被吸引或推开,并在离开后逐渐恢复。Hexagon铺满容器的六边形网格,悬停的格子会立即点亮,离开后用 1s 淡出并留下拖尾。Hole由圆环组成的隧道向深处滑动,粒子从隧道中升起,上面覆着一层每 5s 换色的极光。Stars三层不同大小与速度的星点向上循环滚动,制造纵深;移动指针时星空以视差反向偏移。Topography像地形图一样缓慢呼吸的等高线:指针下方会隆起一座小山,点击则让波纹扩散出去。
背景的动画预览在官方站点查看;本页与各详情页给出参数、安装与动效说明。