{
  "id": "aurora",
  "type": "styles",
  "status": "published",
  "name": {
    "zh": "极光渐变",
    "en": "Aurora Gradient"
  },
  "aliases": [
    "极光渐变",
    "极光风格",
    "渐变光斑背景",
    "流动光晕设计",
    "那种绿紫渐变的模糊背景",
    "大面积渐变光效",
    "Aurora Background",
    "Mesh Gradient"
  ],
  "category": [
    "Style",
    "Visual Language"
  ],
  "description": {
    "zh": "用大面积流动渐变光斑营造氛围的视觉语言：青绿 紫 蓝 多色模糊色块在背景 中缓慢漂移融合，前景内容保持极简克制。色彩是主角——像极光一样柔和 跨 色相 渐次过渡，界面因此获得呼吸感与情绪温度。",
    "en": "An atmosphere built from large flowing gradient blooms: teal, violet and blue blurred blobs drift and merge across the background while the foreground stays minimal. Color is the protagonist — soft, cross-hue, aurora-like transitions that give the interface breath and warmth."
  },
  "use_when": [
    {
      "zh": "落地页 首屏 品牌页，需要第一眼氛围与情绪",
      "en": "Landing pages, heroes and brand pages that need instant atmosphere"
    },
    {
      "zh": "AI 创意工具类产品，渐变已成为其品类视觉符号",
      "en": "AI and creative tools where gradients are a category signature"
    },
    {
      "zh": "极简前景 + 需要一点温度的深浅色界面",
      "en": "Minimal foregrounds that need warmth in either mode"
    }
  ],
  "avoid_when": [
    {
      "zh": "数据密集工具界面，大面积渐变干扰信息读取",
      "en": "Data-dense tools where blooms interfere with scanning"
    },
    {
      "zh": "可访问性敏感场景，光斑上的文字对比度难保证",
      "en": "Accessibility-critical contexts — text over blooms is hard to keep compliant"
    },
    {
      "zh": "大量使用动画光斑时低端设备性能敏感",
      "en": "Performance-sensitive devices when animated blobs are used"
    }
  ],
  "tags": [
    "aurora",
    "gradient",
    "atmosphere",
    "blobs",
    "ambient"
  ],
  "variants": [
    {
      "id": "static-mesh",
      "name": {
        "zh": "静态网格渐变",
        "en": "Static Mesh"
      },
      "note": {
        "zh": "一次成型的多点网格渐变，无动画",
        "en": "A one-shot multi-point mesh gradient, no motion"
      }
    },
    {
      "id": "flowing-blobs",
      "name": {
        "zh": "流动光斑",
        "en": "Flowing Blobs"
      },
      "note": {
        "zh": "大 blur 色块缓慢漂移，动效极光",
        "en": "Heavily blurred blobs drifting slowly — aurora in motion"
      }
    },
    {
      "id": "dark-aurora",
      "name": {
        "zh": "暗夜极光",
        "en": "Dark Aurora"
      },
      "note": {
        "zh": "深空底色上更浓的光带，对比更强",
        "en": "Denser light bands over deep space, higher contrast"
      }
    }
  ],
  "applicable_components": [
    "card",
    "button",
    "modal",
    "navbar"
  ],
  "related": [
    {
      "id": "glassmorphism",
      "relation": "similar_to"
    },
    {
      "id": "bento-grid",
      "relation": "similar_to"
    },
    {
      "id": "minimalism",
      "relation": "similar_to"
    },
    {
      "id": "card",
      "relation": "affects"
    },
    {
      "id": "landing-page",
      "relation": "used_with"
    }
  ],
  "demo": {
    "component": "aurora",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "playground": {
    "task": {
      "zh": "点亮进入光场调配，选择光谱、调整强度实时预览并保存配方，可继续修改保存；光、色、场、v2.0 各有对应内容。",
      "en": "Light it up opens light-field mixing. Choose a spectrum and intensity, preview live and save the recipe, then edit/save again. Light, Color, Space and v2.0 reveal matching content."
    },
    "checks": [
      {
        "zh": "逐一操作 Borealis 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。",
        "en": "Use Borealis’s original navigation and primary CTAs; inspect content and return paths, not just click notices."
      },
      {
        "zh": "完成上述 Borealis 操作后修改输入或撤销，检查结果与状态同步。",
        "en": "Complete the Borealis task, then change inputs or undo and inspect the matching result/state."
      },
      {
        "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。",
        "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries."
      }
    ]
  },
  "sources": [
    {
      "name": "MDN — radial-gradient",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient"
    },
    {
      "name": "Stripe — brand gradient practice",
      "url": "https://stripe.com/blog"
    }
  ],
  "implementation": {
    "css": [
      "background: radial-gradient",
      "filter: blur()",
      "@keyframes drift",
      "mix-blend-mode",
      "background-clip: text"
    ],
    "notes": {
      "zh": "光斑三要素：2～4 个大型 radial-gradient 色块（直径为画布的 40%～80%）， blur(60px) 级别的重模糊，色相跨越 2～3 段（如青绿→紫→蓝）且彼此部分 重叠。前景内容置于光斑之上，用纯色文字或半透明白面板保证对比。动画 光斑只做位移与缩放的慢速漂移（20s+），时长乘 var(--demo-speed, 1)， 并在 prefers-reduced-motion 下静止。",
      "en": "Three ingredients: two to four large radial-gradient blooms (40–80% of the canvas), heavy blur around 60px, and hues spanning two or three segments (teal→violet→blue) that partially overlap. Keep foreground minimal — solid text or translucent panels hold contrast. Animated blobs drift slowly (20s+) on transform only, multiply durations by var(--demo-speed, 1), and freeze under prefers-reduced-motion."
    }
  },
  "prompts": {
    "basic": {
      "zh": "用极光渐变（Aurora Gradient）风格设计界面：背景由青绿 紫蓝多色模糊光斑 漂移融合，前景内容极简克制，氛围柔和有呼吸感。",
      "en": "\"Design an interface in Aurora Gradient style: teal, violet and blue blurred blooms drifting across the background, minimal restrained foreground, soft breathing atmosphere.\""
    },
    "design": {
      "zh": "极光渐变设计规范：浅色模式底 #F6F7FB，深色模式底 #0B0E1A；光斑 2～4 个 radial-gradient 色块（#5EEAD4 #818CF8 #C084FC 等），blur 60px 级别， 彼此重叠约 20%；前景文字纯色（深底用白 浅底用近黑），按钮可用同款 渐变填充；光斑动画只做 20s 以上的慢速位移缩放，尊重 prefers-reduced-motion。",
      "en": "\"Aurora spec: light ground #F6F7FB, dark ground #0B0E1A; two to four radial-gradient blooms (#5EEAD4, #818CF8, #C084FC...) blurred ~60px overlapping by ~20%; foreground text solid (white on dark, near-black on light), buttons may carry the same gradient; blob motion is slow drift/scale over 20s+, respecting prefers-reduced-motion.\""
    },
    "implementation": {
      "zh": "用当前风格完成 Borealis 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n保留 Borealis 的绿/紫/粉三重径向光场与 #0D0B1E 暗夜底，右侧仍是 CSS 山景剪影、半透明卡与浅紫操作，不额外强制 60px blur 或 24s 自动漂移。光场台使用 --light-hue 与 --light-intensity 实时改色和强度，默认 Emerald / 65%；保存结果显示配方而非改变原首屏构图。\n\n复用当前 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。\n\ndark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。\n\n点亮进入光场调配，选择光谱、调整强度实时预览并保存配方，可继续修改保存；光、色、场、v2.0 各有对应内容。\n\n静态封面、详情演示与 /style-scenes/aurora/（英文 /en/style-scenes/aurora/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。",
      "en": "Build a complete Borealis page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template.\n\nKeep Borealis’ green/violet/pink radial light field over #0D0B1E, with the existing CSS mountain silhouette, translucent cards and pale-violet actions; do not impose a new 60px blur or 24s automatic drift. The light-field tool changes --light-hue and --light-intensity live, initially Emerald / 65%; saved recipes do not redraw the original hero.\n\nReuse current preview.tokens: background 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; foreground #F4F3FF; accent #A5B4FC / #1E1B4B; card rgba(255,255,255,.08); border rgba(165,180,252,.3); radius 14px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow none.\n\nUse generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows.\n\nLight it up opens light-field mixing. Choose a spectrum and intensity, preview live and save the recipe, then edit/save again. Light, Color, Space and v2.0 reveal matching content.\n\nShare one renderer between static covers, the detail experience and /style-scenes/aurora/ (English /en/style-scenes/aurora/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion."
    },
    "agent": {
      "zh": "用当前风格完成 Borealis 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n保留 Borealis 的绿/紫/粉三重径向光场与 #0D0B1E 暗夜底，右侧仍是 CSS 山景剪影、半透明卡与浅紫操作，不额外强制 60px blur 或 24s 自动漂移。光场台使用 --light-hue 与 --light-intensity 实时改色和强度，默认 Emerald / 65%；保存结果显示配方而非改变原首屏构图。\n\n复用当前 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。\n\ndark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。\n\n完整页面操作：\n点亮进入光场调配，选择光谱、调整强度实时预览并保存配方，可继续修改保存；光、色、场、v2.0 各有对应内容。\n\n静态封面、详情演示与 /style-scenes/aurora/（英文 /en/style-scenes/aurora/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。",
      "en": "Build a complete Borealis page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template.\n\nKeep Borealis’ green/violet/pink radial light field over #0D0B1E, with the existing CSS mountain silhouette, translucent cards and pale-violet actions; do not impose a new 60px blur or 24s automatic drift. The light-field tool changes --light-hue and --light-intensity live, initially Emerald / 65%; saved recipes do not redraw the original hero.\n\nReuse current preview.tokens: background 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; foreground #F4F3FF; accent #A5B4FC / #1E1B4B; card rgba(255,255,255,.08); border rgba(165,180,252,.3); radius 14px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow none.\n\nUse generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows.\n\nFull-page operations:\nLight it up opens light-field mixing. Choose a spectrum and intensity, preview live and save the recipe, then edit/save again. Light, Color, Space and v2.0 reveal matching content.\n\nShare one renderer between static covers, the detail experience and /style-scenes/aurora/ (English /en/style-scenes/aurora/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion.\n\nAdd no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results."
    }
  },
  "style_spec": {
    "typography": {
      "zh": "无衬线白标题",
      "en": "Sans-serif white display"
    },
    "color": {
      "zh": "暗夜底 #0D0B1E × 绿紫粉光斑",
      "en": "Night base #0D0B1E with green-violet-pink glow"
    },
    "border": {
      "zh": "1px 半透明紫边框",
      "en": "1px translucent violet borders"
    },
    "shadow": {
      "zh": "深色大投影 + 光晕",
      "en": "Deep shadows with glow"
    },
    "spacing": {
      "zh": "悬浮卡层叠，间距宽松",
      "en": "Floating stacked cards, roomy gaps"
    },
    "motion": {
      "zh": "300–500ms ease-in-out 的光斑漂移与淡入，尊重 prefers-reduced-motion",
      "en": "300–500ms ease-in-out drift of the glow, with fades; honour prefers-reduced-motion"
    },
    "states": {
      "zh": "hover 增强光斑亮度；focus 用紫粉色可见亮环；active 压低光晕；disabled 降透明去光；error 用红调光斑且仅淡入颜色",
      "en": "Hover brightens the glow; focus shows a visible violet-pink ring; active dims the bloom; disabled loses opacity and glow; error tints the glow red, fading colour only"
    }
  },
  "preview": {
    "order": 18,
    "keywords": {
      "en": "GRADIENT GLOW",
      "zh": "光晕 · 流动 · 暗夜"
    },
    "url": "https://borealis.ux",
    "scene": "generic",
    "brand": "Borealis",
    "nav": [
      {
        "zh": "光",
        "en": "Light"
      },
      {
        "zh": "色",
        "en": "Color"
      },
      {
        "zh": "场",
        "en": "Space"
      }
    ],
    "navExt": [
      {
        "zh": "v2.0",
        "en": "v2.0"
      }
    ],
    "heroTitle": {
      "zh": "Flow with",
      "en": "Flow with"
    },
    "heroTitle2": {
      "zh": "the Light",
      "en": "the Light"
    },
    "heroSub": {
      "zh": "让颜色像极光一样流动。",
      "en": "Let color flow like the northern lights."
    },
    "cta": {
      "zh": "点亮",
      "en": "Light it up"
    },
    "heroCaption": {
      "zh": "暗夜底 · 光斑 · 渐变文字",
      "en": "Night sky · Light blooms · Gradient type"
    },
    "features": [
      {
        "t": {
          "zh": "极光底色",
          "en": "Aurora backdrop"
        },
        "s": {
          "zh": "绿紫粉光晕",
          "en": "Green, violet and pink glows"
        }
      },
      {
        "t": {
          "zh": "玻璃浮层",
          "en": "Glass layers"
        },
        "s": {
          "zh": "轻透的内容卡",
          "en": "Light, translucent cards"
        }
      },
      {
        "t": {
          "zh": "流动渐变",
          "en": "Flowing gradients"
        },
        "s": {
          "zh": "缓慢变色动画",
          "en": "Slow color transitions"
        }
      }
    ],
    "panel": "mountain",
    "tokens": {
      "bg": "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",
      "fg": "#F4F3FF",
      "sub": "#9C99C2",
      "accent": "#A5B4FC",
      "accentFg": "#1E1B4B",
      "card": "rgba(255,255,255,.08)",
      "cardBorder": "rgba(165,180,252,.3)",
      "radius": "14px",
      "font": "'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif",
      "heroSize": "22px"
    }
  }
}