组件分类 · 动效
动效组件
滚动跑马灯、悬停预览、入场动画等让页面有节奏的动效。动效只用 transform 与 opacity，并尊重减少动态效果设置。
共 13 个 · 更新于
适合用在哪里
滚动、悬停与入场动效，给页面增加节奏感；动效只用 transform 和 opacity。
怎么用
- 打开任意一个组件，看实时预览，切换深色 / 浅色背景。
- 点「复制提示词」，粘贴到 Claude Code、Cursor、Codex 或 Trae；模型会读你的项目，把组件改写成你的框架，并把颜色、字体接到你的设计变量。
- 或者在终端用 8pt CLI 装进项目，也可以在已接入 8pt MCP 的编辑器里直接说需求。
npm i -g @8pt-dev/cli 8pt login 8pt search "动效" 8pt add suiyun-chaos-ship
全部 13 个动效组件
- Chaos Versus Ship Split 混乱对比交付
左右对照的卖点区：左半边一堆告警便签在淡橙柱状噪点上缓慢漂浮、层层叠压，标题写着用老办法硬扛基础设施；右半边整块橙色，中线虚线穿过，一枚带勾的胶囊消息轮流切换交付好消息。
- Integration Tile Grid 集成图标矩阵
深色卡片中 7×5 的服务图标方块矩阵，中心是渐变发光的品牌方块，四周按径向渐隐；靠近中心的方块轮流亮起彩色光晕，悬停方块会上浮并显示服务名称提示。
- Infra Tab Showcase 基础设施切换展台
深色面板：左侧手风琴列表点开显示说明，右侧对应切换五种动态画面——发光浏览器与节点连线、服务图标网格、旋转线框地球与弧线、浮动徽章、笔记本与手机样机，自动轮播。
- Ticker CTA Band 滚动条与行动区
顶部一条两端渐隐的能力滚动条，图标加短句匀速横移、悬停暂停；下方暖灰大色块里三只小圆石角色依次晃动，居中粗体短句与蓝白两枚按钮。
- Chrome Outline Wordmark 镜面描边巨字
页面收尾的巨型描边字标：深色主描边叠加红蓝错位色散描边、层层后退的立体描边和地面倒影，字腔内一团跟随指针移动的银灰光斑，像一块玻璃镜面；无指针时光斑缓慢自行巡游。
- Prompt Hub Diagram 一稿多端连线图
中心发光圆形徽标向左右各四个工具胶囊伸出虚线曲线，光点沿曲线循环流动，外圈虚线环缓慢旋转；悬停胶囊时对应连线高亮为实线。窄屏改为徽标在上、胶囊两列排开。
- OCR Scan Card 截图文字识别卡
左侧一张小票照片被蓝色扫描光反复扫过，识别出的文字逐行出现高亮框；右侧搜索框自动轮流输入关键词，结果列表对应高亮匹配项，演示「图片里的字也能搜到」。
- Dual Row Quote Marquee 双行反向引言长廊
两行白色引言卡片以相反方向缓慢横向滚动，两端渐隐，悬停暂停；每张卡片有彩色头像字、一句场景描述和身份标签，适合展示用户心声或痛点。
- Ask AI Composer AI 提问输入框
AI 对话输入框自动打字、删除并轮换示例问题，输入框带品牌数据源标签与蓝色发送键，身后四张卡片缓慢浮动，下方一排圆形接入图标。适合 API 与 MCP 接入介绍。
- Typing Search Marquee 打字搜索界面长廊
左对齐的问题式标题与灰色长段落，下方搜索词逐字打出又删除、轮换展示，底部是一条缓慢横向滚动的界面长廊，手机与网页截图卡片交替，悬停暂停。
- Agent Terminal Replay 智能体终端回放
深色终端窗口逐行回放智能体的检索、比价与调用过程，右侧对齐每次调用的费用位，顶栏带主色余额标签，播完稍作停顿后循环重播。
- Model Pill Marquee 模型胶囊跑马灯
两排反向滚动的模型胶囊，每颗带色块标识和「新」角标，两端渐隐；悬停整排暂停、单颗高亮描边。适合展示接入的模型、合作方或技术栈。
- Marquee 无缝跑马灯
两行反向滚动的标签带，边缘渐隐，悬停暂停。内容复制一份实现无缝循环。
常见问题
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 席）。
动效会不会影响性能？
只动 transform 和 opacity 的动画由浏览器合成层处理，通常不会触发重排；8pt 的动效组件都遵守这条，并在用户开启「减少动态效果」时停止动画、保留最终状态。
可以用在商业项目里吗？
可以。你可以在自己的项目（含商业项目）中使用复制或安装的代码，但不能把 8pt 的内容整体转售或搭建同类素材库。