MOTION EFFECT
背景光束Background Beams
多条沿贝塞尔曲线流动的光束，铺在深色底上做首屏/区块背景。Aceternity UI 命名，是深色官网最常见的「科技底纹」。
效果预览
Background Beams背景光束 · 深色底流动曲线
适合用在哪
AI、开发者工具、云服务的首屏或 CTA 区块背景；需要深度感又不想用真实图片时。
容易踩的坑
- 光束亮度过高时压在正文后方，白字对比度会跌破 4.5:1。
- SVG 曲线超过 5 条且同时做 dashoffset 动画，低端手机明显发热掉帧。
- preserveAspectRatio=none 在竖屏上会把曲线拉成近乎竖直的直线。
设计提示词 · Prompt
背景光束（Background Beams）：深色底（#08080c 或近黑），上面覆盖一个 viewBox 与容器等宽等高的 SVG。画 3-5 条贝塞尔曲线（如 M-20 130 C 80 60 160 20 360 -20），stroke 用 linearGradient（两端 transparent、中段高亮色），stroke-width 1-1.5px，加 stroke-dasharray 配合 stroke-dashoffset 从 260 到 0 的线性循环形成「流动」。曲线用 preserveAspectRatio="none" 拉满容器，内容文字用 z-index 压在最上层。
Background Beams: dark background (#08080c or near black), covered by an SVG whose viewBox matches the container's width and height. Draw 3-5 Bézier curves (e.g. M-20 130 C 80 60 160 20 360 -20); stroke uses a linearGradient (transparent at both ends, highlight color in the middle), stroke-width 1-1.5px, plus stroke-dasharray with stroke-dashoffset animating linearly from 260 to 0 in a loop to create the "flow". Use preserveAspectRatio="none" so the curves stretch to fill the container, and keep the text content on top via z-index.
常见搭配
同一页面里经常和「背景光束」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="m-beams">
<svg viewBox="0 0 340 130" preserveAspectRatio="none">
<defs>
<linearGradient id="uiBeam" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#6366f1" stop-opacity="0"/>
<stop offset=".5" stop-color="#a5b4fc"/>
<stop offset="1" stop-color="#c026d3" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="M-20 130 C 70 74 150 26 360 -18" fill="none" stroke="url(#uiBeam)" stroke-width="1.2" stroke-dasharray="260"/>
<path d="M-20 150 C 90 96 180 44 360 -2" fill="none" stroke="url(#uiBeam)" stroke-width="1" stroke-dasharray="260" style="animation-delay:.9s"/>
<path d="M-20 112 C 60 66 140 18 360 -30" fill="none" stroke="url(#uiBeam)" stroke-width="1" stroke-dasharray="260" style="animation-delay:1.8s"/>
<path d="M-20 96 C 100 60 200 34 360 6" fill="none" stroke="url(#uiBeam)" stroke-width=".9" stroke-dasharray="260" style="animation-delay:2.7s"/>
</svg>
<div class="m-beams__t"><b>Background Beams</b><span>背景光束 · 深色底流动曲线</span></div>
</div>