你会得到

  • 由 props 驱动的 React Hero 组件,附使用示例
  • 同一个 Hero 的单 HTML 文件版,无需构建
  • 浅色与深色主题变量、网格线背景和动效规则
  • 绘制的备用视觉,没有图片也像成品
  • 可选:PopNow 生成的 Hero 图片,运行前先报价

适合

  • SaaS、App 和服务类落地页
  • 替换平淡、静态的首屏
  • 只需要一个明确行动的候补名单页和发布页

不适合

  • 搭建整个多区块网站
  • 滚动驱动的叙事或重度动画
  • 不重新配色就用在以高饱和蓝色或紫色为主的配色上

怎么用

在 Claude 或 ChatGPT 里

用 PopNow 的技能「动态 Hero 首屏区块」(animated-hero-section)帮我做这件事:给我的 Next.js 落地页加一个 Hero:“规划旅行,可以很 轻松 / 惬意 / 好分享”,按钮是“开始规划”和“查看示例”。

在编程 Agent 里

/popnow-animated-hero-section 给我的 Next.js 落地页加一个 Hero:“规划旅行,可以很 轻松 / 惬意 / 好分享”,按钮是“开始规划”和“查看示例”。

接着试试

给画框生成一张宽幅照片:阳光下摆着地图和咖啡的桌子。先告诉我要多少积分。

再给我一份纯 HTML 版本,用在我的静态网站上。

需要准备

  • 一句引导语和 3–5 个轮换短词
  • 正文、按钮文字和链接
  • 可选:你的截图或产品照片,或 PopNow API 密钥

类似技能

查看全部 →

常见问题

需要 React 吗?

不需要。项目用 React 和 Tailwind 时,技能会选 React 组件;没有构建步骤时,用纯 HTML 文件。其他框架会得到同样结构和动效的移植版本。

动效对无障碍友好吗?

词语以短促的补间动画滑入,标签页隐藏时暂停,访客开启“减少动态效果”时完全停止。屏幕阅读器只会完整读一次标题,而不是读不断变化的词。

没有 Hero 图片怎么办?

会用主题色绘制的底图填满画框,区块看起来依然完整。之后可以换上你自己的截图,或用 PopNow 生成图片。

PopNow 会生成我的 App 截图吗?

不会。软件产品需要真实截图,技能会向你索取。PopNow 用于场景照片、配套背景上的产品图或抽象底图。