你会得到

  • 一个 HTML 文件即为完整首屏:页头、主视觉、步骤标签和跑马灯
  • 带有可复用粒子场组件的类型化 React 加 Tailwind 模块
  • 无库依赖的粒子引擎,支持球体、环形、波浪、螺旋和图像造型
  • 暖纸色的浅色和深色令牌,以及检查色板外颜色的检查器
  • 可选的 PopNow 产品轮廓,供粒子组成,报价后生成

适合

  • SaaS、应用和工具的落地页
  • 能用三个简短理念讲清的发布
  • 用轻柔的动效替代静态主视觉图片

不适合

  • 深色、高能量的品牌
  • 依靠滚动驱动的长篇叙事
  • 已经由大幅照片或视频主导的页面

怎么用

在 Claude 或 ChatGPT 里

用 PopNow 的技能「粒子动画主视觉」(particle-animation-hero)帮我做这件事:为我的习惯追踪应用在 Next.js 网站上加一个主视觉:“小步前进,每天坚持”,三个理念分别是追踪、堆叠、庆祝。

在编程 Agent 里

/popnow-particle-animation-hero 为我的习惯追踪应用在 Next.js 网站上加一个主视觉:“小步前进,每天坚持”,三个理念分别是追踪、堆叠、庆祝。

接着试试

让第三个理念组成 public/leaf.png 中的叶子标志。

也给我候补名单页用的纯 HTML 版本。

需要准备

  • 一个标题,一两句说明,以及两个链接
  • 三个简短理念,每个附一行说明
  • 可选:你的标志或产品的透明 PNG,或 PopNow API 密钥

类似技能

查看全部 →

常见问题

它很占资源吗?

不占。它只是一块二维画布加几百行原生 JavaScript,没有 WebGL 或动画库。圆点数量随屏幕尺寸调整,在隐藏的标签页中以及主视觉滚出视野时,循环动画会停止。

粒子能组成我的标志吗?

如果你拥有该标志,就可以。提供一张线条粗、形状简单的透明 PNG,引擎会把它采样为点。你看过价格之后,PopNow 也可以为你的产品生成一个干净的轮廓。

访客如何控制它?

按钮下方的三个步骤标签可以通过点击或方向键让圆点变形。在有人选择之前,画面每隔几秒会自行推进。

它尊重减少动态效果的设置吗?

尊重。开启减少动态效果后,圆点保持静止,步骤切换不做补间动画,不会自动推进,跑马灯也停止滑动。