HERO SECTION
极光渐变首屏Aurora Gradient Hero
深色底上铺多层高斯模糊的彩色光斑，缓慢漂移，营造出极光般流动的质感。近年 AI 产品最爱的首屏。
效果预览
灵感的引擎
为创作者打造的 AI 工作台
适合用在哪
AI / 开发者工具 / 创意类产品官网；想要"科技感 + 高级感"的场合。
容易踩的坑
- 多层 60-80px 模糊光斑持续做动画，低端手机掉帧发热，应只动 transform 并限制层数。
- 未响应 prefers-reduced-motion，光斑一直漂移会让前庭敏感用户不适。
- 光斑饱和度过高压在标题后面，品红区域的白字对比度明显下降。
设计提示词 · Prompt
极光渐变首屏（Aurora Gradient Hero）：底色用接近纯黑的 #07070C。在其上叠 3 层超大径向渐变光斑（radial-gradient，直径 40-60% 视口），颜色分别取靛蓝 rgba(99,102,241,.9)、品红 rgba(217,70,239,.6)、青色 rgba(6,182,212,.55)，用 filter:blur(60-80px) 充分糊开。加 16s 的 ease-in-out alternate 动画让光斑缓慢位移旋转 5-8%。最后叠一层 SVG feTurbulence 生成的噪点（透明度 25-30%）消除色带。文字用白色，主标题加轻微暗色投影提升对比。按钮用白底深字 + 半透明玻璃次按钮。
Aurora Gradient Hero: use a near-black base color #07070C. Layer 3 oversized radial-gradient blobs on top (diameter 40-60% of the viewport), colored indigo rgba(99,102,241,.9), magenta rgba(217,70,239,.6), and cyan rgba(6,182,212,.55), fully diffused with filter:blur(60-80px). Add a 16s ease-in-out alternate animation so the blobs slowly drift and rotate by 5-8%. Finally overlay SVG feTurbulence noise (25-30% opacity) to eliminate color banding. Use white text, with a subtle dark shadow on the headline to boost contrast. Buttons: white background with dark text + a semi-transparent glass secondary button.
常见搭配
同一页面里经常和「极光渐变首屏」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-hero-aurora">
<div class="d-hero-aurora__glow"></div>
<div class="d-hero-aurora__noise"></div>
<h3 class="d-h1">灵感的引擎</h3>
<p class="d-sub">为创作者打造的 AI 工作台</p>
<div class="d-row">
<button class="d-btn d-btn--p">开始创作</button>
<button class="d-btn d-btn--g d-btn--sm">看看案例</button>
</div>
</div>