ambient-aurora：实践指南

作者：袖梨 2026-10-04

团队讨论ambient-aurora时，我会先把用途说清楚：以gemini 3.8 flash和gemini 3.1 pro配合Emilkowalski的Skills开发的苹果风网页端屏幕保护程式。这类网页与浏览器自动化工具真正难在登录状态、页面变化和失败恢复往往不稳定，仓库说明只能作为第一层证据。落地前可以选择一个权限清楚的网页流程做端到端短测，用会话保持、元素定位、错误恢复和工件留存判断它是否真的省事。我的判断是，它更适合需要可观测网页自动化流程的开发者；若眼下没有这类需求，先保留观察即可。

Cool-Chi/ambient-aurora 项目截图 1

Ambient Aurora

繁体中文：一款汲取 Apple Fluid Interface 哲学与 Emil Kowalski 设计工程动效原则 的单档网页环境时钟与萤幕保护程式。结合原生 GLSL 片段着色器、次像素级抗色阶抖动（Dithering）、非对称长按退出机制与极致节能架构，实现零外部依赖、纯粹且低负载的沉浸美学。

English: An Apple-inspired ambient web screensaver and digital timepiece engineered with Emil Kowalski's interaction & motion principles. Powered by raw WebGL GLSL fragment shaders, sub-pixel dithering, asymmetric hold-to-confirm exit mechanics, and zero external dependencies.

体验线上展示 (Live Demo)

视觉模式 / Visual Modes

Silk (经典丝绸) Glow (边界光晕) Dust (深空星尘)
Domain Warping fBM Edge Caustics Volumetric Dust & Rays
多重柏林噪聲與座標扭曲，呈現有機交融的絲綢光感 致敬 Apple Intelligence 语汇，边界流光呼吸，中央维持深邃保证时钟易读性 基于 Procedural Hash 网格演算法的闪烁微粒与深空星云暗角

核心亮点 / Key Highlights

1. 图形渲染与光学防御 (Graphics & Optical Safeguards)

  • 硬体级抗色阶杂讯 (Anti-Banding Dithering)：在 GLSL Fragment Shader 输出层注入高频微噪点，彻底消除 OLED 与大尺寸高动态萤幕上的色阶断层（Color Banding）。
  • 零跳帧时间轴 (Anti-Jitter Phase Engine)：废弃易引发时间轴重置跳动的 CSS Keyframes，全面采用 requestAnimationFrame 搭配每帧时间差（$Delta t$）正规化速度，完美适配 ProMotion 120Hz 高刷萤幕。
  • 无缝交叉淡化 (Blur-Masked Crossfade)：动效模式切换时套用 1500ms cubic-bezier(0.77, 0, 0.175, 1) 双向混合，并辅以动态高斯模糊掩饰重叠过渡。

2. 精准动态与互动哲学 (Emil Kowalski's Motion Principles)

  • 非对称时序退出 (Asymmetric Hold-to-Confirm)：
    • 蓄力阶段 (Press)：长按空白键（桌面端）或长按萤幕（触控端）触发严格 2s linear 线性进度与画面推近动态。
    • 中断复原 (Release)：任意时刻松开，立即以 200ms cubic-bezier(0.23, 1, 0.32, 1) 敏捷回弹，杜绝「砖墙式」生硬中断。
  • 物理级按压回馈 (Tactile Scale Feedback)：所有控制项与主题色盘在 :active 下触发 scale(0.97)，并透过微正向字距提升小字辨识度。
  • 环境感知状态机 (Idle State Engine)：无操作 3 秒后平滑沉浸退场（UI 完全淡出、时钟降至 35% 亮度），唤醒时以 200ms 瞬间响应，并在闲置时自动解除焦点挟持。

3. 行动端原生标准 (Mobile-Native Engineering)

  • 觸控設備防禦：
    • 全局配置 100dvh 與 overscroll-behavior: none，消除滾動穿透與橡皮筋回彈。
    • Hover 样式全面收拢于 @media (hover: hover) and (pointer: fine)，阻断行动端点击残留高光（Sticky Hover）。
    • 设定面板在小萤幕自动转换为紧凑型 Bottom Sheet，保证 min-height: 44px 触控热区同时不遮挡中央时钟。
  • 无抖动排版 (Jitter Prevention)：时钟宣告 font-variant-numeric: tabular-nums，日期栏位以 calc() 等比连动字级，防止秒数跳动造成版面横向震颤。

4. 系统层节能调度 (System-Level Energy Efficiency)

  • 萤幕防休眠 (Screen Wake Lock API)：待机时自动请求常亮，并在视窗可见性改变时无缝重新获取。
  • 后台零消耗 (Page Visibility API)：分页切换至背景或最小化时，完全冻结 rAF 渲染回圈与时钟定时器，杜绝无谓电量消耗。

互动指南 / Controls

操作 (Action) 桌面端 (Desktop) 行动端 (Touch Device)
呼出 / 關閉設置面板 點擊左下角齒輪按鈕 點擊左下角齒輪按鈕
切換全螢幕 點擊右下角按鈕 或 按 F11 點擊全螢幕按鈕
安全退出 / 關閉 長按 Space（空白鍵）2 秒 長按畫面空白處 2 秒
中斷退出 放開空白鍵（立即平滑取消） 手指離開螢幕 或 滑動（即時取消）
喚醒介面 移動滑鼠或按任意鍵 輕觸螢幕

技术栈 / Tech Stack

  • Graphics Core：Raw WebGL 1.0 (Custom GLSL Shaders, FBM, Domain Warping)
  • Styling Architecture：Modern CSS3 (backdrop-filter, CSS Variables, 100dvh, Safe Area Insets)
  • Runtime Logic：Vanilla JavaScript (ES6+), Zero Dependencies (零外部依赖、单档架构)
  • Typography：System Font Stack (-apple-system, SF Pro Display, tabular-nums)

快速开始 / Getting Started

本專案為完全自包含的單檔架構，無需安裝 Node.js，亦無需任何打包工具。

本地运行 (Local Run)

  1. Clone 储存库：
    git clone [https://github.com/Cool-Chi/ambient-aurora.git](https://github.com/Cool-Chi/ambient-aurora.git)
cd ambient-aurora

相关文章

精彩推荐