Confetti Showcase
confetti comes from here
Component Documentation
Component Name
Confetti
Builder Function Name
create_confetti_manager
Description
Creates a confetti animation with configurable item count, size, and random spread. There is a confetti component already in the Layout componet if full screen confetti is desired
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | defines layout type (e.g. 'full' to fill screen) or null for local usage | |
| amount | number | 50 | how many confetti pieces to generate |
| size | number | 1.2 | base size multiplier for each confetti piece in rem |
| x_range | array | -10,10 | range for random x translation (in rem), e.g. [-10, 10] |
| x_spread | number | 0.9 | scales how far confetti travels horizontally during the fall |
| y_range | array | -3,-10 | range for random initial y position (in rem) |
| time_range | number | 50 | range (in ms) added to each piece's start delay |
| duration | number | 2000 | animation duration for each piece, in milliseconds |
| item_bg | any | background for confetti items, can be array of strings or 'rainbow' | |
| fall_distance | string | 10rem | vertical distance that confetti travels before disappearing |
| border_radius | number | 0.1 | border radius (rem) applied to each piece |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| show_confetti | resets the confetti state, preps items, then triggers the confetti animation | No Params | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| type | string | layout type (e.g. 'full' for full-screen confetti) if set |
| confetti_prepped | array | array of pre-calculated confetti items with random transformations |
| is_show | boolean | indicates if confetti is currently visible |
| border_radius | number | border radius in rem for each piece |
| fall_distance | string | vertical distance that confetti falls before disappearing |
| size | number | base size multiplier (rem) for each confetti piece |
| transition_duration | number | duration (ms) for each confetti piece’s animation |
| x_spread | number | horizontal spread factor used in the confetti path animation |
