Fireworks 背景

在容器底部持续发射烟花，火箭升空后炸成会下落、减速并淡出的粒子；点击可以在指针位置放一朵。

安装

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

终端

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

用法

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

fireworks.tsx

import { FireworksBackground } from '@/components/animate-ui/backgrounds/fireworks';

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

动效

每 300–800ms 发射一枚火箭（按 population 分摊），尾部拖出轨迹，炸开后生成 50–150 个粒子。
粒子边减速边下落并淡出；点击时朝指针方向补发一枚火箭。

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

API

属性	类型	默认值
population	`number`	`1`
color	`string \| string[]`	`a random hue per rocket`
fireworkSpeed	`number \| { min: number; max: number }`	`{ min: 4, max: 8 }`
fireworkSize	`number \| { min: number; max: number }`	`{ min: 2, max: 5 }`
particleSpeed	`number \| { min: number; max: number }`	`{ min: 2, max: 7 }`
particleSize	`number \| { min: number; max: number }`	`{ min: 1, max: 5 }`
canvasProps	`React.ComponentProps<'canvas'>`	`—`
…props	`Omit<React.ComponentProps<'div'>, 'color'>`	`—`

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

内容对应官方文档 2026-10-18 版本。