前言 #
參加鐵人賽寫文就像是一場長跑，眼看快要衝過終點，當然要來點華麗的慶祝儀式啦！✨ 這時候是不是腦中已經浮現「放煙火、放鞭炮」的畫面了？🎆 那就對啦～因為 Animate UI 的 Fireworks Background 元件，正好能幫我們把這股歡樂氣氛搬上網頁。 不論是用來營造倒數的緊張感，還是象徵完成挑戰後的成就時刻，這個煙火背景都能帶來既專業又不失趣味的視覺效果。
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>...</> -
若還有想要微調，可以增加更多參數 (? 表示為選填參數)
FireworksBackgroundProps #
參數 參數型態 說明 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 可以用在像是里程碑完成、活動倒數，還是單純想讓畫面更有派對感。下次想要讓你的專案更熱鬧，就別忘了把這個煙火背景搬出來點燃全場吧！🔥