组件分类 · 文字
文字与标题组件
打字机标题、文字扰动、客户证言和大字排版。用来给首屏标题和关键文案加一点个性。
共 7 个 · 更新于
适合用在哪里
标题动效、客户证言、强调文案和大字排版。
怎么用
- 打开任意一个组件，看实时预览，切换深色 / 浅色背景。
- 点「复制提示词」，粘贴到 Claude Code、Cursor、Codex 或 Trae；模型会读你的项目，把组件改写成你的框架，并把颜色、字体接到你的设计变量。
- 或者在终端用 8pt CLI 装进项目，也可以在已接入 8pt MCP 的编辑器里直接说需求。
npm i -g @8pt-dev/cli 8pt login 8pt search "文字与标题" 8pt add suiyun-tab-quote
全部 7 个文字与标题组件
- Tabbed Logo Testimonial 标签切换客户证言
居中标题下一张证言卡：顶部一排虚构品牌标签，当前项下方橙色进度条走完即自动切到下一家；正文大号引言后半句橙色高亮，配署名与立体小物插图；卡片下方灰色字标缓慢横向滚动，悬停暂停。
- Serif Statement Hero 衬线宣言首屏
一整段宣言式首屏标题：开头一句用粗体无衬线强调，后文接衬线正文字体自然续写，句段依次由模糊渐显，大字号紧凑行距，适合研究机构或品牌使命的开场陈述。
- Hover Service Index 悬停服务索引
三栏服务索引：左侧等宽小标签，中间一列大号粗体服务名，未选中为浅灰，悬停或聚焦的一项变黑，右侧竖图随之交叉淡入并轻微缩放；没有交互时按顺序自动轮换。
- Three Claim Cards 三项主张卡片
居中标题下三张等宽白卡，每张左上角一枚浅灰图标、底部大号主张标题与一行灰色说明，悬停时卡片上浮，右上角透出淡绿色光晕。
- Hover Preview 悬停预览
正文里的关键词悬停时，跟随指针浮出一张预览卡；卡片内容是纯 CSS 绘制。
- Text Scramble 字符解码
文字以随机字符逐位解码成目标词，进入视口和悬停时触发。
- Typewriter Heading 打字机标题
标题末尾的关键词逐字打出、停顿、逐字删除，循环多个词。光标闪烁，字符用 opacity 出现，不抖动。
常见问题
8pt 的文字与标题组件能用在 React、Vue 或 Next.js 项目里吗？
能。组件源码是原生 HTML、CSS 和少量 JS；复制提示词交给模型后，它会按你项目的技术栈改写成 React、Vue、Svelte 等写法，并把颜色、字体接到你已有的设计变量上。
怎么把文字与标题组件装进项目？
三种方式：在组件页复制提示词交给模型；用 8pt CLI 运行 8pt add <组件 slug>；或者接入 8pt MCP 后在对话里直接说需求。复制提示词、CLI 和 MCP 需要 Builder 方案（Builder 方案 ¥45/月、¥128/季或 ¥379/年；另有创始终身版 ¥899，一次付款，限 100 席）。
标题动效会不会影响阅读？
动效只用在首屏或一两处重点标题上，动画结束后文字保持静止可读；正文段落不要加动效。
可以用在商业项目里吗？
可以。你可以在自己的项目（含商业项目）中使用复制或安装的代码，但不能把 8pt 的内容整体转售或搭建同类素材库。