Appearance
Function: confetti()
ts
function confetti(props?: ConfettiBlockProps): Element;Defined in: src/UI/blocks/confetti.tsx:111
Confetti animation component displaying animated confetti particles.
Parameters
| Parameter | Type | Description |
|---|---|---|
props? | ConfettiBlockProps | Configuration object |
Returns
Element
Examples
Basic usage with defaults (80% height, CSS variable colors)
confetti();Usage with explicit height in pixels
confetti({
height: 300
});Usage with percentage height
confetti({
height: '100%'
});Usage with custom colors
confetti({
height: 300,
colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57']
});Usage with dynamic height based on params with data and value
confetti({
height: ({data}) => data.containerHeight || 300
});Usage with dynamic colors based on params with data and value
confetti({
height: 300,
colors: ({data}) => data.theme === 'dark'
? ['#7FB069', '#B96AC9', '#E57AA3']
: ['#FF6B6B', '#4ECDC4', '#45B7D1']
});Usage with custom styling
confetti({
height: 400,
style: {
position: 'absolute',
top: 0,
left: 0
},
className: 'celebration-confetti'
});