纸屑 | Magic UI - Magic UI 组件库

五彩纸屑

安装

import { Confetti } from "@/components/magicui/confetti";

<Confetti />

属性	类型	默认值	描述
`粒子数量`	`整数`	`50`	发射的纸屑粒子数量
`角度`	`数字`	`90`	发射纸屑的角度（度）
`扩散范围`	`数字`	`45`	纸屑的扩散范围（度）
`初始速度`	`数字`	`45`	纸屑的初始速度
`衰减`	`数字`	`0.9`	纸屑减慢的速度
`重力`	`数字`	`1`	作用于纸屑粒子的重力
`漂移`	`数字`	`0`	作用于粒子的水平漂移
`平面`	`布尔值`	`否`	纸屑粒子是否为平面
`持续帧数`	`数字`	`200`	纸屑持续的帧数
`原点`	`对象`	`{ x: 0.5, y: 0.5 }`	纸屑的原点
`颜色`	`字符串数组`	`['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff']`	HEX 格式的颜色字符串数组
`形状`	`字符串数组`	`['square', 'circle']`	纸屑的形状数组
`层叠顺序`	`整数`	`100`	纸屑的层叠顺序
`禁用低运动偏好`	`布尔值`	`否`	为偏好无动画的用户禁用纸屑效果
`使用 Web Worker`	`布尔值`	`是`	使用 Web Worker 以获得更好性能
`调整大小`	`布尔值`	`是`	是否调整画布大小
`画布`	`HTMLCanvasElement or null`	`null`	用于绘制纸屑的自定义画布元素
`缩放因子`	`数字`	`1`	纸屑大小的缩放因子

属性	类型	默认值	描述
`选项`	`对象`	`{}`	纸屑选项
`children`	`React.ReactNode`	`null`	在按钮内部渲染的子元素