Confetti

彩纸庆祝

包含七种发射方式的 Canvas 彩纸庆祝效果。

Basic

Confetti

交互方式

彩纸覆盖整个视口，可飞出预览框。选择版本后点击 Celebrate 触发或重播。支持基础、随机方向、烟花、双侧礼炮、星星、自定义形状和 Emoji；Emoji 可换图案，停止会清除当前粒子。

使用示例

"use client"
import { useRef } from "react"
import { Confetti, type ConfettiRef } from "@/components/ui/confetti"

export function Demo() {
  const effect = useRef<ConfettiRef>(null)
  return <div style={{ position: "relative", height: 320 }}>
    <button onClick={() => effect.current?.fire()}>Celebrate</button>
    <Confetti ref={effect} variant="stars" fullscreen />
  </div>
}

参数

参数	类型 / 默认值	说明
`ref`	`Ref<ConfettiRef>`	fire(options?) 手动触发；stop() 停止并清空。再次 fire 会替换当前动画。
`variant`	`"basic" \| "random" \| "fireworks" \| "side-cannons" \| "stars" \| "shapes" \| "emoji"`"basic"	预设发射方式。
`fullscreen`	`boolean`false	将画布挂载到 body，覆盖整个视口并穿透鼠标事件，不受父容器裁切。
`options`	`ConfettiOptions`	覆盖粒子数量、颜色、形状、角度、速度等 canvas-confetti 参数；origin 相对于当前画布，全屏时相对于视口。
`duration`	`number`烟花 5000 / 双侧礼炮 3000	烟花和双侧礼炮的发射时长（毫秒），不含粒子消散时间。
`emoji`	`string`"🦄"	Emoji 版本使用的文字或表情。
`respectReducedMotion`	`boolean`true	尊重系统减少动态效果设置，开启时跳过动画。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

@types/canvas-confetticanvas-confetticlsxtailwind-merge

components/ui/confetti.css
components/ui/confetti.tsx
lib/utils.ts

来源

https://magicui.design/docs/components/confetti

https://github.com/magicuidesign/magicui/blob/main/LICENSE.md

https://github.com/catdad/canvas-confetti