MOTION EFFECT
聚光灯Spotlight
从画面顶部中央向下打来的柔光，把标题像舞台主角一样照亮。Aceternity UI 的 Spotlight 与 Magic UI 的 Backlight 属于同一族。
效果预览
Spotlight顶部聚光灯 · 把标题打亮
适合用在哪
深色首屏、产品发布页、定价页顶部。和 Lamp 的区别是没有那根实体横条。
容易踩的坑
- 渐变文字下半部降到 40% 透明度，长标题第二行对比度会不足。
- 副文案用 rgba(255,255,255,.45)，在近黑底上低于 4.5:1 不达标。
- 光团固定 300px 宽，在移动端会溢出并让左右边缘出现硬切。
设计提示词 · Prompt
聚光灯（Spotlight）：深色底（#0a0a0f）。::before 在顶部中轴放一个 300×230px 的椭圆，背景 radial-gradient(closest-side, rgba(255,255,255,.3), rgba(99,102,241,.16) 45%, transparent 78%)，向左位移一半居中。标题用 17-40px 字重 760、letter-spacing -0.03em，填充色用 linear-gradient(#fff, rgba(255,255,255,.4)) 做上亮下暗的垂直渐变文字；下方副文案用 rgba(255,255,255,.45)。
Spotlight: dark background (#0a0a0f). A ::before at the top center is a 300×230px ellipse with background radial-gradient(closest-side, rgba(255,255,255,.3), rgba(99,102,241,.16) 45%, transparent 78%), shifted left by half to center it. The title uses 17-40px, font weight 760, letter-spacing -0.03em, filled with linear-gradient(#fff, rgba(255,255,255,.4)) as a top-bright, bottom-dim vertical gradient text; the subcopy below uses rgba(255,255,255,.45).
常见搭配
同一页面里经常和「聚光灯」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="m-spot"> <div class="m-spot__t"><b>Spotlight</b><span>顶部聚光灯 · 把标题打亮</span></div> </div>