Brickslab.Tools

@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.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  particleCount={50}
  angle={90}
  spread={45}
  startVelocity={45}
  decay={0.9}
  gravity={1}
  colors={["#CC4A48", "#4ADE80", "#FBFBFB"]}
  ticks={200}
/>

particleCountanglespreadstartVelocitydecaygravitycolorsticks

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>
    </>
  );
}