你會得到

  • 單一 HTML 檔的完整首屏:標頭、首屏、步驟晶片與跑馬燈
  • 附型別的 React 與 Tailwind 區塊,含可重複使用的粒子場元件
  • 不依賴函式庫的粒子引擎,支援球體、環、波浪、螺旋與圖像造形
  • 暖紙色的淺色與深色權杖,以及檢查超出色盤顏色的工具
  • 可選:PopNow 為粒子生成的產品剪影,先報價後才執行

適合

  • SaaS、應用程式與工具的登陸頁
  • 能用三個簡短概念說完的上線
  • 以溫和動態取代靜態首屏圖片

不適合

  • 深色、高能量的品牌
  • 長篇、依捲動推進的故事
  • 已由大幅照片或影片主導的頁面

怎麼用

在 Claude 或 ChatGPT 裡

用 PopNow 的技能「粒子動畫首屏」(particle-animation-hero)幫我做這件事:為我的習慣追蹤器在 Next.js 網站加一個首屏:「小步驟,每天堅持」,概念為 Track、Stack、Celebrate。

在程式 Agent 裡

/popnow-particle-animation-hero 為我的習慣追蹤器在 Next.js 網站加一個首屏:「小步驟,每天堅持」,概念為 Track、Stack、Celebrate。

接著試試

讓第三個概念組成 public/leaf.png 裡的葉子標誌。

也給我等候名單頁用的純 HTML 版本。

需要準備

  • 一個標題、一到兩句話與兩個連結
  • 三個簡短概念,每個附一行說明
  • 可選:你的標誌或產品的透明 PNG,或 PopNow API 金鑰

類似技能

查看全部 →

常見問題

會很吃效能嗎?

不會。它是一個 2D 畫布加上幾百行純 JavaScript,沒有 WebGL 或動畫函式庫。點的數量會隨螢幕大小調整,分頁隱藏與首屏捲離畫面時循環就會停止。

粒子能組成我的標誌嗎?

可以,只要你擁有它。提供一張清楚簡單形狀的透明 PNG,引擎就會把它取樣為點。PopNow 也能在你看過價格後,為你的產品生成乾淨的剪影。

訪客如何控制它?

按鈕下方的三個步驟晶片可以點擊或以方向鍵切換,讓點陣變形。在有人選擇之前,粒子場每隔幾秒會自己前進。

它尊重減少動態效果的設定嗎?

會。開啟減少動態效果時,點保持靜止,步驟切換不做補間動畫,不會自動前進,跑馬燈也停止滑動。