All components
Fireworks
Background EffectsAuto-launching firework bursts painted on a canvas.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/fireworks.jsonOr install manually
1. Install dependencies
pnpm add clsx tailwind-merge2. Copy the component source into
components/library/fireworks.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Classes applied to the canvas. |
Accessibility
- Decorative canvas with no semantic content, so nothing is missed.
- Trail is drawn with a translucent fill rather than clearing each frame.
- Cancels its animation frame and ResizeObserver on unmount.
- Fixed dark background - the effect relies on additive-looking sparks.
Dependencies
clsxtailwind-merge