atmosphere-background

name	atmosphere-background
description	打造暗色氛围背景：飘动的垂直光褶、屏幕混合发光，以及集中在角落或下边缘的明亮 bloom。

Atmosphere Background 技能

何时使用

• 打造暗色氛围背景：飘动的垂直光褶、屏幕混合发光，以及集中在角落或下边缘的明亮 bloom。

工作流程

范围

• 只把它应用于沉浸式背景层，而非整个页面布局、字体或无关的 WebGL/粒子系统。
• 当设计需要一个情绪化的氛围背景，配流动的光帘或光褶，而非几何栅格、斑点或写实插画时使用。

视觉目标

• 打造一个深近黑背景，柔和的垂直光褶像被照亮的织物、雾片或光帘般在画面上飘动。
• 用多层重叠的垂直光带构建发光，让背景显得分层、有空间感，而非扁平。
• 让亮度更强地聚集在某一区域，尤其右下或下边缘，使场景有电影级焦点辉光，而非均匀亮度。
• 保持配色克制：深海军蓝或炭色为底，然后从设计的主色或最强强调色派生发光。若无明确品牌色，冷青蓝氛围可接受。

实现指引

• 需要运动时，优先用 canvas 或着色器驱动渲染此效果，而非静态 CSS 渐变。
• 用多条高、重叠的光带或褶皱配缓慢正弦波飘动，让结构读起来像流动的氛围光而非硬列。
• 用屏幕或叠加式混合，让重叠光褶在交叉处自然变亮。
• 用垂直渐变塑造每条光褶，顶部渐隐、向底部或焦点角落增强。
• 在焦点边缘或角落附近加一层细微放射状发光叠层，强化深度与主明亮区。
• 运动应保持缓慢、冥想般：温和飘动、轻微强度调制，无嘈杂闪烁或急速脉动。

调节旋钮

• 光褶数量：根据氛围应有多密集，增减垂直光褶数量。
• 飘动：控制水平摇摆幅度与速度，让运动平静。
• 亮度焦点：把最强发光放在角落、边缘或下象限，而非在整个画面均匀铺开。
• 颜色：用当前设计强调色给光褶着色，同时保留暗色、高端的底。
• 柔和度：调整重叠宽度、渐变衰减与后发光强度，让背景明亮但不过曝。

避免

• 无分层褶皱结构的扁平多段渐变。
• 喧闹的彩虹色过渡或与前景内容竞争的满画面亮辉光。
• 若设计明显用了另一主色，还硬编码青色。
• 快速湍流、嘈杂粒子运动或明显的重复图样，破坏平静的氛围观感。