參加鐵人賽寫文就像是一場長跑，眼看快要衝過終點，當然要來點華麗的慶祝儀式啦！✨
這時候是不是腦中已經浮現「放煙火、放鞭炮」的畫面了？🎆 那就對啦～因為 Animate UI 的 Fireworks Background 元件，正好能幫我們把這股歡樂氣氛搬上網頁。
不論是用來營造倒數的緊張感，還是象徵完成挑戰後的成就時刻，這個煙火背景都能帶來既專業又不失趣味的視覺效果。
使用 Shadcn CLI 加入 Fireworks Background
npx shadcn@latest add @animate-ui/components-backgrounds-fireworks
Import 元件並將元件放在想要的位置上
import { FireworksBackground } from '@/components/animate-ui/components/backgrounds/fireworks';
<FireworksBackground>...</>
若還有想要微調，可以增加更多參數 (? 表示為選填參數)
| 參數 | 參數型態 | 說明 |
|---|---|---|
| population | number |
畫面中同時存在的煙火數量 |
| color | string | string[] |
煙火的顏色，可為單一字串或字串陣列 |
| fireworkSpeed | { min: number; max: number } | number |
煙火上升速度，可為單一數值或區間範圍 |
| fireworkSize | { min: number; max: number } | number |
煙火大小，可為單一數值或區間範圍 |
| particleSpeed | { min: number; max: number } | number |
煙火粒子散射速度，可為單一數值或區間範圍 |
| particleSize | { min: number; max: number } | number |
煙火粒子大小，可為單一數值或區間範圍 |
若你想要讓煙火都是圓的，像是下面 GIF 樣子，可以將 particleSpeed 設定為單一數值，就會有這樣的效果了～
煙火一放，氣氛直接拉滿！🎇
Animate UI 的 Fireworks Background 可以用在像是里程碑完成、活動倒數，還是單純想讓畫面更有派對感。下次想要讓你的專案更熱鬧，就別忘了把這個煙火背景搬出來點燃全場吧！🔥
iThome鐵人賽
看影片追技術