适用场景

• 产品页/营销页的首屏 Hero 区块
• 氛围背景与页面的招牌视觉瞬间
• 可作为完整区块嵌入更大的站点

可调参数

--bg

#070711

--txt

#eceaf9

--dim

#9d99c4

#070711

accent color

#ECEAF9

accent color

#9D99C4

accent color

#8B5CF6

accent color

22s

motion timing

无障碍

• ✓已内置 prefers-reduced-motion 兜底：对动效敏感的用户会得到静止或降级版本。
• ⚠检测到交互控件——图标若承载含义请补充 aria-label。
• ✓使用原生交互元素，键盘焦点开箱即用。

性能特征

• 动画只用 transform/opacity（GPU 合成），不触发布局重排。
• 使用了 CSS blur（最贵的滤镜）——移动端请控制模糊面积。
• backdrop-filter 玻璃面板好看但每帧都要合成——少量点缀可以，整页铺满会卡。
• 自包含单文件（约 5.4 KB，零网络请求）——可内联或 iframe 懒加载。