什麼是粒子特效產生器？

為您的網站或應用程式設計並預覽粒子動畫。設定粒子數量、速度、大小、顏色、形狀、互動行為和物理參數，建立雪花、紙花、螢火蟲或銀河等效果。匯出設定為可直接使用的程式碼。

底層引擎是 tsParticles,所以複製出來的 JSON 配置可以直接放進 React、Vue 或純前端專案。滑鼠懸停與點擊互動（排斥、抓取、放大、推動、移除）、不透明度漸變以及顏色（色相）動畫都開箱即用,HTML 匯出還會透過 CDN 把引擎打包進去,直接貼到靜態頁面就能跑,不用建置工具。你還可以把即時預覽錄製成動態 GIF,隨處分享這個效果。

使用方法

1. 選擇預設效果（雪花、紙花、螢火蟲、氣泡、銀河、網絡、煙火、火焰、煙霧），或從頭開始建立。
2. 微調粒子屬性：數量、速度、大小範圍、顏色、形狀、透明度以及重力和彈性等物理參數。
3. 即時預覽動畫效果，然後複製 tsParticles JSON 設定、匯出獨立的 HTML 程式碼片段，或把預覽錄製成動態 GIF。

何時使用

• 替節慶活動頁或產品發表頁加一層飄雪或彩帶粒子。
• 在請設計師介入前,先替 SaaS 主視覺區拼一個動態背景的雛形。
• 幫作品集或遊戲選單頁做一個銀河、螢火蟲樣式的背景。

結果

一位網頁開發者選擇雪花預設，將粒子數量增加到 200，加入輕微的風力飄移效果，然後複製 JSON 設定為節日登陸頁增添冬季氛圍。

常見問題

匯出的 JSON 能不能用在任何前端框架?

可以。配置完全相容 tsParticles,官方提供 React、Vue、Svelte、Angular 與原生 JS 的綁定。安裝對應的 wrapper,把 JSON 當 options 傳入,效果就和這裡的預覽一模一樣。

粒子數量多少之後會開始卡頓?

在現代筆電上 200 到 400 個粒子可以維持 60 fps。超過 500 之後中階手機就會掉幀。星形和多邊形比圓形更耗效能,因為描繪路徑更複雜。要相容手機建議保持在 100 至 150,並關閉互動。

為什麼匯出 HTML 後動畫看起來不一樣?

HTML 片段會把畫布拉伸到父容器的尺寸。如果貼到一個很小的 div,粒子就會擠在一起。讓外層容器設定固定高度(例如 100vh 或 400px),畫布就會自動撐開。

可以用自訂圖片當粒子形狀嗎?

介面上沒提供這個選項,但底層 tsParticles 引擎支援。匯出 JSON 後,修改 shape.options.image 欄位,指向你的 PNG 或 SVG 即可。圖片會依每個粒子分配到的大小與透明度渲染。

粒子動畫會拉低網站效能評分嗎?

引擎本身約 30 到 80 KB(gzip 後),再加上畫布持續重繪。想顧及 Lighthouse 分數,可以降低手機端粒子數並關閉互動。讓引擎在 Hero 區可見後才延後載入,可以維持 LCP 指標。

相關工具