Components / Feedback

Confetti

Component + manager

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.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentConfetti

Managercreate_confetti_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Confetti, create_confetti_manager, Button, create_button_manager } from "sveltekit-ui"

  const manager = create_confetti_manager({ amount: 40, time_range: 1000 })

  const celebrate_button = create_button_manager({
    text: "Celebrate",
    on_click: () => manager.show_confetti(),
  })
</script>

<Button manager={celebrate_button} />
<div style="position: relative; height: 12rem; overflow: hidden;">
  <Confetti {manager} />
</div>

API reference

Configure the manager, call its methods, and read its reactive state.

11 entries in configuration

Property	Type	Default	Description
`type`	`string`	`null`	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`	`null`	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