BricksLab Catalog

@brickslab/ui-web

Canvas-based confetti animation effect with customizable particles, colors, physics, and shapes. Perfect for celebrations, milestones, and success states.

Aperçu

Default Confetti (Center burst)

Props Table

Prop	Type	Défaut	Requis	Description
`particleCount`	`number`	`50`	—	Number of particles to generate.
`angle`	`number`	`90`	—	Launch angle in degrees.
`spread`	`number`	`45`	—	Spread range in degrees.
`startVelocity`	`number`	`45`	—	Initial particle velocity.
`decay`	`number`	`0.9`	—	Velocity decay factor per frame.
`gravity`	`number`	`1`	—	Gravitational pull per frame.
`colors`	`string[]`	`["#CC4A48", "#4ADE80", "#FBFBFB"]`	—	Array of particle colors.
`ticks`	`number`	`200`	—	Total animation duration in ticks.

Usage

tsx

import { Confetti } from "@brickslab/ui-web";
import { useState } from "react";

export function MyComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <>
      {isActive && <Confetti particleCount={100} angle={90} spread={60} />}
      <button onClick={() => setIsActive(true)}>
        Trigger Confetti
      </button>
    </>
  );
}