组件分类 · Hero
Hero 首屏组件
落地页和产品官网最先被看到的一屏：大标题、副标题、主按钮和动效背景。每个都能实时预览，复制提示词交给 Claude Code、Cursor 或 Codex，模型会按你的品牌改写。
共 12 个 · 更新于
适合用在哪里
产品官网、SaaS 落地页和活动页的首屏：标题、副标题和主按钮决定第一印象的地方。
怎么用
- 打开任意一个组件，看实时预览，切换深色 / 浅色背景。
- 点「复制提示词」，粘贴到 Claude Code、Cursor、Codex 或 Trae；模型会读你的项目，把组件改写成你的框架，并把颜色、字体接到你的设计变量。
- 或者在终端用 8pt CLI 装进项目，也可以在已接入 8pt MCP 的编辑器里直接说需求。
npm i -g @8pt-dev/cli 8pt login 8pt search "Hero 首屏" 8pt add suiyun-glow-hero
全部 12 个Hero 首屏组件
- Dot Matrix Glow Hero 点阵光晕首屏
整块圆角橙色首屏：细密的点阵纹理缓慢闪烁，底部一团暖黄光晕呼吸起伏；居中两行白色大标题、两行副句和白色胶囊按钮，按钮悬停微微抬起。窄屏改为左对齐大字与通栏按钮。
- Aurora Prompt Hero 极光输入框首屏
米白底上由蓝、粉、红三层模糊光斑缓慢漂移形成的极光渐变首屏，居中大标题与副标题下是一个大圆角输入框：占位文字自动打字轮播，带附件按钮、模式下拉、语音按钮与发送键。
- Pill Word Hero 胶囊轮换词首屏
超粗黑体两行大标题，句中嵌一枚浅蓝胶囊，圆点呼吸、胶囊里的词上下滚动轮换；两侧各有一只原创扁平小圆石角色轻轻晃动，下方一句说明和蓝、浅蓝两枚按钮。
- Orbit Sphere Marquee 球体轨道首屏
白底首屏里一排大小交替的渲染球体缓慢向左漂移，每颗球轻轻上下浮动、内部画面自转，悬停整排暂停；左下角两行引言，灰色问候加黑色主句，留白撑起气场。
- Glow Prompt Hero 光晕提示词首屏
深色首屏：顶部紫色光晕缓慢呼吸，背景用画布绘制下落的字符雨；左侧双色大标题、流程短句、渐变主按钮与工具名跑马灯，右侧是可暂停的视频播放器样机，进度条与时间实时走动。
- Sky Hero Headline 天空渐变首屏
蓝天渐变首屏：顶部应用徽标，粗黑「复制一次。」配衬线斜体「随时再用。」双行大标题，下方说明文字、黑白两个下载按钮和三项卖点，底部铺一张草坡远山图，顶部有缓慢呼吸的高光。
- Network Lines Hero 汇聚线条首屏
暖灰底首屏：两侧细线像网络一样汇聚到中间的网址输入框，绿色光点沿线流动；顶部数据胶囊上下轮换，绿色重点标题、两枚说明胶囊和输入后才点亮的箭头按钮。
- Portfolio Intro Hero 作品集名片首屏
左侧名片栏放头像、接单状态、关注按钮、大标题与流光主按钮，底部显示实时当地时间；右侧两列作品卡片一上一下缓慢滚动，悬停暂停。适合独立设计师作品集首屏。
- Inline Icon Hero 嵌图标大标题首屏
超大字号的居中标题里嵌入三个倾斜的图标槽位，每个槽位轮流弹出不同的圆角 App 图标，悬停时摆正放大；下方一句说明和黑白两枚胶囊按钮。适合素材库、灵感站首屏。
- Binary Command Hero 二进制命令行首屏
白底首屏：两侧渐隐的二进制底纹缓慢闪烁，超大标题下是一键复制的命令框，像素机器人经节点胶囊用曲线分叉到一排工具卡片。适合 AI 工具、开发者平台。
- Floating Folders CTA 漂浮文件夹收尾
页面收尾的行动区：大标题与主按钮居中，四周漂浮着彩色玻璃文件夹，缓慢起伏，并随指针轻微视差移动。
- Gradient Mesh Hero 流体渐变首屏
几团径向渐变缓慢漂移构成流体背景，叠加细颗粒，标题与按钮居中。
常见问题
8pt 的Hero 首屏组件能用在 React、Vue 或 Next.js 项目里吗？
能。组件源码是原生 HTML、CSS 和少量 JS；复制提示词交给模型后，它会按你项目的技术栈改写成 React、Vue、Svelte 等写法，并把颜色、字体接到你已有的设计变量上。
怎么把Hero 首屏组件装进项目？
三种方式：在组件页复制提示词交给模型；用 8pt CLI 运行 8pt add <组件 slug>；或者接入 8pt MCP 后在对话里直接说需求。复制提示词、CLI 和 MCP 需要 Builder 方案（Builder 方案 ¥45/月、¥128/季或 ¥379/年；另有创始终身版 ¥899，一次付款，限 100 席）。
首屏应该放什么？
一句说清价值的大标题、一句补充说明、一个主按钮（必要时加一个次按钮），再配一张真实的产品画面或一层克制的动效背景。首屏里的信息越少，主按钮越容易被点。
可以用在商业项目里吗？
可以。你可以在自己的项目（含商业项目）中使用复制或安装的代码，但不能把 8pt 的内容整体转售或搭建同类素材库。