你會得到

  • 完整的首屏,單一 HTML 檔,可從磁碟或 iframe 執行
  • 引擎的 ES 模組,以及 React 與 Next.js 元件
  • 五種配色主題,以及密度、拉力與環的調整表
  • 內建觸控、減少動態效果、分頁隱藏與離開畫面的處理
  • 可選:PopNow 的影片底圖或產品圖,執行前先報價

適合

  • 開發者工具、AI 產品與上線頁面
  • 作品集與活動開場,邀請訪客互動
  • 以更輕量的方式取代循環播放的背景影片

不適合

  • 需要淺色背景的淺色或粉彩品牌
  • 健康或金融表單等非常沉靜的頁面
  • 長篇、依捲動推進的故事

怎麼用

在 Claude 或 ChatGPT 裡

用 PopNow 的技能「互動網格首屏」(interactive-grid-hero)幫我做這件事:做我 CLI 工具網站的首屏:「一個指令完成部署預覽」,琥珀色網格,附「安裝」與「閱讀文件」按鈕。

在程式 Agent 裡

/popnow-interactive-grid-hero 做我 CLI 工具網站的首屏:「一個指令完成部署預覽」,琥珀色網格,附「安裝」與「閱讀文件」按鈕。

接著試試

讓網格更沉靜,也稍微稀疏一些。

在網格下加一段非常暗的煙霧影片,先告訴我點數。

需要準備

  • 簡短的標題、一到兩句話,以及你的按鈕連結
  • 一個主題,或你的品牌強調色
  • 可選:能力提示,以及可放在證明列中的名稱

類似技能

查看全部 →

常見問題

需要函式庫或 WebGL 嗎?

不需要。效果是在 2D 畫布上的純 JavaScript,約 300 行,沒有任何相依套件。範本可以離線運作,也能在沙箱 iframe 中執行。

在手機上會怎樣?

輕觸會送出一個環,左右拖曳會拉動網格,而上下滑動仍會捲動頁面。在有人觸碰之前,緩慢的閒置漂移會讓網格持續移動。

可以使用我的品牌色嗎?

可以,作為其中一個深色背景上的強調色與環的顏色。效果依賴淡線的提亮,因此背景保持非常深;黑白品牌則使用單色主題。

它有無障礙支援嗎?

文案、連結與按鈕都是畫布上方的一般 HTML,並保留焦點樣式。開啟減少動態效果時,網格會是靜態畫面;分頁隱藏或捲離畫面時,循環會暫停。