彩纸 | Magic UI - Magic UI 组件库

彩纸屑

安装

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

<Confetti />

属性	类型	默认值	描述
`particleCount`	`整数`	`50`	要发射的彩纸粒子数量
`angle`	`数字`	`90`	发射彩纸的角度（度）
`spread`	`数字`	`45`	彩纸的散射角度（度）
`startVelocity`	`数字`	`45`	彩纸的初始速度
`decay`	`数字`	`0.9`	彩纸减速的速度
`gravity`	`数字`	`1`	施加到彩纸粒子上的重力
`drift`	`数字`	`0`	施加到粒子上的水平漂移
`flat`	`布尔值`	`false`	彩纸粒子是否扁平
`ticks`	`数字`	`200`	彩纸持续的帧数
`origin`	`对象`	`{ x: 0.5, y: 0.5 }`	彩纸的起始点
`colors`	`字符串数组`	`['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff']`	HEX 格式的颜色字符串数组
`shapes`	`字符串数组`	`['square', 'circle']`	彩纸的形状数组
`zIndex`	`整数`	`100`	彩纸的 z-index
`disableForReducedMotion`	`布尔值`	`false`	为偏好无动画的用户禁用彩纸效果
`useWorker`	`布尔值`	`true`	使用 Web Worker 以获得更好性能
`resize`	`布尔值`	`true`	是否调整画布大小
`canvas`	`HTMLCanvasElement or null`	`null`	用于绘制彩纸的自定义画布元素
`scalar`	`数字`	`1`	彩纸大小的缩放因子

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