atmosphere-background

氛围背景技能

使用场景

• 创建深色氛围背景，其中有缓慢漂移的垂直光褶、屏幕混合的辉光，以及集中在角落或下边缘的光晕。

工作流

范围

• 仅将此效果用于沉浸式背景层，不要用于整个页面布局、排版或无关的 WebGL／粒子系统。
• 当设计需要带有流动光幕或光褶的沉静氛围背景，而非几何网格、色块或具象插画时使用。

视觉目标

• 创建深邃的近黑色背景，让柔和的垂直光褶如同受光织物、雾层或光幕般在画面中缓缓漂移。
• 由多个相互重叠的垂直光带构成辉光，让背景显得有层次、有空间感，而非平面。
• 让亮度在某个区域更集中，尤其是右下方或下边缘，使场景具有电影感的焦点辉光，而非亮度均匀分布。
• 控制配色：以深海军蓝或炭灰色为底色，再从设计的主色或最醒目的强调色中提取辉光颜色。如果没有明确的品牌色，使用冷调青蓝色氛围也可以。

实现指南

• 需要动态效果时，优先使用 Canvas 或着色器驱动的渲染，而非静态 CSS 渐变。
• 使用多个高耸且相互重叠的光带或光褶，通过缓慢的正弦波漂移，让结构呈现为流动的氛围光，而非生硬的竖列。
• 使用滤色或类似加色的混合方式，让交叠处的光褶自然变亮。
• 为每道光褶添加垂直渐变，使其顶部逐渐淡出，并向底部或焦点区域增强。
• 在焦点边缘或角落附近叠加柔和的径向辉光，以增强纵深感和主要发光区域。
• 动效应保持缓慢而平和：轻柔漂移、强度略微变化，不要出现嘈杂闪烁或快速脉动。

调节参数

• 光褶数量：根据所需的氛围密度，增加或减少垂直光褶的数量。
• 漂移：控制水平摆动的幅度和速度，让动态保持平和。
• 亮度焦点：将最强的辉光放在角落、边缘或下方区域，而非均匀铺满整个画面。
• 颜色：使用当前设计的强调色为光褶着色，同时保留深色、高级感的底色。
• 柔和度：调整重叠宽度、渐变衰减和后期辉光强度，让背景明亮但不过曝。

避免

• 使用没有分层光褶结构的平面多段渐变。
• 使用喧闹的彩虹色过渡，或与前景内容争抢注意力的全屏强光晕。
• 当设计明显使用其他主色时，仍硬编码为青色。
• 使用快速湍流、嘈杂的粒子运动或明显重复的图案，以免破坏平静的氛围感。