风格Style / Visual Language

极光渐变

Aurora Gradient

别名:极光渐变极光风格渐变光斑背景流动光晕设计那种绿紫渐变的模糊背景大面积渐变光效Aurora BackgroundMesh Gradient

这是什么

用大面积流动渐变光斑营造氛围的视觉语言：青绿紫蓝多色模糊色块在背景中缓慢漂移融合，前景内容保持极简克制。色彩是主角——像极光一样柔和跨色相渐次过渡，界面因此获得呼吸感与情绪温度。

开发规格

字体

无衬线白标题

色彩

暗夜底 #0D0B1E × 绿紫粉光斑

边框

1px 半透明紫边框

阴影

深色大投影 + 光晕

间距

悬浮卡层叠，间距宽松

动效

300–500ms ease-in-out 的光斑漂移与淡入，尊重 prefers-reduced-motion

状态反馈

hover 增强光斑亮度；focus 用紫粉色可见亮环；active 压低光晕；disabled 降透明去光；error 用红调光斑且仅淡入颜色

风格演示

同一张页面，直接操作

点亮进入光场调配，选择光谱、调整强度实时预览并保存配方，可继续修改保存；光、色、场、v2.0 各有对应内容。

整页预览 · 直接交互

使用时关注什么

01逐一操作 Borealis 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。
02完成上述 Borealis 操作后修改输入或撤销，检查结果与状态同步。
03用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。

✓ 适用场景

落地页首屏品牌页，需要第一眼氛围与情绪
AI 创意工具类产品，渐变已成为其品类视觉符号
极简前景 + 需要一点温度的深浅色界面

✕ 不适用场景

数据密集工具界面，大面积渐变干扰信息读取
可访问性敏感场景，光斑上的文字对比度难保证
大量使用动画光斑时低端设备性能敏感

常见形式

静态网格渐变

Static Mesh

一次成型的多点网格渐变，无动画

流动光斑

Flowing Blobs

大 blur 色块缓慢漂移，动效极光

暗夜极光

Dark Aurora

深空底色上更浓的光带，对比更强

实现要点

background: radial-gradientfilter: blur()@keyframes driftmix-blend-modebackground-clip: text

光斑三要素：2～4 个大型 radial-gradient 色块（直径为画布的 40%～80%）， blur(60px) 级别的重模糊，色相跨越 2～3 段（如青绿→紫→蓝）且彼此部分重叠。前景内容置于光斑之上，用纯色文字或半透明白面板保证对比。动画光斑只做位移与缩放的慢速漂移（20s+），时长乘 var(--demo-speed, 1)，并在 prefers-reduced-motion 下静止。

交给 AI

四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。

风格

支持深色模式尊重 prefers-reduced-motion不新增依赖完成后运行现有检查并列出修改文件

用当前风格完成 Borealis 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。

保留 Borealis 的绿/紫/粉三重径向光场与 #0D0B1E 暗夜底，右侧仍是 CSS 山景剪影、半透明卡与浅紫操作，不额外强制 60px blur 或 24s 自动漂移。光场台使用 --light-hue 与 --light-intensity 实时改色和强度，默认 Emerald / 65%；保存结果显示配方而非改变原首屏构图。

复用当前 preview.tokens：背景 radial-gradient(60% 80% at 20% 10%, rgba(52,211,153,.35), transparent), radial-gradient(55% 70% at 80% 25%, rgba(129,140,248,.4), transparent), radial-gradient(60% 60% at 50% 95%, rgba(236,72,153,.3), transparent), #0D0B1E；前景 #F4F3FF；强调 #A5B4FC / #1E1B4B；卡面 rgba(255,255,255,.08)；边框 rgba(165,180,252,.3)；圆角 14px；字体 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif；卡影 none。

dark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。

完整页面操作：
点亮进入光场调配，选择光谱、调整强度实时预览并保存配方，可继续修改保存；光、色、场、v2.0 各有对应内容。

静态封面、详情演示与 /style-scenes/aurora/（英文 /en/style-scenes/aurora/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。

操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。

提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。

不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。

附加要求：
- 支持深色模式
- 尊重 prefers-reduced-motion
- 不新增依赖
- 完成后运行现有检查并列出修改文件

可直接交给 Coding Agent，可叠加风格与附加要求