MOTION EFFECT
追踪光束Tracing Beam
一个发光圆点沿垂直时间轴自上而下跑动，拖出光束。Aceternity UI 用它做滚动进度叙事，本质是时间轴的动态版本。
效果预览
第一步 · 连接仓库授权一次，之后免登录
第二步 · 自动部署推送即上线，无需等待
第三步 · 实时监控异常自动回滚
适合用在哪
「如何使用」步骤流程、发展历程时间轴、功能演示的分步讲解。
容易踩的坑
- 圆点无限循环却与真实滚动进度无关，用户会误以为是进度指示。
- 左侧只留 20px 内边距，移动端步骤标题与竖线挤在一起难以阅读。
- 辉光阴影透明度过高，在浅色底上变成一团脏灰色。
设计提示词 · Prompt
追踪光束（Tracing Beam）：容器 position:relative 并留出左侧 20px 内边距；::before 画一条宽 1.5px 的竖向渐变线（顶部浅灰到中段主色到紫色）；一个 9×9px 的圆点用 radial-gradient 做中心发白的高光，加 box-shadow 0 0 12px 3px 主色 55% 透明做辉光；圆点用 top 从 0 到 calc(100% - 9px) 的 3.4s cubic-bezier(.5,0,.5,1) 无限循环，配合首尾 opacity 0→1→0 淡入淡出。右侧放步骤条目，每条含加粗标题与浅灰说明。
Tracing Beam: the container is position:relative with 20px of left padding; ::before draws a 1.5px-wide vertical gradient line (light gray at the top to the primary color in the middle to purple). A 9×9px dot uses a radial-gradient for a white-centered highlight, plus box-shadow 0 0 12px 3px in the primary color at 55% opacity for a glow; the dot animates top from 0 to calc(100% - 9px) over 3.4s cubic-bezier(.5,0,.5,1), infinite, with opacity 0→1→0 fading in and out at the ends. Step items sit on the right, each with a bold title and light gray description.
常见搭配
同一页面里经常和「追踪光束」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="m-tracing">
<i class="m-tracing__dot"></i>
<div class="m-tracing__i"><b>第一步 · 连接仓库</b><span>授权一次，之后免登录</span></div>
<div class="m-tracing__i"><b>第二步 · 自动部署</b><span>推送即上线，无需等待</span></div>
<div class="m-tracing__i"><b>第三步 · 实时监控</b><span>异常自动回滚</span></div>
</div>
</div>