你会得到

  • 一个 HTML 文件即为完整主视觉,可从磁盘或 iframe 中运行
  • 以 ES 模块形式提供的引擎,以及 React 和 Next.js 组件
  • 五套配色主题,以及密度、拉伸和波纹的调校表
  • 内置触屏、减少动态效果、隐藏标签页和离屏处理
  • 可选的 PopNow 视频底板或产品图,运行前报价

适合

  • 开发者工具、AI 产品和发布页
  • 邀请人们互动的作品集和活动开场
  • 用更轻的效果替代循环播放的背景视频

不适合

  • 需要浅色背景的浅色或粉彩品牌
  • 非常平静的页面,例如健康或金融表单
  • 长篇滚动驱动的故事

怎么用

在 Claude 或 ChatGPT 里

用 PopNow 的技能「互动网格主视觉」(interactive-grid-hero)帮我做这件事:为我的 CLI 工具网站做首屏:标题“一条命令部署预览”,琥珀色网格,按钮为“安装”和“阅读文档”。

在编程 Agent 里

/popnow-interactive-grid-hero 为我的 CLI 工具网站做首屏:标题“一条命令部署预览”,琥珀色网格,按钮为“安装”和“阅读文档”。

接着试试

让网格更平静、稀疏一点。

在网格下方加一段非常暗、带烟雾感的视频,先告诉我积分。

需要准备

  • 一句简短的标题、一两句说明,以及按钮链接
  • 一个主题或你的品牌强调色
  • 可选:能力提示,以及可放入证明行的名称

类似技能

查看全部 →

常见问题

它需要库或 WebGL 吗?

不需要。效果是在二维画布上用纯 JavaScript 实现的,约 300 行,没有任何依赖。模板可以离线运行,也可以在沙箱 iframe 中运行。

在手机上会怎样?

轻触会发出一圈波纹,横向拖动会拉动网格,而纵向滑动仍然滚动页面。在有人触碰之前,缓慢的空闲漂移会让网格保持运动。

能使用我的品牌色吗?

可以,它会作为一种深色背景上的强调色和波纹颜色。效果依赖于淡线条变亮,所以背景保持非常深;黑白品牌则使用单色主题。

它有无障碍支持吗?

文案、链接和按钮都是画布上方的普通 HTML,并保留焦点样式。开启减少动态效果时,网格就是一张静态画面;循环动画会在隐藏的标签页中以及滚出视野时暂停。